目錄

• 一、Proxy 是什麼？
• 二、怎麼用？
• 1、使用 Proxy 的簡單例項
• 2、目標物件被正確修改
• 3、使用 set handler 做資料驗證
• 4、擴充套件建構函式
• 總結

一、Proxy 是什麼？

Proxy 物件用於攔截並修改目標物件的指定操作。

// 語法
const p = new Proxy(target,handler)

• target ：目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）。
• handler ：以函式作為屬性的物件，實現攔截和自定義操作。

二、怎麼用？

1、使用 Proxy 的簡單例項

訪問不存在的屬性，設定預設值返回而不返回 undefined

// 1、找到合適的 handler 並編寫程式碼
const handler = {
    get: function(obj,prop) {
        return prop in obj ? obj[prop] : 37;
    }
};
// 2、新建 Proxy 物件
const p = new Proxy({},handler);
// 3、執行操作
p.a = 1;
p.b = undefined;
// 4、檢視結果
console.log(p.a,p.b);      // 1,undefined
console.log('c' in p,p.c); // false,37

2、目標物件被正確修改

let target = {};
let p = new Proxy(target,{});
p.a = 37;   // 操作轉發到目標
console.log(target.a);    // 37. 操作已經被正確地轉發

3、使用 set handler 做資料驗證

let validator = {
  set: function(obj,prop,value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }
    // The default behavior to store the value
    obj[prop] = value;
    // 表示成功
    return true;
  }
};
let person = new Proxy({},validator);
person.age = 100;
console.log(person.age);
// 100
person.age =http://www.cppcns.com
 
 'young';
// 丟擲異常: Uncaught TypeError: The age is not an integer
person.age = 300;
// 丟擲異常: Uncaught RangeError: The age seems invalid

4、擴充套件建構函式

function extend(sup,base) {
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype,"constructor"
  );
  base.prototype = Object.create(sup.prototype);
  var handler = {
    construct: function(target,args) {
      var obj = Object.create(base.prototype);
      this.apply(target,obj,args);
      return obj;
    },apply: function(target,that,args) {
      sup.apply(that,args);
      base.apply(that,args);
    }
  };
  var proxy = new Proxy(base,handler);
  descriptor.value = proxy;
  Object.defineProperty(base.prototype,"constructor",descriptor);
  return proxy;
}
var Person = function (name) {
  this.name = name
};
var Boy = extend(Person,function (name,age) {
  this.age = age;
});
Boy.prototype.sex = "M";
var Peter = new Boy("Peter",13);
console.log(Peter.sex);  // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age);  // 13

總結客棧

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!