Object.defineProperty()函數是給對象設置屬性的。

Object.defineProperty(object, propertyname, descriptor);
一共有三個參數。
object：必須，要在其上添加或修改屬性的對象。
propertyname：必需。 一個包含屬性名稱的字符串。
descriptor： 屬性描述符。 它可以針對數據屬性或訪問器屬性。

descriptor：有以下參數值
value: ?屬性的值，默認為 undefined。
writable: ?該屬性是否可寫，如果設置成 false，則任何對該屬性改寫的操作都無效（但不會報錯,但是在嚴格模式下會報錯。），對于像前面例子中直接在對象上定義的屬性，這個屬性該特性默認值為為 true。
configurable:總開關，一旦為false，就不能再設置他的（value，writable，configurable）

enumerable:定義了對象的屬性是否可以在 for...in 循環和 Object.keys() 中被枚舉。

get: 對定義的屬性取值的時候會觸發get 對應的函數,并且返回結果，默認返回undefined。

set: 對定義的屬性賦值的時候會觸發set 對應的函數

?writable : 該屬性是否可寫，如果設置成 false，則任何對該屬性改寫的操作都無效

var someOne = { };Object.defineProperty(someOne, "name", {value:"coverguo" , //由于設定了writable屬性為false 導致這個量不可以修改writable: false }); console.log(someOne.name); // 輸出 coverguosomeOne.name = "linkzhu";console.log(someOne.name); // 輸出coverguo

?configurable : 總開關，一旦為false，就不能再設置他的（value，writable，configurable）

var someOne = { };Object.defineProperty(someOne, "name", {value:"coverguo" ,configurable: false }); delete someOne.name; console.log(someOne.name);// 輸出 coverguosomeOne.name = "linkzhu";console.log(someOne.name); // 輸出coverguoObject.defineProperty(someOne, "name", {value:"coverguo123" ,configurable: true }); //由于前面已經設置了，configurable，所以后面在修改value，configurable，以及writable都無效了。會報錯。//error: Uncaught TypeError: Cannot redefine property: b

get : 對定義的屬性取值的時候會觸發get 對應的函數,并且返回結果，默認返回undefined。

set：對定義的屬性賦值的時候會觸發set 對應的函數

var a= {} Object.defineProperty(a,"b",{set: function(newValue){console.log("你要賦值給我,我的新值是" + newValue);},get: function(){console.log("你取我的值")return 2 //注意這里，我硬編碼返回2 }})a.b = 1 //打印 你要賦值給我,我的新值是1console.log(a.b) //打印 你取我的值//打印 2 注意這里，和我的硬編碼相同的

?實際場景用法舉例：

//假如有一個目標節點， 我們想設置其位移時是這樣的

var targetDom = document.getElementById('target');var transformText = 'translateX(' + 10 + 'px)';targetDom.style.webkitTransform = transformText;targetDom.style.transform = transformText;/*通過上面，可以看到如果頁面是需要許多動畫時，我們這樣編寫transform屬性是十分蛋疼的。(┬＿┬) 但如果通過Object.defineProperty， 我們則可以*/ var dom = document.getElementById('target');Object.defineProperty(dom, 'translateX', {set: function(value) {var transformText = 'translateX(' + value + 'px)';dom.style.webkitTransform = transformText;dom.style.transform = transformText;}//這樣再后面調用的時候, 十分簡單dom.translateX = 10;dom.translateX = -10;//甚至可以拓展設置如scale, originX, translateZ,等各個屬性，達到下面的效果dom.scale = 1.5; //放大1.5倍dom.originX = 5; //設置中心點X}

?

轉載于:https://www.cnblogs.com/xinggood/p/6601067.html

總結

以上是生活随笔為你收集整理的Object.defineProperty()方法的用法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。