成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript 面向?qū)ο蟀鎵K之對(duì)象屬性

lolomaco / 3477人閱讀

摘要:上一篇面向?qū)ο蟀鎵K之理解對(duì)象下一篇面向?qū)ο蟀鎵K之定義多個(gè)對(duì)象屬性以及讀取屬性特性

這是 javascript 面向?qū)ο蟀鎵K的第二篇文章,主要講解的是對(duì)象的屬性,首先創(chuàng)建一個(gè)對(duì)象:

var person = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function () {
    console.log(this.name);
  }
};

上面的例子創(chuàng)建了一個(gè)名為 person 的對(duì)象,并為它添加了三個(gè)屬性( name 、 age 和 job )和一個(gè)方法( sayName() )。其中, sayName() 方法用于顯示 this.name (將被解析為 person.name )的值。
ECMAScript 中有兩種屬性:數(shù)據(jù)屬性和訪問器屬性。

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

數(shù)據(jù)屬性是可獲取和設(shè)置值得屬性,數(shù)據(jù)屬性將 value 和 writable 屬性包含在其描述符中。數(shù)據(jù)屬性有4個(gè)描述其行為的特性:

[[Configurable]]:表示能否通過 delete 刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。像前面例子中那樣直接在對(duì)象上定義的屬性,它們的這個(gè)特性默認(rèn)值為 true 。

[[Enumerable]]:表示能否通過 for-in 循環(huán)返回屬性。像前面例子中那樣直接在對(duì)象上定義的屬性,它們的這個(gè)特性默認(rèn)值為 true 。

[[Writable]]: 表示能否修改屬性的值。像前面例子中那樣直接在對(duì)象上定義的屬性,它們的這個(gè)特性默認(rèn)值為 true 。

[[Value]]: 包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性值的時(shí)候,從這個(gè)位置讀;寫入屬性值的時(shí)候,把新值保存在這個(gè)位置。這個(gè)特性的默認(rèn)值為 undefined 。

對(duì)于像前面例子中那樣直接在對(duì)象上定義的屬性,它們的 [[Configurable]] 、 [[Enumerable]]和 [[Writable]] 特性都被設(shè)置為 true ,而 [[Value]] 特性被設(shè)置為指定的值。例如:

var person = {
  name: "Nicholas",
};

這里創(chuàng)建了一個(gè)名為 name 的屬性,為它指定的值是 "Nicholas" 。也就是說, [[Value]] 特性將被設(shè)置為 "Nicholas" ,而對(duì)這個(gè)值的任何修改都將反映在這個(gè)位置。
此時(shí)有這樣一個(gè)想法,如果我不允許修改 name 屬性的值,怎么辦?或者說我要修改屬性的默認(rèn)特性,怎樣才可以實(shí)現(xiàn)呢?要實(shí)現(xiàn)這些功能就要用到 Object.defineProperty()方法,這個(gè)方法接收三個(gè)參數(shù):屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象。其中,描述符(descriptor)對(duì)象的屬性必須是: configurable 、 enumerable 、 writable 和 value 。設(shè)置其中的一或多個(gè)值,可以修改對(duì)應(yīng)的特性值。例如:

var person = {};
Object.defineProperty(person, "name", {
  writable: false,
  value: "Nicholas"
})
console.log(person.name); // Nicholas
person.name = "Greg";
console.log(person.name); // Nicholas

這個(gè)例子創(chuàng)建了一個(gè) name 屬性,它的值 "Nicholas" 是只讀的。這個(gè)屬性不可修改,如果嘗試修改這個(gè)值的話在非嚴(yán)格模式下會(huì)被忽略,但是如果在嚴(yán)格模式下,會(huì)拋出錯(cuò)誤:
Uncaught TypeError: Cannot assign to read only property "name" of object "#"
類似的規(guī)則也適用于不可配置的屬性:

var person = {};
Object.defineProperty(person, "name", {
  configurable: false,
  value: "Nicholas"
})
console.log(person.name); // Nicholas
delete person.name;
console.log(person.name); // Nicholas

把 configurable 設(shè)置為 false ,表示不能從對(duì)象中刪除屬性。如果對(duì)這個(gè)屬性調(diào)用 delete ,則在非嚴(yán)格模式下什么也不會(huì)發(fā)生,而在嚴(yán)格模式下會(huì)導(dǎo)致錯(cuò)誤。而且一旦把屬性定義為不可配置,就不能再把它變回可配置了。此時(shí),再調(diào)用 Object.defineProperty() 方法修改特性,都會(huì)導(dǎo)致錯(cuò)誤:

var person = {};
Object.defineProperty(person, "name", {
  configurable: false,
  value: "Nicholas"
})
console.log(person.name); // Nicholas
/* delete person.name;
console.log(person.name); // Nicholas */
Object.defineProperty(person, "name", {
  writable: true
})

也就是說 可以多次調(diào)用 Object.defineProperty() 方法修改同一屬性,但是當(dāng) configurable 設(shè)置為 false 后就不可以了。

在《JavaScript 高級(jí)程序設(shè)計(jì)(第三版)》中寫到:
“一旦把屬性定義為不可配置的,就不能再把它變回可配置了。此時(shí),再調(diào)用 Object.defineProperty() 方法修改除 writable 之外的特性,都會(huì)導(dǎo)致錯(cuò)誤?!?br>但是我試了一些,即使修改的是 writable 屬性,還是會(huì)報(bào)錯(cuò)。如果我描述的有錯(cuò),還望各位大佬指出,以便交流。

在調(diào)用 Object.defineProperty() 來定義屬性時(shí)。如果不指定, configurable 、 enumerable 和writable 特性的默認(rèn)值都是 false。其實(shí)在日常的開發(fā)中用到這種高級(jí)方法來定義屬性的機(jī)會(huì)還是比較少,不過理解這部分對(duì)理解對(duì)象還是有很大的好處。

訪問器屬性

訪問器屬性不包含數(shù)據(jù)值,但包含一對(duì)兒 getter 和 setter 函數(shù)(不過,這兩個(gè)函數(shù)都不是必需的)。在讀取訪問器屬性的時(shí)候,會(huì)調(diào)用 getter 方法,這個(gè)函數(shù)復(fù)制返回有效的值;在寫入訪問器屬性的時(shí)候,會(huì)調(diào)用 setter 函數(shù),這個(gè)函數(shù)復(fù)制如果修改數(shù)據(jù)。訪問器屬性有如下 4 個(gè)特性:

[[Configurable]] :表示能否通過 delete 刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為數(shù)據(jù)屬性。對(duì)于直接在對(duì)象上定義的屬性,這個(gè)特性的默認(rèn)值為true 。

[[Enumerable]] :表示能否通過 for-in 循環(huán)返回屬性。對(duì)于直接在對(duì)象上定義的屬性,這個(gè)特性的默認(rèn)值為 true 。

[[Get]] :在讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為 undefined 。

[[Set]] :在寫入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為 undefined 。訪問器屬性不能直接定義,必須使用 Object.defineProperty() 來定義。請(qǐng)看下面的例子。

var book = {
  _year: 2004,
  edition: 1
}

Object.defineProperty(book, "year", {
  get: function () {
    return this._year;
  },
  set: function (newVal) {
    if (newVal > this._year) {
      this._year = newVal;
      return this.edition += newVal - 2004;
    }
  }
})
book.year = 2005;
console.log(book.edition); // 2

以上代碼代碼創(chuàng)建了一個(gè) book 對(duì)象,定義了兩個(gè)屬性,_year 和 edition。而訪問器屬性 year 包含了一個(gè) geter 函數(shù)和 setter 函數(shù)。getter 函數(shù)返回 _year 的值,而 setter 函數(shù)返正確的版本。當(dāng)把 year 屬性修改成 2005 時(shí),而 edition 變?yōu)?2,這是使用訪問器屬性的常見方式,即設(shè)置一個(gè)屬性的值會(huì)導(dǎo)致其他屬性發(fā)生變化。
不一定非要同時(shí)指定 getter 和 setter,如果只指定 getter ,表明該屬性不能寫,只能讀取,嘗試寫入屬性會(huì)被忽略,但在嚴(yán)格模式下會(huì)報(bào)錯(cuò)。如果只指定 setter ,表明該屬性不能讀取,如果嘗試讀取,在嚴(yán)格模式和非嚴(yán)格模式下都會(huì)返回 undefined。

在《JavaScript 高級(jí)程序設(shè)計(jì)(第三版)》中寫到:
“只指定 setter 函數(shù)的屬性也不能讀,否則在非嚴(yán)格模式下會(huì)返回 undefined ,而在嚴(yán)格模式下會(huì)拋出錯(cuò)誤?!?br>但在 chrome 中測(cè)試了一下,在嚴(yán)格模式下不會(huì)拋出錯(cuò)誤,返回的也是 undefined 。如果我描述的有錯(cuò),還望各位大佬指出,以便交流。
小結(jié)

本片博客主要介紹了兩種屬性:數(shù)據(jù)屬性訪問器屬性,介紹了這兩種屬性的定義以及這兩種屬性的特性,主要使用方法 Object.defineProperty()。其實(shí)這篇文章主要是加強(qiáng)對(duì)對(duì)象的理解。

上一篇:javascript 面向?qū)ο蟀鎵K之理解對(duì)象

下一篇:javascript 面向?qū)ο蟀鎵K之定義多個(gè)對(duì)象屬性以及讀取屬性特性

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/93176.html

相關(guān)文章

  • javascript 面向對(duì)象版塊理解對(duì)象

    摘要:用代碼可以這樣描述安全到達(dá)國(guó)外面向過程既然說了面向?qū)ο?,那么與之對(duì)應(yīng)的就是面向過程。小結(jié)在這篇文章中,介紹了什么是面向?qū)ο蠛兔嫦蜻^程,以及中對(duì)象的含義。 這是 javascript 面向?qū)ο蟀鎵K的第一篇文章,主要講解對(duì)面向?qū)ο笏枷氲囊粋€(gè)理解。先說說什么是對(duì)象,其實(shí)這個(gè)還真的不好說。我們可以把自己當(dāng)成一個(gè)對(duì)象,或者過年的時(shí)候相親,找對(duì)象,那么你未來的老婆也是一個(gè)對(duì)象。我們就要一些屬性,比...

    lovXin 評(píng)論0 收藏0
  • javascript 面向對(duì)象版塊定義多個(gè)對(duì)象屬性以及讀取屬性特性

    摘要:返回值是一個(gè)對(duì)象,如果是訪問器屬性,這個(gè)對(duì)象的屬性有和如果是數(shù)據(jù)屬性,這個(gè)對(duì)象的屬性有和。上一篇面向?qū)ο蟀鎵K之對(duì)象屬性下一篇面向?qū)ο蟀鎵K之創(chuàng)建對(duì)象 這是 javascript 面向?qū)ο蟀鎵K的第三篇文章,主要講解的是多個(gè)屬性的定義以及讀取屬性的特性。前面這幾章內(nèi)容目的在于加深對(duì)對(duì)象的理解,這樣可以利于理解后面的原型鏈以及繼承方面的知識(shí),或者你也可以了解一下不一樣的 javascript ...

    wendux 評(píng)論0 收藏0
  • PHP面向對(duì)象編程偷懶技巧-代碼重用等總結(jié)

    摘要:一個(gè)不相關(guān)的總結(jié)鄙人現(xiàn)在寫代碼容易用一句話總結(jié)根本停不下來。這種狀況讓人生活狀態(tài)極差,黑夜白天顛倒,飽一頓餓一頓,體質(zhì)下降,妹紙盡失我要遠(yuǎn)離這種狀態(tài)。所以決定以后寫代碼盡可能只寫到點(diǎn),要緊的話再趕趕,一般就停下來寫寫總結(jié)泡泡腳藍(lán)后碎覺。 1、OOP在粗粒度上面向?qū)ο螅诩?xì)粒度上面向過程:即總體上看起來是一個(gè)模塊一個(gè)模塊的,細(xì)分起來還是需要一步一步執(zhí)行的; 2、OOP提高了代碼重用效率,...

    xiaodao 評(píng)論0 收藏0
  • 聊聊畢業(yè)設(shè)計(jì)系列 --- 項(xiàng)目介紹

    摘要:又將整個(gè)文藝類閱讀系統(tǒng)的業(yè)務(wù)劃分為兩大部分,分別是面向管理員和合作作者的后臺(tái)管理系統(tǒng)和面向用戶的移動(dòng)端,系統(tǒng)的需求分析將圍繞這兩部分進(jìn)行展開。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...

    Pink 評(píng)論0 收藏0
  • 聊聊畢業(yè)設(shè)計(jì)系列 --- 項(xiàng)目介紹

    摘要:又將整個(gè)文藝類閱讀系統(tǒng)的業(yè)務(wù)劃分為兩大部分,分別是面向管理員和合作作者的后臺(tái)管理系統(tǒng)和面向用戶的移動(dòng)端,系統(tǒng)的需求分析將圍繞這兩部分進(jìn)行展開。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...

    villainhr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

lolomaco

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<