ES6 入门—ES6 Reflect 与 Proxy(2)

return Reflect.construct(target, args, newTarget);

},

};

class Exam {

constructor(name) {

this.name = name;

}

}

let ExamProxy = new Proxy(Exam, handler);

let proxyObj = new ExamProxy(“Tom”);

console.log(proxyObj);

// handle construct

// exam {name: “Tom”}

在终端使用 node 命令运行,效果如下:

请添加图片描述

三、Reflect

============================================================================

ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上(当前某些方法会同时存在于 Object 和 Reflect 对象上),未来的新方法会只部署在 Reflect 对象上。

Reflect 对象对某些方法的返回结果进行了修改,使其更合理。

Reflect 对象使用函数的方式实现了 Object 的命令式操作。

接下来讲一讲它的各种静态方法。

四、get 方法的使用

==============================================================================

Reflect.get(target, name, receiver);

查找并返回 target 对象的 name 属性。

let exam = {

name: “Tom”,

age: 24,

get info(){

return this.name + this.age;

}

}

Reflect.get(exam, ‘name’); // “Tom”

// 当 target 对象中存在 name 属性的 getter 方法, getter 方法的 this 会绑定 // receiver

let receiver = {

name: “Jerry”,

age: 20

}

Reflect.get(exam, ‘info’, receiver); // Jerry20

// 当 name 为不存在于 target 对象的属性时,返回 undefined

Reflect.get(exam, ‘birth’); // undefined

// 当 target 不是对象时,会报错

Reflect.get(1, ‘name’); // TypeError

在终端使用 node 命令运行:

请添加图片描述

五、set 方法的使用

==============================================================================

Reflect.set(target, name, value, receiver);

将 target 的 name 属性设置为 value。返回值为 boolean ,true 表示修改成功,false 表示失败。当 target 为不存在的对象时,会报错。

示例代码:

let exam = {

name: “Tom”,

age: 24,

set info(value) {

return this.age = value;

}

}

exam.age; // 24

Reflect.set(exam, ‘age’, 25); // true

exam.age; // 25

// value 为空时会将 name 属性清除

Reflect.set(exam, ‘age’, ); // true

exam.age; // undefined

// 当 target 对象中存在 name 属性 setter 方法时,setter 方法中的 this 会绑定 // receiver , 所以修改的实际上是 receiver 的属性,

let receiver = {

age: 18

}

Reflect.set(exam, ‘info’, 1, receiver); // true

receiver.age; // 1

let receiver1 = {

name: ‘oppps’

}

Reflect.set(exam, ‘info’, 1, receiver1); //true

receiver1.age; // 1

在终端使用 node 命令运行:

请添加图片描述

请添加图片描述

六、has 方法的使用

==============================================================================

Reflect.has(obj, name);

是 name in obj 指令的函数化,用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError 。

示例代码:

let exam = {

name: “Tom”,

age: 24

}

Reflect.has(exam, ‘name’); // true

在终端使用 node 命令运行:

请添加图片描述

七、deleteProperty 方法的使用

=========================================================================================

Reflect.deleteProperty(obj, property)

它是 delete obj[property] 的函数化,用于删除 obj 对象的 property 属性,返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

示例代码:

let exam = {

name: “Tom”,

age: 24

}

Reflect.deleteProperty(exam , ‘name’); // true

exam // {age: 24}

// property 不存在时,也会返回 true

Reflect.deleteProperty(exam , ‘name’); // true

在终端使用 node 命令运行:

请添加图片描述

八、construct 方法的使用

====================================================================================

Reflect.construct(obj, args)

等同于 new target(…args)。

示例代码:

function exam(name){

this.name = name;

}

Reflect.construct(exam, [‘Tom’]); // exam {name: “Tom”}

在终端使用 node 命令运行:

请添加图片描述

九、getPrototypeOf 方法的使用

=========================================================================================

Reflect.getPrototypeOf(obj)

用于读取 obj 的 proto 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象,而是会报错。

示例代码:

class Exam{}

let obj = new Exam()

Reflect.getPrototypeOf(obj) === Exam.prototype // true

在终端使用 node 命令运行:

请添加图片描述

十、setPrototypeOf 方法的使用

=========================================================================================

Reflect.setPrototypeOf(obj, newProto)

用于设置目标对象的 prototype。

示例代码:

let obj ={}

Reflect.setPrototypeOf(obj, Array.prototype); // true

在终端使用 node 命令运行:

请添加图片描述

十一、apply 方法的使用

=================================================================================

Reflect.apply(func, thisArg, args)

等同于 Function.prototype.apply.call(func, thisArg, args)。func 表示目标函数;thisArg 表示目标函数绑定的 this 对象;args 表示目标函数调用时传入的参数列表,可以是数组或类似数组的对象。若目标函数无法调用,会抛出 TypeError 。

示例代码:

Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5

在终端使用 node 命令运行:

请添加图片描述

十二、defineProperty 方法的使用

==========================================================================================

Reflect.defineProperty(target, propertyKey, attributes)

用于为目标对象定义属性。如果 target 不是对象,会抛出错误。

示例代码:

let myDate = {}

Reflect.defineProperty(myDate, ‘now’, {

value: () => Date.now()

}); // true

const student = {};

Reflect.defineProperty(student, “name”, {value: “Mike”}); // true

student.name; // “Mike”

在终端使用 node 命令运行:

请添加图片描述

十三、getOwnPropertyDescriptor 方法的使用

====================================================================================================

Reflect.getOwnPropertyDescriptor(target, propertyKey)

用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时,会抛出错误表示参数非法,不会将非对象转换为对象。 示例代码:

var exam = {}

Reflect.defineProperty(exam, ‘name’, {

value: true,

enumerable: false,

})

Reflect.getOwnPropertyDescriptor(exam, ‘name’)

// {value: true,writable:false, enumerable: false, configurable: false}

// propertyKey 属性在 target 对象中不存在时,返回 undefined

Reflect.getOwnPropertyDescriptor(exam, ‘age’) // undefined

在终端使用 node 命令运行:

请添加图片描述

十四、isExtensible 方法的使用

========================================================================================

Reflect.isExtensible(target)

用于判断 target 对象是否可扩展。返回值为 boolean。如果 target 参数不是对象,会抛出错误。示例代码:

let exam = {}

Reflect.isExtensible(exam) // true

在终端使用 node 命令运行:

请添加图片描述

十五、preventExtensions 方法的使用

=============================================================================================

Reflect.preventExtensions(target)

用于让 target 对象变为不可扩展。如果 target 参数不是对象,会抛出错误。示例代码:

let exam = {}

Reflect.preventExtensions(exam) // true

在终端使用 node 命令运行:

请添加图片描述

十六、ownKeys 方法的使用

===================================================================================

Reflect.ownKeys(target)

用于返回 target 对象的所有属性,等同于 Object.getOwnPropertyNamesObject.getOwnPropertySymbols 之和。示例代码:

var exam = {

name: 1,

}

Reflect.ownKeys(exam) // [“name”, Symbol(age)]

在终端使用 node 命令运行:

请添加图片描述

十七、组合使用

==========================================================================

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为,然后进行额外操作。

新建 test4.js 文件,代码如下:

let exam = {

name: “Tom”,

age: 24,

};

let handler = {

get: function (target, key) {

console.log("getting " + key);

return Reflect.get(target, key);

},

set: function (target, key, value) {

ajax

1)ajax请求的原理/ 手写一个ajax请求?
2)readyState?
3)ajax异步与同步的区别?
4)ajax传递中文用什么方法?

ajax.PNG

前12.PNG

flect.ownKeys(exam) // [“name”, Symbol(age)]

在终端使用 node 命令运行:

请添加图片描述

十七、组合使用

==========================================================================

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为,然后进行额外操作。

新建 test4.js 文件,代码如下:

let exam = {

name: “Tom”,

age: 24,

};

let handler = {

get: function (target, key) {

console.log("getting " + key);

return Reflect.get(target, key);

},

set: function (target, key, value) {

ajax

1)ajax请求的原理/ 手写一个ajax请求?
2)readyState?
3)ajax异步与同步的区别?
4)ajax传递中文用什么方法?

[外链图片转存中…(img-MOtSwRcz-1714283320029)]

[外链图片转存中…(img-sZn8CeHZ-1714283320030)]

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值