代理和反射

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 2.7k 阅读时长 ≈ 2 分钟
ES6中代理和反射的原理、作用；存取器的原理和使用

代理和反射

属性描述符

Property Descriptor 属性描述符 是一个普通对象，用于描述一个属性的相关信息

通过Object.getOwnPropertyDescriptor(对象, 属性名)可以得到一个对象的某个属性的属性描述符

1
2
3
4
5
6
7
8
const obj = {
    a: 1,
    b: 2
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'))

输出结果：
{value: 1, writable: true, enumerable: true, configurable: true}
  • value：属性值
  • configurable：该属性的描述符是否可以修改
  • enumerable：该属性是否可以被枚举
  • writable：该属性是否可以被重新赋值
1
2
3
4
5
6
7
8
9
10
11

```javascript
const obj = {
    a: 1,
    b: 2
}
console.log(Object.getOwnPropertyDescriptors(obj))

// 输出结果：
// a: {value: 1, writable: true, enumerable: true, configurable: true}
// b: {value: 2, writable: true, enumerable: true, configurable: true}

如果需要为某个对象添加属性时 或 修改属性时， 配置其属性描述符，可以使用下面的代码:

1
2
Object.defineProperty(对象, 属性名, 描述符);
Object.defineProperties(对象, 多个属性的描述符)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const obj = {
    a: 1,
    b: 2
}
Object.defineProperty(obj, 'b', {
    value: 7
})

Object.defineProperties(obj, {
    a: {
        value: 3,
    },
    b: {
        value: 4
    }
})

存取器属性

属性描述符中，如果配置了 get 和 set 中的任何一个，则该属性，不再是一个普通属性，而变成了存取器属性。

get 和 set配置均为函数，如果一个属性是存取器属性，则读取该属性时，会运行get方法，将get方法得到的返回值作为属性值；如果给该属性赋值，则会运行set方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const obj = {
    a: 1,
}

Object.defineProperty(obj, 'b', {
    get() {
        console.log("调用了get方法!")
    },
    set(value) {
        console.log("调用了set方法！")
    }
})

obj.b = 1;
console.log(obj.b)


// 输出结果：
// 调用了set方法！
// 调用了get方法!
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 变成正常的属性（将值先存储到其他变量中）
const obj = {
    a: 1,
}

Object.defineProperty(obj, 'b', {
    get() {
        console.log("调用了get方法!")
        return obj._a;
    },
    set(value) {
        console.log("调用了set方法！")
        obj._a = value;
    }
})

obj.b = 1;
console.log(obj.b)

// 输出结果：
// 调用了set方法！
// 调用了get方法!
// 1

存取器属性最大的意义，在于可以控制属性的读取和赋值。

Reflect

1. Reflect是什么？

Reflect是一个内置的JS对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些JS底层功能

由于它类似于其他语言的反射，因此取名为Reflect

2. 它可以做什么？

使用Reflect可以实现诸如 属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中 等等功能

3. 这些功能不是已经存在了吗？为什么还需要用Reflect实现一次？

有一个重要的理念，在ES5就被提出：减少魔法、让代码更加纯粹

这种理念很大程度上是受到函数式编程的影响

ES6进一步贯彻了这种理念，它认为，对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种魔法，因此，需要将它们提取出来，形成一个正常的API，并高度聚合到某个对象中，于是，就造就了Reflect对象

因此，你可以看到Reflect对象中有很多的API都可以使用过去的某种语法或其他API实现。

4. 它里面到底提供了哪些API呢？

  • Reflect.set(target, propertyKey, value): 设置对象target的属性propertyKey的值为value，等同于给对象的属性赋值
  • Reflect.get(target, propertyKey): 读取对象target的属性propertyKey，等同于读取对象的属性值
  • Reflect.apply(target, thisArgument, argumentsList)：调用一个指定的函数，并绑定this和参数列表。等同于函数调用
  • Reflect.deleteProperty(target, propertyKey)：删除一个对象的属性
  • Reflect.defineProperty(target, propertyKey, attributes)：类似于Object.defineProperty，不同的是如果配置出现问题，返回false而不是报错
  • Reflect.construct(target, argumentsList)：用构造函数的方式创建一个对象
  • Reflect.has(target, propertyKey): 判断一个对象是否拥有一个属性
  • 其他API

Proxy 代理

代理：提供了修改底层实现的方式

1
2
3
4
5
6

//代理一个目标对象
//target：目标对象
//handler：是一个普通对象，其中可以重写底层实现
//返回一个代理对象
new Proxy(target, handler)