JavaScript Object.defineProperty與proxy代理模式的使用詳細分析

Posted on by

1. Object.defineProperty

const obj = {};
Object.defineProperty(obj,prop,descript);
  • 參數 obj 要定義屬性的對象
  • prop 要定義的屬性
  • descript 屬性描述符

返回值:被傳遞給函數的對象

descript接收一個對象作為配置:

  • writable

屬性是否可寫 默認值fasle

  • value

屬性的值 默認值false

  • enumerable

屬性是否可枚舉,關系到能否被for…in、Object.keys()以及in關鍵字遍 默認值false

  • configurable 屬性是否可以被defineProperty定義
  • set setter函數
  • get getter函數

使用defineProperty定義的屬性descript默認值全為false

const obj = {};
obj.name = 'a';
//等同於
Object.defineProperty(obj,'name',{
  configurable: true,
  value: 'a',
  writable: true,
  enumerable: true,
});
conts obj1 = Object.defineProperty({},'name',{value: 'jack'});
//等同於
Object.defineProperty({},'name',{
  value: 'jack',
  enumerable: false,
  writable: false,
  configurable: fasle,
})

value和writable不能和setter與getter一起使用

       const obj = Object.defineProperty({},name,{
        writable:true,
        value: 'jack',
        set:function(newVal){
          return newVal;
        },
        get:function(val){
          return val;
        }
       });

執行上面的代碼出現異常:

Uncaught TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified.

也就是說我們使用writable和value或者set和get去定義屬性的讀寫,不能混合使用

      const obj = Object.defineProperty({},name,{
        writable:true,
       });
       const obj1 = Object.defineProperty({},name,{
        set:function(newVal){
          return newVal;
        },
        get:function(val){
          return val;
        }
       });
       obj.name = 'ian';
       obj1.name = 'jack';

2. Object.defineProperties

Object.defineProperties用法與Object.definePropert一致,可以同時定義多個屬性

      const obj = Object.defineProperties(obj, {
        name: {
          configurable: true,
          enumerable: true,
          writable: true,
          value: 'ian',
        },
        gender: {
          writable: false,
          value: 'male'
        },
        age: {
          set: function (val) { return val },
          set: function (val) { return val },
        }
      });

3. proxy

proxy的功能是代理對象,用於攔截對象的基本操作和自定義,與Object.defineProperty類似,區別是proxy代理整個對象,defineProperty隻能代理某個屬性。

語法

const obj = {};
const proxyObj = new Proxy({obj, handler});

handler 對象的方法:

  • setProptotypeOf()

Object.setPropertyOf的捕捉器

  • isExtensible()

Object.isExtensible的捕捉器

  • preventExtensions()

Object.preventExtensions方法的捕捉器

  • getOwnPropertyDescritor()

Object.getOwnPropertyDescriptor方法的捕捉器

  • defineProperty()

Object.definePropert方法的捕捉器

  • has()

in操作符的捕捉器

  • deleteProperty()

delete操作符的捕捉器

  • set

屬性設置操作的捕捉器

  • get

屬性獲取操作的捕捉器

  • onwKeys

Object.getOwnPropertyNames和Object.getOwnSymbos的捕捉器

  • apply

函數調用操作的捕捉器

  • constructor

new操作符的捕捉器

使用get捕捉器

    const obj = { name: 'ian', age: 21 };
    const proxyObj = new Proxy(obj, {
      get: function (obj, prop) {
        return prop in obj ? obj[prop] : 'prop not existent';
      },
    });
    console.log(proxyObj.gender); //prop not existent

使用set捕捉器驗證屬性值

      const obj = { name: 'ian' };
      const proxyObj = new Proxy(obj, {
        set: function (obj, prop, value) {
          if (prop === 'age') {
            if (typeof value !== 'number') {
              throw new TypeError('The age is not Integer');
            };
            if (value > 200) {
              throw new RangeError('The age is not invalid');
            };
          }
          obj[prop] = value;
          //標識修改成功
          return true;
        }
      });
      proxyObj.gender = 'male'; //male
      proxyObj.age = '二十'; // Uncaught TypeError: The age is not Integer
      proxyObj.age = 201;  //Uncaught RangeError: The age is not invalid
      proxyObj.age = 20; //20

捕獲new操作符

    function Person(name) {
      this.name = name;
    };
    const ProxyPerson = new Proxy(Person, {
      construct: function (target, args) {
        //使用原本的構造函數
        return new Person(...args);
      }
    })
    var jack = new ProxyPerson('jack');
    console.log(jack);//Object { name: "jack" }

捕獲函數調用

    //執行原本的函數
    const proxyFoo = new Proxy(log,{
      apply:function(target,that,args){
        target(args);
      }
    });
    proxyFoo('foo'); //foo
    //自定義函數
    const proxyFoo1 = new Proxy(log, {
    apply: function (target, that, args) {
      //將log改成alert執行
      alert(args);
    }
   });
    proxyFoo1('foo'); //foo

代理模式

當我們去訪問一個數據的時候,不直接去訪問數據,而是通過代理(Proxy)作為一個中間者替我們去獲取和設置數據,在proxy層可以做一些訪問控制等, 例如進行數據的校驗數,據合法後再設置給原數據,起到一個保護和校驗的功能。常見的代理模式有:

  • 保護代理

給被調用者提供訪問控制,確認調用者的權限

  • 遠程代理
  • 虛擬代理

用來代替巨大的對象,確保在需要的時候才被創建

  • 智能引用代理

總結

  • proxy是瀏覽器提供的代理方式,相比較defineProperty來說Proxy更加靈活,能代理對象的多個屬性
  • proxy還能捕捉和攔截數組、函數、構造器、以及Object的一些方法和操作符

到此這篇關於JavaScript Object.defineProperty與proxy代理模式的使用詳細分析的文章就介紹到這瞭,更多相關JS Object.defineProperty與proxy內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：