js對(duì)象

seal_de 發(fā)布于2019-08-21 16:43 / 2489人閱讀

摘要：也是一個(gè)隱藏函數(shù)，會(huì)在設(shè)置屬性值時(shí)調(diào)用當(dāng)只對(duì)屬性定義而沒(méi)有定義時(shí)，此屬性進(jìn)行復(fù)制操作時(shí)將被忽略，賦值會(huì)失敗但是不會(huì)報(bào)錯(cuò)檢測(cè)屬性對(duì)象可以看作是屬性的集合，因此我們會(huì)經(jīng)常檢測(cè)集合中成員的所屬關(guān)系，即判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中。

對(duì)象屬性描述符

可寫(xiě)（writable attribute），表明是否可以設(shè)置該屬性的值

可枚舉（enumerable attribute），表明是否可以通過(guò)for/in循環(huán)返回該值

可配置（configurable attribute），表明是否可以刪除或修改該屬性
在es5之前，通過(guò)代碼給對(duì)象創(chuàng)建的所有屬性都是可寫(xiě)的、可枚舉的和可配置的。在es5中則可以對(duì)這些特性加以配置

writable

示例代碼：

var one = {}
Object.defineProperty(one, "a", {
  value : 1,
  writable : false,
  configurable: true,
  enumerable: true
})
one.a = 2;
console.log(one.a) //1

如示例，當(dāng)將對(duì)象的屬性的writable特性定義為false時(shí)，對(duì)屬性值的修改就會(huì)靜默失敗

configurable

只要屬性是可配置的，就可以使用defineProperty()方法來(lái)修改屬性：

var one = {}
Object.defineProperty(one, "a", {
  value : 1,
  writable : true,
  configurable: false,
  enumerable: true
})
console.log(one.a) //1
one.a = 2;
console.log(one.a) //2
delete one.a
console.log(one.a) //2
Object.defineProperty(one, "a", {
  value: 3,
  writable: true,
  configurable: true,
  enumerable: true
}) //TypeError

當(dāng)屬性的configurable特性設(shè)置為false時(shí)，此屬性無(wú)法使用delete刪除，操作會(huì)默認(rèn)失敗，因?yàn)榇藢傩允遣豢膳渲玫模瑫r(shí)無(wú)法再修改configurable特性，會(huì)產(chǎn)生一個(gè)TypeError，即configurable修改成false是單向操作

enumerable

此描述符控制的是屬性是否會(huì)出現(xiàn)在對(duì)象的屬性枚舉中，比如說(shuō)for..in循環(huán)。如果把enumerable設(shè)置成false，這個(gè)屬性就不會(huì)出現(xiàn)在枚舉中，雖然可以正常訪問(wèn)。

var one = {b:2}
Object.defineProperty(one, "a", {
  value : 1,
  writable : true,
  configurable: true,
  enumerable: false
})
for (var key in one) {
  console.log(key + "---" + one[key]) //b---2
}

如上例所示，one對(duì)象定義了一個(gè)不可枚舉的屬性a，那么在for..in循環(huán)遍歷時(shí)就無(wú)法獲取到a屬性，當(dāng)你不希望某些特殊屬性出現(xiàn)在枚舉中，那就把它設(shè)置成enumerable:false

Getter和Setter

在es5中可以使用getter和setter部分改寫(xiě)默認(rèn)操作，但是只能應(yīng)用在當(dāng)個(gè)屬性上，無(wú)法應(yīng)用在整個(gè)對(duì)象上。getter是一個(gè)隱藏函數(shù)，會(huì)在獲取屬性值時(shí)調(diào)用。setter也是一個(gè)隱藏函數(shù)，會(huì)在設(shè)置屬性值時(shí)調(diào)用

var one = {
  get a() {
    return this._a_;
  },
  set a(val) {
    this._a_ = val * 2
  }
}
one.a = 2
console.log(one.a) //4

Tips:當(dāng)只對(duì)屬性定義getter而沒(méi)有定義setter時(shí)，此屬性進(jìn)行復(fù)制操作時(shí)將被忽略，賦值會(huì)失敗但是不會(huì)報(bào)錯(cuò)

檢測(cè)屬性

js對(duì)象可以看作是屬性的集合，因此我們會(huì)經(jīng)常檢測(cè)集合中成員的所屬關(guān)系，即判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中。可以通過(guò)in運(yùn)算符、hasOwnProperty()和propertyIsEnumerable()方法來(lái)檢測(cè)

in和hasOwnProperty

in運(yùn)算符左側(cè)是屬性名，右側(cè)是對(duì)象，如果對(duì)象的自由屬性或繼承屬性中包含這個(gè)屬性則返回true，對(duì)象的hasOwnProperty()方法用來(lái)檢測(cè)給定的名字是否是對(duì)象的自有屬性。對(duì)于繼承屬性將返回false：

var one = {
  a:1
}
console.log("a" in one) //true
console.log("b" in one) //false
console.log("toString" in one) //true
console.log(one.hasOwnProperty("a")) //true
console.log(one.hasOwnProperty("b")) //false
console.log(one.hasOwnProperty("toString")) //false

propertyIsEnumerable

propertyIsEnumerable()會(huì)檢查給定的屬性是否直接存在于對(duì)象中并且滿(mǎn)足enumerable:true：

var one = {}
Object.defineProperty(one, "a", {
  value : 1,
  enumerable: true
})
Object.defineProperty(one, "b", {
  value : 2,
  enumerable: false
})
console.log(one.propertyIsEnumerable("a")) //true
console.log(one.propertyIsEnumerable("b")) //false
console.log(Object.keys(one)) //["a"]
console.log(Object.getOwnPropertyNames(one)) //["a","b"]