响应式数据

Raccom

已于 2022-11-30 14:39:31 修改

阅读量424

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2022-11-30 14:23:25 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/128113817

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

Object.defineproperty

是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineproperty可以接收三个参数

Object.defineproperty(obj, prop, desc)

obj : 第一个参数就是要在哪个对象身上添加或者修改属性
prop : 第二个参数就是添加或修改的属性名
desc ：配置项，一般是一个对象

desc描述对象的配置项：

writable :是否可重写
value :当前值
get：读取时内部调用的函数
set：写入时内部调用的函数
enumerable：控制属性是否可以枚举
configurable：控制属性是否可以被删除/修改

get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为undefined
set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，不设置时为undefined
注：当使用了getter或setter方法，不允许使用writable和value这两个属性，get或set不是必须成对出现

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

var proxy = new Proxy(target, handler);

target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 proxy 的行为。

Proxy实例

const person = {
  name: "superMan",
};

const proxy = new Proxy(man, {
  get(target, property, receiver) {
    console.log(`正在获取 ${property} 属性`)
    return target[property];
  },
});

console.log(proxy.name);
console.log(proxy.age);

Proxy 构造函数接受 person 对象为代理目标，创建了一个代理对象。在创建代理对象时，我们定义了一个 get 捕获器，用于捕获代理目标属性读取的操作。捕获器的作用就是用于拦截用户对目标对象属性读取的相关操作，在这些操作传播到目标对象之前，会先调用对应的捕获器函数，从而拦截并修改相应的行为。

代理对象必须与被代理的对象具有相同特性（这里说的特性指的是，对象是否冻结，是否密封，是否可扩展），即被代理的对象不能修改，使用代理对象的set方法也会报错。再例如，被代理的对象被冻结，get方法不能返回与原值不同的值；getOwnPropertyDescriptor必须返回描述符对象。总之一句，被代理对象不能改的，代理对象同样不能改；代理对象的方法的返回值类型必须与被代理对象一致。

注：控制器对象内方法的 this，控制器对象内方法的this指向控制器对象本身

Proxy 原型

Proxy 实例也可以作为其他对象的原型对象：

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});
 
let obj = Object.create(proxy);
obj.time  // 35

捕获器

在创建 Proxy 对象时，除了定义 get 捕获器之外，我们还可以定义其他的捕获器。

参数

target：表示被代理的对象。
propKey：表示属性名（或方法名）。
receiver：表示该方法所在的代理对象。

get(target, propKey, receiver)

get方法用于拦截某个成员的读取操作（包括方法），上面已经简单给出了例子。下面给出代理数组的例子，使其可以用负数索引。

let arr = [1, 2, 3, 4, 5];
let proxy = new Proxy(arr, {
  get(target, prop) {
    let length = target.length,
      index = Number.parseInt(prop);
    if (index < 0) {
      return target[length + index]
    }
    if (index >= length) {
      return target[length - 1]
    }
    return target[index]
  }
});
console.log(proxy[-1]);   // 5
console.log(proxy[10]);   // 5
console.log(proxy[2]);    // 3

set(target, propKey, value, receiver)

set方法用于拦截对象属性的设置。其中，value表示属性的目标值。比较实用的用法是，与 DOM 的数据绑定。

需要注意的是！当存在二级属性时，如[{}, {}]或{ a: {}, b: {} }，对二级或以上的属性修改并不会触发set方法。

如下例子：

let listData = ['one', 'two', 'three'];
let proxy = new Proxy(listData, {
  set(target, prop, value) {
    let dom = document.getElementsByClassName('list-item')[prop]
    dom ? dom.innerText = value : null;
    target[prop] = value;
  }
})
proxy[0] = 'changed-one';

has(target, propKey)

has方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

注意，hasOwnProperty()和for...in都不能触发has方法。

注意，has方法只能返回布尔值，return非布尔值会自动转成布尔值。

let arr = [1, 2, 3, 4];
let proxyArr = new Proxy(arr, {
  has(target, prop) {
    return 'a'
  }
})
console.log('x' in proxyArr);    // true

deleteProperty(target, propKey)

deleteProperty方法用于拦截delete操作，只能返回布尔值，非布尔值会被转成布尔值，代表属性是否被删除成功，省略默认返回false。

let obj = { a: 1, b: 2 }
let proxyDel = new Proxy(obj, {
  deleteProperty(target, prop) {
    delete target[prop]
  }
});
console.log(delete proxyDel.a);   // false
console.log(obj);   //  { b: 2 }

getOwnPropertyDescriptor(target, propKey)

getOwnPropertyDescriptor方法拦截Object.getOwnPropertyDescriptor()或Object.getOwnPropertyDescriptors()，返回一个属性描述对象或者undefined。

注意，若返回值不是undefined，则返回值必须是包含[[configurable]]为true的对象，该值为false或省略会导致报错；若其他描述符未定义，以默认值填充；若返回对象包含除描述符以外的属性，则该属性被忽略。

//  undefined
let proxy1 = new Proxy({}, {
  getOwnPropertyDescriptor(target, prop) {
    return undefined
  }
});
console.log(Object.getOwnPropertyDescriptor(proxy1, 'a'));
// { value: undefined, writable: false, enumerable: false, configurable: true }
let proxy2 = new Proxy({}, {
  getOwnPropertyDescriptor(target, prop) {
    return { configurable: true }
  }
});
console.log(Object.getOwnPropertyDescriptor(proxy2, 'a'));
// 报错
let proxy3 = new Proxy({}, {
  getOwnPropertyDescriptor(target, prop) {
    return { configurable: false }
  }
});
console.log(Object.getOwnPropertyDescriptor(proxy3, 'a'));

defineProperty(target, propKey, propDesc)

defineProperty方法拦截Object.defineProperty()、Object.defineProperties()、obj.prop = 'value'等修改/添加对象的属性的操作。该方法只能返回布尔值，非布尔值会转成布尔值，表示是否成功定义属性，返回fasle会导致报错。其中，propDesc表示属性的描述符。

注意，如果对象被冻结（Object.freeze()）或对象被密封（Object.seal()）或对象不可扩展（ Object.preventExtensions()），甚至是某个属性被密封（[[configurable]]特性为false），对代理对象使用Object.defineProperty()都可能会报错。总之，和原对象的特性一致，不能被修改的被代理后同样不能被修改。

let obj = { d: 4 }
let proxyObj = new Proxy(obj, {
  defineProperty() {
    console.log('proxy-defineProperty');
    return true
  }
})
// 以下4种方法都会触发 defineProperty 方法
Object.defineProperty(proxyObj, 'a', {});
Object.defineProperties(proxyObj, { b: {} });
proxyObj.c = 3;
proxyObj.d = 5;

apply(target, object, args)

apply方法拦截函数的调用、call、apply、bind操作。其中，object表示函数上下文对象，args`表示函数的参数。

let obj = { a: 10 }
function fn() { }
let proxyFn = new Proxy(fn, {
  apply(target, object, args) {
    console.log('proxyFn-apply');
  }
})
// 直接执行函数 会触发
proxyFn();
// apply 和 call 会触发
proxyFn.apply(obj);
proxyFn.call(obj);
// bind 定义时不会触发 执行时触发
let p = proxyFn.bind(obj);
p();

construct(target, args, receiver)

construct方法用于拦截new命令。

注意，被代理的函数不能是箭头函数，否则也会报错。

注意，construct方法必须要return对象（包括函数、数组等），否则会报错。

// 错误例子1
let P1 = new Proxy(()=>{},{
  construct(){
    return {}
  }
});
let p1 = new P1();    // 报错,被代理函数不能是箭头函数
// 错误例子2
let P2 = new Proxy(function(){},{
  construct(){}
});
let p2 = new P2();    // 报错,construct必须返回对象

getPrototypeOf(target)

getPrototypeOf方法主要用来拦截获取对象原型，返回值必须是null或对象。具体来说，拦截下面这些操作。

Object.prototype.__proto__        // 只能在浏览器环境下执行
Object.prototype.isPrototypeOf()        // 代理对象作为参数
Object.getPrototypeOf()        // 代理对象作为参数
Reflect.getPrototypeOf()        // 代理对象作为参数
instanceof        // 代理对象在运算符的左边

下面给出简单例子：

let proxy = new Proxy({},{
  getPrototypeOf(){
    console.log('proxy-getPrototypeOf');
    return null
  }
});
// 都会打印 'proxy-getPrototypeOf'
let x1 = proxy.__proto__;   // 只能在浏览器下执行
let x2 = {}.isPrototypeOf(proxy);
let x3 = Object.getPrototypeOf(proxy);
let x4 = Reflect.getPrototypeOf(proxy);
let x5 = (proxy instanceof function(){});

setPrototypeOf(target, proto)

setPrototypeOf方法主要用来拦截Object.setPrototypeOf()方法。和Object.setPrototypeOf()方法一样，必须返回被设置的对象，否则报错。其中，proto表示被设为原型的对象。

注意，浏览器环境下可以通过__proto__设置原型对象，同样能触发setPrototypeOf方法。

et proxy = new Proxy({}, {
  setPrototypeOf(target, proto) {
    console.log('proxy-setPrototypeOf')
    return target;
  }
});
// 都打印 'proxy-setPrototypeOf'
Object.setPrototypeOf(proxy, {});
proxy.__proto__ = {}  // 非浏览器环境下使用会报错复制代码
isExtensible(target)
isExtensible方法拦截Object.isExtensible()方法，必须返回布尔值，非布尔值会被转成布尔值，且返回值必须与源对象所对应的值相同，否则报错。

// 错误示范
let proxy = new Proxy({}, {
  isExtensible() {
    return false
  }
});
console.log(Object.isExtensible(proxy));

preventExtensions(target)

preventExtensions方法拦截Object.preventExtensions()方法，只能返回被设为不可扩展的被代理对象，否则报错。如下：

let proxy = new Proxy({}, {
  preventExtensions(target) {
    console.log('proxy-preventExtensions')
    return Object.preventExtensions(target);
  }
});
Object.preventExtensions(proxy);  // proxy-preventExtensions
// 错误示范
let proxyErr = new Proxy({}, {
  preventExtensions(target) {
    return {}
  }
});
Object.preventExtensions(proxyErr);  // 报错

ownKeys(target)

ownKeys方法用来拦截对象自身所有属性的读取操作，必须返回数组或对象，否则报错。具体来说，拦截以下操作。

Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
getOwnPropertyDescriptors()
Object.entries()
Object.keys()
Object.values()
`for...in循环`

注意，虽然可以返回非数组的对象，对于如Object.keys这种默认返回数组的方法，得到的结果会是一个空数组。

注意，诸如Object.entries方法返回的数组不会含有Symbol属性名、不存在的属性名、不可遍历（enumerable）的属性名，与被代理对象的行为一致。

Object.getOwnPropertySymbols及其他方法同理，与被代理对象一致。

看下面简单例子：

let proxy = new Proxy({ a: 1, b: 2 }, {
  ownKeys() {
    console.log('proxy-ownKeys');
    return ['a', 'c']
  }
});
// 都会打印 'proxy-ownKeys'
let x1 = Object.entries(proxy);
let x2 = Object.keys(proxy);
let x3 = Object.values(proxy);
for (let x4 in proxy) { }
let x5 = Object.getOwnPropertyNames(proxy);
let x6 = Object.getOwnPropertyDescriptors(proxy);
let x7 = Object.getOwnPropertySymbols(proxy);
// entries、keys、values 都会过滤不可能显示的属性，跟被代理对象一致
console.log(x1);    // [ [ 'a', 1 ] ]

Proxy.revocable()

Proxy.revocable()方法与new Proxy()用法类似，都是依次传入被代理对象和控制器对象，返回一个包含proxy对象和revoke方法的对象。

其中，proxy对象和上面描述的一致，revoke方法用于解除proxy对象的代理，一旦取消将无法继续使用。

let proxyR = Proxy.revocable({ a: 1 }, {});
console.dir(proxyR);        // { proxy: { a: 1 }, revoke: [Function] }
console.log(proxyR.proxy);  // { a: 1 }
proxyR.revoke();