javascript这门语言也算是历经几十载的风风雨雨了，这里面有堪称经典的设计，也有不完善的地方，但总体来说，还是值得让人佩服的。下面小编总结了几个点，跟大伙分享，如有不对的地方望指出。

Proxy对象

作用：用来自定义对象中的一些操作。

用法：

let p = new Proxy(target, handler)

target代表需要添加代理的对象，handler用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。

示例：

// onChange 即要进行的监听操作
var watch = (object, onChange) => {
 const handler = {
 // 如果属性对应的值为对象，则返回一个新的Proxy对象
 get(target, property, receiver) {
 try {
 return new Proxy(target[property], handler);
 } catch (err) {
 return Reflect.get(target, property, receiver);
 }
 },
 // 定义或修改对象属性
 defineProperty(target, property, descriptor) {
 onChange('define',property);
 return Reflect.defineProperty(target, property, descriptor);
 },
 // 删除对象属性
 deleteProperty(target, property) {
 onChange('delete',property);
 return Reflect.deleteProperty(target, property); 

 }
 };

 return new Proxy(object, handler);
};

// 测试对象
var obj = {
 name: 'bjw',
 age: 22,
 child: [1, 2, 3]
}

// 对象代理
var p = watch(obj1, (type, property) => { 
 console.log(`类型：${type}, 修改的属性：${property}`)
});

p.name = 'qwe'
 类型：define, 修改的属性：name
 "qwe"

p.child
 Proxy {0: 1, 1: 2, 2: 3, length: 3}
 
p.child.push(4)
 类型：define, 修改的属性：3
 类型：define, 修改的属性：length
 4

p.child.length = 2
 类型：define, 修改的属性：length
 2

p.child
 Proxy {0: 1, 1: 2, length: 2}

如果关注Vue进展的话，可能已经知道Vue3.0中将通过Proxy来替换原来的Object.defineProperty来实现数据响应式。之所以要用Proxy替换原来的API原因在于Proxy无需一层层递归为每个属性添加代理，一次即可完成以上操作。性能上更好，并且原本的实现有一些数据更新不能监听到，但Proxy可以完美监听到任何方式的数据改变，相信通过上面的例子已经能够感受到Proxy带来的优势了。唯一的缺点可能就是浏览器兼容性不太好了。

Reflect对象

为什么要有这样一个对象？

• 用一个单一的全局对象去存储这些方法，能够保持其他的JavaScript代码整洁、干净。（不然的话得通过原型链调用）
• 将一些命令式的操作delete、in使用函数代替，目的是为了让代码更好维护，避免出现更多的保留字。

Reflect对象拥有以下静态方法：

Reflect.apply
Reflect.construct
Reflect.defineProperty
Reflect.deleteProperty
Reflect.enumerate // 废弃的
Reflect.get
Reflect.getOwnPropertyDescriptor
Reflect.getPrototypeOf
Reflect.has
Reflect.isExtensible
Reflect.ownKeys
Reflect.preventExtensions
Reflect.set
Reflect.setPrototypeOf

主要几种方法的用法介绍：

// target：目标函数 

// this：绑定的上下文对象
// arguments：函数的参数列表
Reflect.apply(target, this, arguments)

const arr = [2, 3, 4, 5, 6];
let max;
// ES6
max = Reflect.apply(Math.max, null, arr)

// ES5 
max = Math.max.apply(null, arr);
max = Function.prototype.apply.call(Math.max, null, arr);

//这个方法，提供了一种新的不使用new来调用构造函数的方法
Reflect.construct(target, argumentsList[, newTarget])

function A(name) {
 console.log('Function A is invoked!');
 this.name = name;
}
A.prototype.getName = function() {
 return this.name;
};

function B(age) {
 console.log('Function B is invoked!');
 this.age = age;
}
B.prototype.getAge = function() {
 return this.age;
};


// 测试 (这两种是一致的)
var tom = new A('tom');
var tom = Reflect.construct(A, ['tom']);


// jnney继承了A的实例属性，同时继承了B的共享属性
// 简单来说，A构造函数被调用，但是 jnney.__proto__ === B.prototype
var jnney = Reflect.construct(A, ['jnney'], B);

//这个方法和Object.definePropperty（属性定义失败，会抛出一个错误，成功则返回该对象）相似，
//不过Reflect.defineProperty（属性定义失败，返回false，成功则返回true）返回的是一个Boolean值。
Reflect.defineProperty(target, propertyKey, attributes)

let obj = {};

let obj1 = Object.defineProperty(obj, 'name', {
 enumerable: true,
 value: 'bjw' 
});

// 这里会返回false 因为我们上面定义name这个属性是不可修改的,
// 然后我们又在这里修改了name属性,所以修改失败返回值为false
let result1 = Reflect.defineProperty(obj, 'name', {
 configurable: true,
 enumerable: true,
 value: 'happy'
});
console.log(result1); // false

//顾名思义，就是删除对象属性的
Reflect.deleteProperty(target, propertyKey)

let obj = {
 name: 'dreamapple',
 age: 22
};

let r1 = Reflect.deleteProperty(obj, 'name');
console.log(r1); // true
let r2 = Reflect.deleteProperty(obj, 'name');
console.log(r2); // true
let r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');
console.log(r3); // false

//读取/设置一个对象的属性
Reflect.get(target, propertyKey[, receiver]) 

Reflect.set(target, propertyKey, value[, receiver])

这个方法用来读取/设置一个对象的属性，target是目标对象，propertyKey是我们要读取的属性，receiver是可选的，如果propertyKey的getter函数里面有this值，那么receiver就是这个this所代表的上下文。

//返回属性描述符
Reflect.getOwnPropertyDescriptor(target, propertyKey)

var obj = {age: 22}
Reflect.getOwnPropertyDescriptor(obj, 'age')
{value: 22, writable: true, enumerable: true, configurable: true}

这个方法与Object.getOwnPropertyDescriptor方法类似，其中target是目标对象，propertyKey是对象的属性，如果这个属性存在属性描述符的话就返回这个属性描述符；如果不存在的话，就返回undefined。(如果第一个参数不是对象的话，那么Object.getOwnPropertyDescriptor会将这个参数强制转换为对象，而方法 Reflect.getOwnPropertyDescriptor会抛出一个错误)

Reflect.getOwnPropertyDescriptor(target, propertyKey)

这个方法与Object.getPrototypeOf方法是一样的，都是返回一个对象的原型，也就是内部的[[Prototype]]属性的值。

Reflect.setPrototypeOf与Object.setPrototypeOf方法的作用是相似的，设置一个对象的原型，如果设置成功的话，这个对象会返回一个true；如果设置失败，这个对象会返回一个false。

//检查一个对象上是否含有特定的属性
//这个方法相当于ES5的in操作符 

Reflect.has(target, propertyKey)

function A(name) {
 this.name = name || 'dreamapple';
}
A.prototype.getName = function() {
 return this.name;
};

var a = new A();

console.log('name' in a); // true
console.log('getName' in a); // true

let r1 = Reflect.has(a, 'name');
let r2 = Reflect.has(a, 'getName');
console.log(r1, r2); // true true

//检查一个对象是否是可以扩展的，也就是是否可以添加新的属性
//要求target必须为一个对象，否则会抛出错误
Reflect.isExtensible(target)

let obj = {};
let r1 = Reflect.isExtensible(obj);
console.log(r1); // true
// 密封这个对象
Object.seal(obj);
let r2 = Reflect.isExtensible(obj);
console.log(r2); // false

閱讀更多 滬漂程序員的生活史 的文章

關鍵字: 浏览器 JavaScript 设计