JS對象

本節(jié)主要介紹對象的屬性類型以及創(chuàng)建對象的幾種方法荚斯。

對象的屬性類型:

ES中只有兩種屬性:數(shù)據(jù)屬性和訪問器屬性。

數(shù)據(jù)屬性

[[Configurable]]: 是否可配置绍哎,如能否delete刪除屬性湖雹,能否修改為訪問器屬性等勤庐。
[[Enumerable]]: 能否通過for-in返回屬性嗜桌。內(nèi)置對象自帶的原型屬性是不可枚舉的奥溺。
[[Writable]]: 能否修改屬性值辞色。
[[Value]]: 屬性的數(shù)據(jù)值骨宠。

訪問器屬性

[[Configurable]]:能否修改屬性特征,能否delete刪除屬性相满,能否修改為訪問器屬性层亿。
[[Enumerable]]: 能否通過for-in返回屬性。
[[Set]]: 寫入屬性時調(diào)用立美。
[[Get]]: 讀取屬性時調(diào)用匿又。

訪問器屬性必須使用Object.defineProperty()定義。

var person = {
  name: 'John',
  surname: 'Smith',
}
Object.defineProperty(person, "fullname",{
  get: function(){
    return this.name + ' ' + this.surname
  },
  set: function(value){
    this.name = value.split(' ')[0]
    this.surname = value.split(' ')[1]
  }
})
console.log(person.fullname)//'John Smith'
person.surname = 'Brown'
console.log(person.fullname)//'John Brown'
person.fullname = 'Ami Smith'
console.log(person.name)//'Ami'

創(chuàng)建對象的幾種方法對比:

1.對象字面量
var person1 = {
  name: '小強(qiáng)',
  age: 29,
  sayName: function () {
    console.log(this.name)
  }
}
var person2 = {
  name: '小紅',
  age: 10,
  sayName: function () {
    console.log(this.name)
  }
}

上面通過對象字面量的方式創(chuàng)建了兩個對象建蹄,person1和person2碌更。這種方法創(chuàng)建對象會產(chǎn)生大量的重復(fù)代碼。

2.工廠模式
function createPerson (name, age) {
  var o = new Object()
  o.name = name
  o.age = age
  o.sayName = function () {
    console.log(this.name)
  }
  return o
}
var person1 = createPerson('小強(qiáng)', 10)
var person2 = createPerson('小紅', 10)
image.png

工廠模式?jīng)]有創(chuàng)建特定的對象類型洞慎,無法進(jìn)行對象的識別痛单。

3.構(gòu)造函數(shù)模式
function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
var person1 = new Person('小強(qiáng)', 10)
var person2 = new Person('小紅', 10)
image.png
  • 構(gòu)造函數(shù)的方法與上述工廠模式相比,有以下區(qū)別:

1.沒有顯示的創(chuàng)建對象劲腿;
2.函數(shù)內(nèi)部使用this,將屬性和方法都寫到this上旭绒。
3.沒有return返回值

  • 構(gòu)造函數(shù)的方法有個new Person()的過程,new的時候發(fā)生了什么焦人?

1.創(chuàng)建一個新的對象挥吵;
2.把構(gòu)造函數(shù)的作用域賦給這個新對象,這樣this就指向了這個對象花椭;
3.執(zhí)行構(gòu)造函數(shù)的代碼忽匈,將屬性和方法添加到新對象上;
4.返回這個新對象矿辽。

  • 如何判斷對象類型脉幢?
    通過constructor屬性判斷,該屬性指向構(gòu)造函數(shù)嗦锐。


    image.png
  • 構(gòu)造函數(shù)的缺點(diǎn):
    構(gòu)造函數(shù)上的方法在每個實(shí)例上都是不同的方法嫌松,都需要重新創(chuàng)建一遍。

console.log(person1.sayName===person2.sayName)  //false
4. 原型模式

每個函數(shù)都有一個原型屬性(prototype)奕污,這個屬性是一個指針萎羔,指向一個對象,該對象包含所有實(shí)例對象可以共享的屬性和方法碳默。

function Person(name, age){
  this.name = name
  this.age = age
}
Person.prototype.sayName = function(){
  console.log(this.name)
}
Person.prototype.smart = true
var person1 = new Person('小強(qiáng)',10)
var person2 = new Person('小紅',10)
image.png
image.png
  • 如何判斷對象的屬性是在原型對象上還是實(shí)例對象上定義的贾陷?
    利用in可以判斷是否可以訪問到該屬性缘眶;
    利用hasOwnProperty可以判斷實(shí)例中是否存在該屬性;
    兩者結(jié)合可以判斷該屬性是否只存在于原型中髓废。
var person1 = new Person('小強(qiáng)',10)
var person2 = new Person('小紅',10)
person1.smart=false
//是否能訪問到該屬性
console.log("smart" in person1)//true
console.log("smart" in person2)//true
//實(shí)例中是否存在該屬性
console.log(person1.hasOwnProperty("smart"))//true
console.log(person2.hasOwnProperty("smart"))//false
//屬性是否只存在于原型中
console.log(("smart" in person1)&& !(person1.hasOwnProperty("smart")))//false
console.log(("smart" in person1) && !(person2.hasOwnProperty("smart")))//true
  • 原型的利用:添加一個所有實(shí)例可訪問的共享屬性巷懈。
var time=new Date()
Date.prototype.format=function(){
  return (this.getMonth() + 1) + '-'+this.getDate()
}
var formatTime = time.format()

創(chuàng)建對象的總結(jié)

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市慌洪,隨后出現(xiàn)的幾起案子顶燕,更是在濱河造成了極大的恐慌,老刑警劉巖冈爹,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涌攻,死亡現(xiàn)場離奇詭異,居然都是意外死亡频伤,警方通過查閱死者的電腦和手機(jī)恳谎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來憋肖,“玉大人因痛,你說我怎么就攤上這事“陡” “怎么了鸵膏?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坐慰。 經(jīng)常有香客問我较性,道長,這世上最難降的妖魔是什么结胀? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任赞咙,我火速辦了婚禮,結(jié)果婚禮上糟港,老公的妹妹穿的比我還像新娘攀操。我一直安慰自己,他們只是感情好秸抚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布速和。 她就那樣靜靜地躺著,像睡著了一般剥汤。 火紅的嫁衣襯著肌膚如雪颠放。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天吭敢,我揣著相機(jī)與錄音碰凶,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛欲低,可吹牛的內(nèi)容都是我干的壹粟。 我是一名探鬼主播嫉嘀,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼汽纤,長吁一口氣:“原來是場噩夢啊……” “哼胰丁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腊瑟,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤聚假,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后扫步,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體魔策,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡匈子,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年河胎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虎敦。...
    茶點(diǎn)故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡游岳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出其徙,到底是詐尸還是另有隱情胚迫,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布唾那,位于F島的核電站访锻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏闹获。R本人自食惡果不足惜期犬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望避诽。 院中可真熱鬧龟虎,春花似錦、人聲如沸沙庐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拱雏。三九已至棉安,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铸抑,已是汗流浹背贡耽。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人菇爪。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓算芯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親凳宙。 傳聞我的和親對象是個殘疾皇子熙揍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容