概述

　　用于給一個對象定義一個新屬性或是修改某個現(xiàn)有屬性，并返回此對象。Object.defineProperty(obj,prop,descriptor)?它接收 3 個參數(shù)，第 1 個是要定義屬性的對象；第 2 個是要定義或修改的屬性的屬性名或 Symbol；第 3 個是對該屬性的描述，稱之為屬性描述符，為一個對象，可以擁有 4 個 key。

• value：設(shè)置屬性值，默認undefined；
• writable：是否可以重寫，true | false，默認false；
• enumerable：目標屬性是否可以被枚舉，true | false，默認false；
• configerable：目標屬性是否可以刪除或者再次修改特性，true | false，默認false；

屬性描述

• enumerable：描述該屬性是否是可枚舉的。如下例子，new 一個包含name和sex屬性的person實例，然后通過Object.defineProperty()定義屬性age, 然后通過for語句變量person對象的屬性，看看效果：

• let person={name:'feixue', sex:0};
  Object.defineProperty(person,'age',
  {
      value:30,
      enumerable:false
  })
  console.log(person);
  for(let key in person)
  {
      console.log(key);
  }

  如下圖，person有3個屬性{name:'feixue',sex:0,age:30}。其中age是通過Object.defineProperty()定義的，enumerable設(shè)置false。 當(dāng)遍歷person時只能看到name和sex, 看不到age。 當(dāng)enumerable設(shè)置true時，遍歷person可以看到age屬性(自行嘗試)

?

• value：屬性的值，可以設(shè)置和修改。注意：如果允許屬性可修改，需要設(shè)置‘writable':true。示例如下，修改age的值，看看效果：

  •  1 let person={name:'feixue', sex:0};
     2 Object.defineProperty(person,'age',
     3 {
     4     value:30,
     5     enumerable:false,
     6     writable:true
     7 })
     8 console.log(person);
     9 person.age=40;
    10 console.log(person);

    如下圖，age初始值是30，通過修改設(shè)置成40

    

• get /set : get設(shè)置屬性值，get 獲取屬性值?

  •  1 let person={name:'feixue', sex:0};
     2 let _age=45;
     3 Object.defineProperty(person,'age',
     4 {
     5     get:function()
     6     {
     7         return _age;
     8     },
     9     set(value)
    10     {
    11         _age=value;
    12     }
    13 })
    14 console.log("age is "+person.age);
    15 person.age=60;
    16 console.log("age is "+person.age);

    如圖所示，getter和setter可以寫成get(){}/set(value){} 或者 get:function{}/set:function(value){} 。 當(dāng)屬性被獲取時，會執(zhí)行g(shù)etter函數(shù)。當(dāng)屬性被設(shè)置時，會執(zhí)行setter函數(shù)。

    

?

　請注意, 使用getter 和 setter ，就不可以設(shè)置value了。請看下面的示例，同時使用getter/setter 和 value會報什么錯誤？

• •  1 let person={name:'feixue', sex:0};
     2 let _age=45;
     3 Object.defineProperty(person,'age',
     4 {
     5     value:30,
     6     get:function()
     7     {
     8         return _age;
     9     },
    10     set(value)
    11     {
    12         _age=value;
    13     }
    14 })
    15 console.log(person);

　　　　　　　　此處同時使用了value和 getter/setter, 報錯信息如下

另外，使用value和 getter/setter 還是有區(qū)別的， 請看下圖, 2者有什么區(qū)別？ 如下圖，圖一使用了vue, 圖二使用了getter/setter.

?

• ?到此這篇關(guān)于js 通過Object.defineProperty() 定義和控制對象屬性的文章就介紹到這了。歡迎光臨我的博客：巨大的石頭 - 博客園 (cnblogs.com)

　　　文章來源地址http://www.zghlxwxcb.cn/news/detail-837625.html

到了這里，關(guān)于js通過Object.defineProperty() 定義和控制對象屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！