Object.defineProperty() （轉載）

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。

語法

Object.defineProperty(obj,prop,descriptor)

參數(shù)

obj

要在其上定義屬性的對象。

prop

要定義或修改的屬性的名稱。

descriptor

將被定義或修改的屬性的描述符。

返回值

被傳遞給函數(shù)的對象。

描述

該方法允許精確添加或修改對象的屬性。一般情況下，我們?yōu)閷ο筇砑訉傩允峭ㄟ^賦值來創(chuàng)建并顯示在屬性枚舉中（for...in 或 Object.keys 方法）， 但這種方式添加的屬性值可以被改變，也可以被刪除。而使用 Object.defineProperty() 則允許改變這些額外細節(jié)的默認設置。例如，默認情況下，使用 Object.defineProperty() 增加的屬性值是不可改變的。

對象里目前存在的屬性描述符有兩種主要形式：數(shù)據描述符和存取描述符。數(shù)據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數(shù)功能來描述的屬性。描述符必須是兩種形式之一；不能同時是兩者。

數(shù)據描述符和存取描述符均具有以下可選鍵值：
configurable

當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能夠被改變，也能夠被刪除。默認為 false。

enumerable

當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中。默認為 false

數(shù)據描述符同時具有以下可選鍵值：
value

該屬性對應的值?？梢允侨魏斡行У?JavaScript 值（數(shù)值，對象，函數(shù)等）。默認為 undefined。

writable

當且僅當該屬性的 writable 為 true 時，該屬性才能被賦值運算符改變。默認為 false。

存取描述符同時具有以下可選鍵值：
get

一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。該方法返回值被用作屬性值。默認為 undefined。

set

一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認為 undefined。

記住，這些選項不一定是自身屬性，如果是繼承來的也要考慮。為了確認保留這些默認值，你可能要在這之前凍結 Object.prototype，明確指定所有的選項，或者將proto屬性指向null。

// 使用 __proto__
Object.defineProperty(obj, "key", {
  __proto__: null, // 沒有繼承的屬性
  value: "static"  // 沒有 enumerable
                   // 沒有 configurable
                   // 沒有 writable
                   // 作為默認值
});

// 顯式
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

// 循環(huán)使用同一對象
function withValue(value) {
  var d = withValue.d || (
    withValue.d = {
      enumerable: false,
      writable: false,
      configurable: false,
      value: null
    }
  );
  d.value = value;
  return d;
}
// ... 并且 ...
Object.defineProperty(obj, "key", withValue("static"));

// 如果 freeze 可用, 防止代碼添加或刪除對象原型的屬性
// （value, get, set, enumerable, writable, configurable）
(Object.freeze||Object)(Object.prototype);

示例

如果你想知道如何用 *binary-flags-like *語法使用 Object.defineProperty方法，看看這篇文章。

創(chuàng)建屬性

如果對象中不存在指定的屬性，Object.defineProperty()
就創(chuàng)建這個屬性。當描述符中省略某些字段時，這些字段將使用它們的默認值。擁有布爾值的字段的默認值都是false。value，get和set字段的默認值為undefined。定義屬性時如果沒有get/set/value/writable，那它被歸類為數(shù)據描述符。

var o = {}; // 創(chuàng)建一個新對象

// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {
  value : 37,
  writable : true,
  enumerable : true,
  configurable : true
});

// 對象o擁有了屬性a，值為37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {
  get : function(){
    return bValue;
  },
  set : function(newValue){
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});

o.b = 38;
// 對象o擁有了屬性b，值為38

// The value of o.b is now always identical to bValue, unless o.b is redefined

// 數(shù)據描述符和存取描述符不能混合使用
Object.defineProperty(o, "conflict", {
  value: 0x9f91102, 
  get: function() { 
    return 0xdeadbeef; 
  } 
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors

修改屬性

如果屬性已經存在，Object.defineProperty()將嘗試根據描述符中的值以及對象當前的配置來修改這個屬性。如果描述符的 configurable 特性
為false（即該特性為non-configurable），那么除了 writable 外，其他特性都不能被修改，并且數(shù)據和存取描述符也不能相互切換。

如果一個屬性的 configurable為 false，則其 writable 特性也只能修改為 false。

如果嘗試修改 non-configurable 屬性特性（除 writable 以
外），將會產生一個TypeError 異常，除非當前值與修改值相同。

Writable 屬性

當屬性特性（property attribute） writable 設置為false時，表示 non-writable，屬性不能被修改。

var o = {}; // 創(chuàng)建一個新對象

Object.defineProperty(o, "a", { value : 37,
                                writable : false });

console.log(o.a); // 打印 37
o.a = 25; // 沒有錯誤拋出（在嚴格模式下會拋出，即使之前已經有相同的值）
console.log(o.a); // 打印 37， 賦值不起作用。

正如上例中看到的，修改一個 non-writable 的屬性不會改變屬性的值，同時也不會報異常。

Enumerable 特性

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

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
Configurable 特性

configurable 特性表示對象的屬性是否可以被刪除，以及除 writable 特性外的其他特性是否可以被修改。

var o = {};
Object.defineProperty(o, "a", { get : function(){return 1;}, 
                                configurable : false } );

// throws a TypeError
Object.defineProperty(o, "a", {configurable : true}); 
// throws a TypeError
Object.defineProperty(o, "a", {enumerable : true}); 
// throws a TypeError (set was undefined previously) 
Object.defineProperty(o, "a", {set : function(){}}); 
// throws a TypeError (even though the new get does exactly the same thing) 
Object.defineProperty(o, "a", {get : function(){return 1;}});
// throws a TypeError
Object.defineProperty(o, "a", {value : 12});

console.log(o.a); // logs 1
delete o.a; // Nothing happens
console.log(o.a); // logs 1

如果 o.a 的 configurable 特性已經為 true，沒有錯誤會被拋出，并且屬性會在最后被刪除。

添加多個屬性和默認值

考慮特性被賦予的默認特性值非常重要，通常，使用點運算符和Object.defineProperty()為對象的屬性賦值時，數(shù)據描述符中的屬性默認值是不同的，如下例所示。

var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

一般的 Setters 和 Getters

下面的例子說明了如何實現(xiàn)自我存檔的對象。當 temperature屬性設置時，archive數(shù)組會得到一個 log。

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

另一個例子：

var pattern = {
    get: function () {
        return 'I alway return this string,whatever you have assigned';
    },
    set: function () {
        this.myname = 'this is my name string';
    }
};


function TestDefineSetAndGet() {
    Object.defineProperty(this, 'myproperty', pattern);
}


var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';

// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname);

瀏覽器支持

Firefox (Gecko) 4.0
Chrome 5
Internet Explorer 9
Opera 11.60
Safari 5.1

在IE8中只支持 DOM 對象，同時也存在一些非標準的行為。
Safari 5中也支持，但不能是 DOM 對象。

兼容性問題

重定義數(shù)組對象的 length 屬性

數(shù)組的 length 屬性重定義是可能的，但是會受到一般的重定義限制。（length 屬性初始為 non-configurable，non-enumerable 以及 writable。對于一個內容不變的數(shù)組，改變其 length 屬性的值或者使它變?yōu)?non-writable 是可能的。但是改變其可枚舉性和可配置性或者當它是 non-writable 時嘗試改變它的值或是可寫性，這兩者都是不允許的。）然而，并不是所有的瀏覽器都允許 Array.length的重定義。

在 Firefox 4 至 22 版本中嘗試去重定義數(shù)組的 length 屬性都會拋出一個 TypeError 異常。
有些版本的Chrome中，Object.defineProperty()在某些情況下會忽略不同于數(shù)組當前length屬性的length值。有些情況下改變可寫性并不起作用（也不拋出異常）。同時，比如Array.prototype.push的一些數(shù)組操作方法也不會考慮不可讀的length屬性。
有些版本的Safari中，Object.defineProperty()在某些情況下會忽略不同于數(shù)組當前length屬性的length值。嘗試改變可寫性的操作會正常執(zhí)行而不拋出錯誤，但事實上并未改變屬性的可寫性。

只在Internet Explorer 9及以后版本和Firefox 23及以后版本中，才完整地正確地支持數(shù)組length屬性的重新定義。目前不要依賴于重定義數(shù)組length 屬性能夠起作用，或在特定情形下起作用。與此同時，即使你能夠依賴于它，你也沒有合適的理由這樣做。

Internet Explorer 8 具體案例

Internet Explorer 8 實現(xiàn)了 Object.defineProperty()方法，但 只能在 DOM 對象上使用。 需要注意的一些事情：嘗試在原生對象上使用 Object.defineProperty()會報錯。

屬性特性必須設置一些特定的值。對于數(shù)據屬性描述符，configurable, enumerable和 writable 特性必須全部設置為 true；
對于訪問器屬性描述符，configurable 必須設置為true，enumerable 必須設置為 false。 任何試圖提供其他值將導致一個錯誤拋出。
重新配置一個屬性首先需要刪除該屬性。如果屬性沒有刪除，就如同重新配置前的嘗試。

相關鏈接

Enumerability and ownership of properties
Object.defineProperties()

Object.propertyIsEnumerable()

Object.getOwnPropertyDescriptor()

Object.prototype.watch()

Object.prototype.unwatch()

get

set

Object.create()

Additional Object.defineProperty
examples
Reflect.defineProperty()

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&code=export%20function%20sum(x%2C%20y)%20%7B%0D%0A%20%20return%20x%20%2B%20y%3B%0D%0A%7D%0D%0Aexport%20var%20pi%20%3D%203.141593%3B

轉載自MDN

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容