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

資訊專欄INFORMATION COLUMN

使用 Object.defineProperty

MiracleWong / 2218人閱讀

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

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，第二個創(chuàng)建了foobar屬性，屬性的值是第三個參數(shù)中value。第一個參數(shù)是要修改的對象，第二個參數(shù)是屬性名，第三個參數(shù)是“描述”，一個可以對屬性進行一些設(shè)定的鍵值對。
所以，如果你想讓一個屬性變得不可枚舉，要這么寫

Object.defineProperty(demo, "foobar",{
    value:"hello",
    enumerable:false
});
可枚舉的屬性

上一個例子其實是沒有意義的，因為enumerable的默認值就是false,用上述方法創(chuàng)建的屬性默認就是不可枚舉，那么什么是不可枚舉呢？很簡單，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; // 如果使用直接賦值的方式創(chuàng)建對象的屬性，則這個屬性的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相當(dāng)于 .和[]的一個加強版，但是另外一個因素也讓他變得更強大。

屬性的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!?"

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

比如這樣：


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)

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87544.html

相關(guān)文章

  • 詳解JavaScript之神奇的Object.defineProperty

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

    baishancloud 評論0 收藏0

  • JS屬性特性（屬性描述符）

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

    yeyan1996 評論0 收藏0

  • JS進階篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用

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

    jasperyang 評論0 收藏0

  • JavaScript深入理解對象方法——Object.defineProperty()

    摘要：返回值被傳遞給函數(shù)的對象。描述該方法允許精確添加或修改對象的屬性。描述符必須是兩種形式之一不能同時是兩者?？梢允侨魏斡行У闹禂?shù)值，對象，函數(shù)等。該方法返回值被用作屬性值。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。 Object.defineProperties() Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性...

    woshicixide 評論0 收藏0

  • 理解Object.defineProperty的作用

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

    yexiaobai 評論0 收藏0

  • Object.defineProperty()

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

    ACb0y 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<