Proxy handler.defineProperty() 方法

關於Proxy更多內容可以參閱Proxy和Reflect一章節。

此方法會攔截Object.defineProperty或者Reflect.defineProperty()操作。

返回一個布林值用來說明操作是否成功。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
var p = new Proxy(target, {
  defineProperty: function (target, property, descriptor) {
    //code
  }
})

引數解析:

（1）.target:可選，要被代理的目標物件。

（2）.property:可選，屬性名稱。

（3）.descriptor:可選，property屬性的描述物件。

特別說明:

（1）.如果target物件是不可擴充套件的，向其新增屬性會報錯。

（2）.不能向target物件新增一個新的不可配置的屬性，否則會報錯。

（3）.不能將target物件的屬性修改為不可配置，否則會報錯。

（4）.如果handler.defineProperty()返回false，那麼也會丟擲一個錯誤。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {};
var p = new Proxy(antzone, {
  defineProperty: function(target, prop, descriptor) {
    console.log(prop);
    Reflect.defineProperty(target, prop, descriptor);
    return true;
  }
});
 
var desc = {
  configurable: true,
  enumerable: true,
  value:"螞蟻部落"
};
Object.defineProperty(p, "webName", desc);
console.log(antzone.webName);

上面的程式碼攔截了Object.defineProperty()操作；handler.defineProperty()返回值是true，表明新增成功。

Object.defineProperty()可以參閱Object.defineProperty()一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var antzone = {
  webName:"螞蟻部落"
}
var p = new Proxy(antzone, {
  defineProperty: function (target, prop, descriptor) {
    return true;
  }
});
  
var desc = {
  configurable: true,
  enumerable: true,
  value: 4
};
Object.defineProperty(p, "age", desc);
console.log(antzone.age);

大家不要誤以為返回值是true就一定為target物件重新配置了屬性，handler.defineProperty()方法僅僅是攔截配置操作。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var antzone = {
  webName:"螞蟻部落"
}
var p = new Proxy(antzone, {
  defineProperty: function (target, prop, descriptor) {
    return true;
  }
});
var desc = {
  configurable: false,
  enumerable: true,
  value: "antzone"
};
Object.defineProperty(p, "webName", desc);

如果target物件中原來不存在指定名稱的不可擴充套件的屬性，那麼向其新增或者將其修改成不可擴充套件的屬性會報錯。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName:"螞蟻部落"
}
var p = new Proxy(antzone, {
  defineProperty: function (target, prop, descriptor) {
    return true;
  }
});
  
var desc = {
  configurable: false,
  enumerable: true,
  value: 4
};
Object.defineProperty(p, "age", desc);

如果為target物件新新增一個不可配置的屬性，那麼就會報錯。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName:"螞蟻部落"
}
var p = new Proxy(antzone, {
  defineProperty: function (target, prop, descriptor) {
    return true;
  }
});
  
var desc = {
  configurable: false,
  enumerable: true,
  value: "antzone"
};
Object.defineProperty(p, "webName", desc);

將target物件的可配置屬性修改為不可配置就會報錯。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName:"螞蟻部落"
}
var p = new Proxy(antzone, {
  defineProperty: function (target, prop, descriptor) {
    Reflect.defineProperty(target, prop, descriptor);
    return true;
  }
});
  
var desc = {
  configurable: true,
  enumerable: true,
  value: 4
};
Reflect.defineProperty(p, "age", desc);
console.log(antzone.age);

由上面的程式碼可以看出，Reflect.defineProperty()操作也會被攔截。