使用 Object.defineProperty

MiracleWong 發布于2019-08-21 12:21 / 2211人閱讀

摘要：第一個參數是要修改的對象，第二個參數是屬性名，第三個參數是描述，一個可以對屬性進行一些設定的鍵值對。

Object.defineProperty，顧名思義，為對象定義屬性，但是疑問是，我們有太多的辦法去定義一個對象的屬性了,比如foo["bar"] = 100,比如foo.bar = 100，為什么還要用它？會不會是自找麻煩呢？

使用Object.defineProperty的原因很簡單，因為只有通過它才能定義一些值得特殊屬性，比如是否可寫，是否可枚舉，接下來我們用例子來看一下。

定義或修改屬性

var demo = {
    foo:1,
    bar:2
};

Object.defineProperty(demo, "foo",{
    value:100
});

Object.defineProperty(demo, "foobar",{
    value:"hello"
});

這個例子中，第一個修改了demo的屬性foo，第二個創建了foobar屬性，屬性的值是第三個參數中value。第一個參數是要修改的對象，第二個參數是屬性名，第三個參數是“描述”，一個可以對屬性進行一些設定的鍵值對。
所以，如果你想讓一個屬性變得不可枚舉，要這么寫

Object.defineProperty(demo, "foobar",{
    value:"hello",
    enumerable:false
});

可枚舉的屬性

上一個例子其實是沒有意義的，因為enumerable的默認值就是false,用上述方法創建的屬性默認就是不可枚舉，那么什么是不可枚舉呢？很簡單，for...in 或 Object.keys找不到它,用MDN上的栗子

var o = {};
Object.defineProperty(o, "a", { value : 1, enumerable:true });
Object.defineProperty(o, "b", { value : 2, enumerable:false });
Object.defineProperty(o, "c", { value : 3 }); // enumerable defaults to false
o.d = 4; // 如果使用直接賦值的方式創建對象的屬性，則這個屬性的enumerable為true

for (var i in o) {    
  console.log(i);  
}
// 打印 "a" 和 "d" (in undefined order)

Object.keys(o); // ["a", "d"]

o.propertyIsEnumerable("a"); // true
o.propertyIsEnumerable("b"); // false
o.propertyIsEnumerable("c"); // false

所以，同樣你可以定義的屬性包括
Writable 是否可寫
Configurable 是否能刪除

所以,Object.defineProperty相當于 .和[]的一個加強版，但是另外一個因素也讓他變得更強大。

屬性的getter和setter

通過Object.defineProperty可以自定義屬性的getter和setter，看栗子

var demo = {
  foobar: "hello"
}
var v;
Object.defineProperty(demo,"foobar",{
  get:function(){
    console.log("i am been getting")
    return v + "?"
  },
  set:function(e){
    v = e + "!";
    console.log("i am changing!")
  }
  }
)
demo.foobar = "bye"
console.dir(demo.foobar)

//"i am changing!"
//"i am been getting"
//"bye!?"

這只是一個惡作劇，讓屬性在修改和獲取的時候都進行了修改，不過這確實是一個很強大的功能，我們可以通過這個方法實現頁面展現與數據的綁定，讓你的關注點集中在數據而不是數據的展現過程，這就是所謂的"雙向綁定"

比如這樣：


var demo = {}

var v;
Object.defineProperty(demo,"foobar",{
  get:function(){
    return v;
  },
  set:function(e){
    v = e;
    sow();
  }}
);

function sow(){
   $("body").html(demo.foobar) 
}


demo.foobar = "hello"

setTimeout(function(){
  demo.foobar = "bye"
  setTimeout(function(){
      demo.foobar = "i am back"
  },1000) 
},1000)

這個例子中，數據的展現交給了sow()去做，數據這邊每次更新demo.foobar的值，展現就會更新，這一切都得益于 Object.defineProperty

最后的話Object.defineProperty是ECS5屬性，所以IE8以下無效。

更多請見
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

GPU云服務器云服務器 https使用oos使用本地怎么使用使用云服務器阿里云服務器虛擬主機使用使用使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87544.html

詳解JavaScript之神奇的Object.defineProperty

摘要：與當與同時為時，屬性不能重新使用定義，嚴格模式下會報錯示例云麒報錯當或者為時，屬性可以重新使用定義，這一點讀者不妨自行測試。摘要： JavaScript有個很神奇的Object.defineProperty()，了解一下？ =與Object.defineProperty 為JavaScript對象新增或者修改屬性，有兩種不同方式：直接使用=賦值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 評論0 收藏0
JS屬性特性（屬性描述符）

摘要：概念中定義了一個名叫屬性描述符的對象，用于描述了的各種特征。只指定則表示屬性為只讀屬性。使用屬性描述符對象只能在或中使用。修改已有的屬性會拋出類型錯誤異常添加屬性會拋出類型錯誤異常不能修屬性結語我對屬性描述符很不熟悉，主要是因為平時用得少。概念 ECMAScript 5 中定義了一個名叫屬性描述符的對象，用于描述了的各種特征。屬性描述符對象有4個屬性： configurable：可...

yeyan1996 2019-08-22 10:42 評論0 收藏0
JS進階篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用

摘要：的使用對象是由多個名值對組成的無序的集合。目標屬性所擁有的特性返回值傳入函數的對象。是一種獲得屬性值的方法是一種設置屬性值的方法。參考相關閱讀鏈接基礎篇中的可枚舉屬性與不可枚舉屬性以及擴展 Math.max 實現得到數組中最大的一項 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(m...

jasperyang 2019-08-21 11:42 評論0 收藏0
JavaScript深入理解對象方法——Object.defineProperty()

摘要：返回值被傳遞給函數的對象。描述該方法允許精確添加或修改對象的屬性。描述符必須是兩種形式之一不能同時是兩者。可以是任何有效的值數值，對象，函數等。該方法返回值被用作屬性值。該方法將接受唯一參數，并將該參數的新值分配給該屬性。 Object.defineProperties() Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性...

woshicixide 2019-08-21 17:08 評論0 收藏0
理解Object.defineProperty的作用

摘要：對象是由多個名值對組成的無序的集合。對象中每個屬性對應任意類型的值。目標屬性所擁有的特性返回值傳入函數的對象。給對象的屬性添加特性描述，目前提供兩種形式數據描述和存取器描述。兼容性在下只能在對象上使用，嘗試在原生的對象使用會報錯。對象是由多個名/值對組成的無序的集合。對象中每個屬性對應任意類型的值。定義對象可以使用構造函數或字面量的形式： var obj = new Object; ...

yexiaobai 2019-08-20 12:09 評論0 收藏0
Object.defineProperty()

摘要：簡介源碼地址對象，屬性，屬性描述符用于在一個對象上定義一個新的屬性，或者修改一個對象現有的屬性，并返回這個對象。簡介源碼地址showImg(https://segmentfault.com/img/remote/1460000019446680?w=2458&h=610); Object.defineProperty(對象，屬性，屬性描述符) 用于在一個對象上定義一個新的屬性，或者...

ACb0y 2019-08-23 18:04 評論0 收藏0