Proxy handler.set() 方法

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

此方法會攔截屬性賦值操作。

返回一個布林值用來表明是否賦值成功。

語法結構:

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

引數解析:

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

（2）.property:可選，target物件的屬性名稱。

（3）.value:可選，物件的屬性值。

（4）.receiver:可選，如果target的屬性部署了setter訪問器，那麼此訪問器的this指向receiver。

特別說明:

（1）.如果target目標物件的指定屬性是不可配置和不可寫的，那麼無法更改此屬性值。

（2）.如果目標物件的存取屬性沒有setter訪問器，那麼就無法設定對應的屬性值。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com"
}
var p = new Proxy({}, {
  set: function(target, prop, value, receiver) {
    console.log(prop + " = " + value);
    return true;
  }
});
p.webName = "antozne";

屬性賦值操作會被handler.set()攔截。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com"
}
var p = new Proxy(antzone, {
  set: function(target, prop, value, receiver) {
    console.log(prop + " = " + value);
    return true;
  }
});
Reflect.set(p, "age", 4);

Reflect.set()方式也會被handler.set()攔截。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName: "螞蟻部落",
  url: "www.softwhy.com",
  _age:2,
  set age(val){
    _age = val * this.num;
  },
  get age(){
    return _age;
  }
}
var obj = {
  num:4
}
var p = new Proxy(antzone, {
  set: function(target, prop, value, receiver) {
    console.log(prop + " = " + value);
    Reflect.set(target, prop, value, receiver);
    console.log(receiver);
    return true;
  }
});
Reflect.set(p, "age", 4, obj);
console.log(antzone.age);

Proxy handler.set()第四個引數接收的是Reflect.set()設定具有setter訪問器的target屬性時的第四個引數。

[JavaScript] 純文字檢視 複製程式碼
var antzone = {
  webName: "螞蟻部落",
  url:"www.softwhy.com"
}
Object.defineProperty(antzone, "webName", {
  writable: false,
  configurable: false
});
var p = new Proxy(antzone, {
  set: function(target, prop, value, receiver) {
    console.log(prop + " = " + value);
    Reflect.set(target, prop, value);
    return true;
  }
});
p.webName = "antzone";
console.log(antzone.webName)

上面的程式碼會報錯，因為webName屬性是不可配置且不可寫的。