网站首页 > 技术文章 正文
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
- 上一篇: 前端JS小技巧
- 下一篇: 「 JavaScript 」 改变 this 的指向以及方法
猜你喜欢
- 2024-11-21 浅析GIF 格式图片的存储与解析
- 2024-11-21 如何用2 KB代码实现3D赛车游戏?2kPlus Jam大赛了解一下
- 2024-11-21 快速了解ES6的代理与反射
- 2024-11-21 「实战」蘑菇街 PC 端首页,瀑布流布局的实现原理与细节技巧
- 2024-11-21 Knative 驾驭篇:带你 '纵横驰骋' Knative 自动扩缩容实现
- 2024-11-21 ECMAScript 6使用教程总结
- 2024-11-21 一道二进制子串算法,让面试官都解不出来?
- 2024-11-21 高级前端进阶,为什么要使用call、apply、bind?
- 2024-11-21 碎片时间学编程「202]:分组数组元素
- 2024-11-21 从入门到入土:Lambda完整学习指南,包教包会(上)
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-