快捷導(dǎo)航

JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析

更新時(shí)間：2022年10月14日 15:40:50 作者：愛(ài)思考的豬

這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1. Object.defineProperty

const obj = {};
Object.defineProperty(obj,prop,descript);

參數(shù) obj 要定義屬性的對(duì)象
prop 要定義的屬性
descript 屬性描述符

返回值:被傳遞給函數(shù)的對(duì)象

descript接收一個(gè)對(duì)象作為配置:

writable

屬性是否可寫默認(rèn)值fasle

value

屬性的值默認(rèn)值false

enumerable

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

configurable 屬性是否可以被defineProperty定義
set setter函數(shù)
get getter函數(shù)

使用defineProperty定義的屬性descript默認(rèn)值全為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;
        }
       });

執(zhí)行上面的代碼出現(xiàn)異常:

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

也就是說(shuō)我們使用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一致,可以同時(shí)定義多個(gè)屬性

      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的功能是代理對(duì)象,用于攔截對(duì)象的基本操作和自定義,與Object.defineProperty類似,區(qū)別是proxy代理整個(gè)對(duì)象,defineProperty只能代理某個(gè)屬性。

語(yǔ)法

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

handler 對(duì)象的方法:

setProptotypeOf()

Object.setPropertyOf的捕捉器

isExtensible()

Object.isExtensible的捕捉器

preventExtensions()

Object.preventExtensions方法的捕捉器

getOwnPropertyDescritor()

Object.getOwnPropertyDescriptor方法的捕捉器

defineProperty()

Object.definePropert方法的捕捉器

has()

in操作符的捕捉器

deleteProperty()

delete操作符的捕捉器

set

屬性設(shè)置操作的捕捉器

get

屬性獲取操作的捕捉器

onwKeys

Object.getOwnPropertyNames和Object.getOwnSymbos的捕捉器

apply

函數(shù)調(diào)用操作的捕捉器

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捕捉器驗(yàn)證屬性值

      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;
          //標(biāo)識(shí)修改成功
          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) {
        //使用原本的構(gòu)造函數(shù)
        return new Person(...args);
      }
    })
    var jack = new ProxyPerson('jack');
    console.log(jack);//Object { name: "jack" }

捕獲函數(shù)調(diào)用

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

代理模式

當(dāng)我們?nèi)ピL問(wèn)一個(gè)數(shù)據(jù)的時(shí)候,不直接去訪問(wèn)數(shù)據(jù),而是通過(guò)代理(Proxy)作為一個(gè)中間者替我們?nèi)カ@取和設(shè)置數(shù)據(jù),在proxy層可以做一些訪問(wèn)控制等, 例如進(jìn)行數(shù)據(jù)的校驗(yàn)數(shù),據(jù)合法后再設(shè)置給原數(shù)據(jù),起到一個(gè)保護(hù)和校驗(yàn)的功能。常見(jiàn)的代理模式有:

保護(hù)代理

給被調(diào)用者提供訪問(wèn)控制,確認(rèn)調(diào)用者的權(quán)限

遠(yuǎn)程代理
虛擬代理

用來(lái)代替巨大的對(duì)象,確保在需要的時(shí)候才被創(chuàng)建

智能引用代理

總結(jié)

proxy是瀏覽器提供的代理方式,相比較defineProperty來(lái)說(shuō)Proxy更加靈活,能代理對(duì)象的多個(gè)屬性
proxy還能捕捉和攔截?cái)?shù)組、函數(shù)、構(gòu)造器、以及Object的一些方法和操作符

到此這篇關(guān)于JavaScript Object.defineProperty與proxy代理模式的使用詳細(xì)分析的文章就介紹到這了,更多相關(guān)JS Object.defineProperty與proxy內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: