ES6 提供了一个全新的选择 API-Reflect,Reflect 和 Proxy 是相对的,我们可以用 Reflect 操作对象。
现阶段这些方法存在于 object 和 Reflect 对象上,未来只存在于 Reflect 对象上。
意义:也就是说,从 Reflect 对象上可以拿到语言内部的方法。
比如:Object.defineProperty(obj,name,desc) 在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj,name,desc)则会返回 false,这样会更合理一些。
// 旧写法
try {
Object.defineProperty(target, property, attributes);
} catch (err) {
//failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
//success
} else {
//failure
}
说明:老写法有的是命令式编程,比如下面这个例子
// 老写法
"assign" in Object; // true
// 新写法
Reflect.has(Object, "assign"); //true
说明:Reflect 对象的方法与 Proxy 对象的方法一一对应,只要是 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 do " + value);
}
return success;
},
});
这就让 Proxy 对象可以方便地调用对应的 Reflect 方法,完成默认行为,作为修改行为的基础。也就是说,不管 Proxy 怎么修改默认行为,你总可以在 Reflect 上获取默认行为。
综上所述:Reflect 对象有 4 个意义:
静态方法
Reflect 一共有 13 个静态方法
它可以一部分是原来在 Object 上的方法,将它转移到了 Reflect 上,并做了小改动,让方法更加合理。
另一部分是将原来操作符的功能,变成函数行为
// 老写法
"assign" in Object; // true
// 新写法
Reflect.has(Object, "assign"); // true
// 老写法
Function.prototype.apply.call(Math.floor, undefined, [1.75]); // 1
// 新写法
Reflect.apply(Math.floor, undefined, [1.75]); // 1
// 旧写法
delete myObj.foo;
// 新写法
Reflect.deleteProperty(myObj, "foo");
// new 的写法
const instance = new Greeting("张三");
// Reflect.construct 的写法
const instance = Reflect.construct(Greeting, ["张三"]);
// 旧写法
Object.defineProperty(MyDate, "now", {
value: () => Date.now(),
});
// 新写法
Reflect.defineProperty(MyDate, "now", {
value: () => Date.now(),
});
Reflect.get(1, "foo"); // 报错
Reflect.get(false, "foo"); // 报错
Reflect.set(1, "foo", {}); // 报错
Reflect.set(false, "foo", {}); // 报错
var myObject = {
foo: 1,
bar: 2,
get baz() {
return this.foo + this.bar;
},
};
var myReceiverObject = {
foo: 4,
bar: 4,
};
Reflect.get(myObject, "baz", myReceiverObject); // 8
ES6 为 new 命令引入了一个new.target属性,该属性一般用在构造函数之中,返回 new 命令作用于的那个构造函数。如果构造函数不是通过 new 命令或Reflect.construct()调用的,new.target会返回 undefined,因此这个属性可以用来确定构造函数是怎么调用的。
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error("必须使用 new 命令生成实例");
}
}
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等),等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy 就像在目标对象之间的一个代理,任何对目标的操作都要经过代理。代理就可以对外界的操作进行过滤和改写。
Proxy 是构造函数,它有两个参数 target 和 handler。
target是用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler 是一个对象,其属性是当执行一个操作时定义代理的行为函数。
var obj = new Proxy(
{},
{
get: function (target, key, receiver) {
console.log(`getting ${key}`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}`);
return Reflect.set(target, key, value, receiver);
},
}
);
obj.count = 1; // setting count
++obj.count; // getting count setting count 2
Proxy 只有一个静态方法revocable(target, handler)可以用来创建一个可撤销的代理对象。两个参数和构造函数的相同。它返回一个包含了所生成的代理对象本身以及该代理对象的撤销方法的对象。
一旦某个代理对象被撤销,它将变的几乎完全不可用,在它身上执行任何的可代理操作都会抛出 TypeError 异常(注意,可代理操作一共有 14 种,执行这 14 种操作以外的操作不会抛出异常)。一旦被撤销,这个代理对象永远不可能恢复到原来的状态,同时和它关联的目标对象以及处理器对象将有可能被垃圾回收掉。调用撤销方法多次将不会有任何效果,当然,也不会报错。
var revocable = Proxy.revocable(
{},
{
get(target, name) {
return "[[" + name + "]]";
},
}
);
// revocable => {"proxy":proxy,"revoke":revoke}
var proxy = revocable.proxy;
proxy.foo; // "[[foo]]"
revocable.revoke(); // 执行撤销方法
proxy.foo; // TypeError
proxy.foo = 1; // TypeError
delete proxy.foo; // TypeError
typeof proxy; // "object" 因为typeof 不属于代理操作
handler 参数是代理函数对象,它一共支持 13 种拦截函数。和 Reflect 的相同。如果没有定义某种操作,那么这种操作会被转发到目标对象身上。
const proxy = new Proxy(
{},
{
get: function (target, property, receiver) {
return receiver;
// receiver 总是指向原始的读操作所在的那个对象,一般情况下就是 Proxy 实例。
},
}
);
proxy.getReceiver === proxy; // true
如果一个属性不可配置(configurable)且不可写(writable),则 Proxy 不能修改该属性,否则通过 Proxy 对象访问该属性会报错。
const target = Object.defineProperties(
{},
{
foo: {
value: 123,
writable: false,
configurable: false,
},
}
);
const handler = {
get(target, propKey) {
return "abc";
},
};
const proxy = new Proxy(target, handler);
proxy.foo;
// TypeError: Invariant check failed
apply 方法拦截函数的调用、call 和 apply 操作。
var target = function () {
return "I am the target";
};
var handler = {
apply: function () {
return "I am the proxy";
},
};
var p = new Proxy(target, handler);
p();
// "I am the proxy"
defineProperty 方法拦截了 Object.defineProperty 操作。
var handler = {
defineProperty(target, key, descriptor) {
return false;
},
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = "bar"; // 不会生效
// defineProperty 方法返回 false,导致添加新属性总是无效。
注意,如果目标对象不可扩展(non-extensible),则 defineProperty 不能增加目标对象上不存在的属性,否则会报错。另外,如果目标对象的某个属性不可写(writable)或不可配置(configurable),则 defineProperty 方法不得改变这两个设置。
getPrototypeOf方法主要用来拦截获取对象原型,会拦截以下这些操作:
ownKeys 方法用来拦截对象自身属性读取的操作,会拦截以下操作:
通过代理,你可以轻松地验证向一个对象的传值。
let validator = {
set: function (obj, prop, value) {
if (prop === "age") {
if (!Number.isInteger(value)) {
throw new Error("The age is not an integer");
}
if (value > 200) {
throw new Error("The age seems invalid");
}
}
// The default behavior to store the value
obj[prop] = value;
},
};
let person = new Proxy({}, validator);
person.age = 100;
console.log(person.age); // 100
person.age = "young";
// 抛出异常: Uncaught TypeError: The age is not an integer
person.age = 1000;
// 抛出异常: Uncaught RangeError: The age seems invalid
虽然 Proxy 可以代理针对目标对象的访问,但它不是目标对象的透明代理,即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的 this 关键字会指向 Proxy 代理。
const target = {
m: function () {
console.log(this === proxy);
},
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m(); // false
proxy.m(); //true
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();
// TypeError: this is not a Date object.
// getDate 方法只能在Date对象实例上面拿到,
// 如果this不是Date对象实例就会报错。
// 这时,this绑定原始对象,就可以解决这个问题
const target = new Date("2021-07-28");
const handler = {
get(target, prop) {
if (prop === "getDate") {
return target.getDate.bind(target);
}
return Reflect.get(target, prop);
},
};
const proxy = new Proxy(target, handler);
proxy.getDate(); // 28
页面更新:2024-04-30
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号