ECMAScript6-----Proxy和Reflect

原创已于 2025-03-24 21:29:21 修改 · 1k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ecmascript

于 2025-02-22 23:00:32 首次发布

前端同时被 2 个专栏收录

333 篇文章

订阅专栏

ECMAScript6

18 篇文章

订阅专栏

ECMAScript6-----Proxy和Reflect

1.Proxy
- 1.1 概述
- 1.2 Proxy支持的拦截操作
2.Reflect
- 2.1 概述
- 2.2 静态方法
3.Proxy和Reflect的应用

1.Proxy

1.1 概述

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会得到下面的结果。

obj.count = 1
//  setting count!
console.log(++obj.count)
//  getting count!
//  setting count!
//  2

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

1.2 Proxy支持的拦截操作

下面是 Proxy 支持的拦截操作一览，一共 13 种。

get(target, propKey, receiver)：
拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
set(target, propKey, value, receiver)：
拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
has(target, propKey)：
拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey)：
拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target)：
拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)`、 for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：
拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：
拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：
拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：
拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：
拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：
拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)：
拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)`、proxy.apply(…)。
construct(target, args)：
拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

详细用法见:https://es6.ruanyifeng.com/#docs/proxy

2.Reflect

2.1 概述

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。
(1)将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。
(2)修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

(3)让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

// 老写法
'assign' in Object // true

// 新写法
Reflect.has(Object, 'assign') // true

(4)Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver);
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value);
    }
    return success;
  }
});

上面代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。

下面是另一个例子。

var loggedObj = new Proxy(obj, {
  get(target, name) {
    console.log('get', target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    console.log('delete' + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has' + name);
    return Reflect.has(target, name);
  }
});

上面代码中，每一个Proxy对象的拦截操作（get、delete、has），内部都调用对应的Reflect方法，保证原生行为能够正常执行。添加的工作，就是将每一个操作输出一行日志。

有了Reflect对象以后，很多操作会更易读。

// 老写法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1

// 新写法
Reflect.apply(Math.floor, undefined, [1.75]) // 1

2.2 静态方法

Reflect对象一共有 13 个静态方法。

Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

上面这些方法的作用，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的。

详细用法见:https://es6.ruanyifeng.com/#docs/reflect

3.Proxy和Reflect的应用

观察者模式指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。

const person = observable({
  name: '张三',
  age: 20
});

function print() {
  console.log(`${person.name}, ${person.age}`)
}

observe(print);
person.name = '李四';
// 输出
// 李四, 20

上面代码中，数据对象person是观察目标，函数print是观察者。一旦数据对象发生变化，print就会自动执行。

下面，使用 Proxy 写一个观察者模式的最简单实现。

   //用proxy模拟观察者模式
   //一个情景:当一个对象某个属性改变时候，我们打印“xx属性发生改变”,"时间在xxx"
   //把观察者事件放到集合中
    let observeEvents = new Set();
    function print(obj, propKey) {
        console.log(`${propKey}属性发生改变`)
    }
    function logTime() {
        console.log(`时间在${new Date().toLocaleString()}`)
    }
    observeEvents.add(print);
    observeEvents.add(logTime)
    //用于生成观察者代理的函数
    function observable(obj) {
        return new Proxy(obj, {
            set(target, propKey, propValue, receiver) {
                let res = Reflect.set(target, propKey, propValue)
                observeEvents.forEach(eventFn => {
                    eventFn(target, propKey);
                })
                return res
            }
        })
    }

    //被观察者
    const user = observable({
        name: "K",
        age: 20,
    });
    const person = observable({
        name: "K",
        age: 20,
    });

    user.name = "bbb"//name属性发生改变,时间在2024/5/25 23:33:46
    setTimeout(function () {
        person.age = 86
    }, 5000)
}