Proxy handler.get() 方法

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

此方法會攔截屬性的讀取操作；可以返回任意型別的值。

語法結構：

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

引數解析:

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

（2）.property:可選，要讀取的屬性名稱。

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

特別說明:

（1）.如果對應的target物件的資料屬性是不可配置，且不可寫，返回值必須就是target物件上此屬性的值，否則報錯。

（2）.如果對應的target物件的訪問器屬性是不可配置，且不存在get放棄，返回值必須是undefined，否則報錯。

程式碼例項:

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

在上面的程式碼中，獲取屬性值的操作會被攔截。

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

使用Reflect.get()方式獲取屬性值也會被handler.get()方法攔截。

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

上面的程式碼演示了handler.get()方法的第三個引數。

關於Reflect.get()用法可以參閱Reflect.get()方法一章節。

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

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

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

上面的程式碼會報錯，因為target物件不存在get訪問器，且訪問器屬性是不可配置的。