ES6 用Proxy代理修改JavaScript语言

Java后时代

于 2024-03-16 20:54:56 发布

阅读量672

点赞数 13

分类专栏：前端程序员文章标签： javascript es6 原型模式

本文链接：https://blog.csdn.net/m0_61068088/article/details/136769659

版权

前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

return 0;

}

});

// 1. 需要代理的对象{}

// 2. 定制对象get

目标对象内部的this关键字会指向 Proxy 代理

Proxy.revocable方法返回一个可取消的 Proxy 实例：

let target = {};

let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;

proxy.foo // 123

revoke();

proxy.foo // TypeError: Revoked

支持Proxy代理的方法

get(target, propKey[, receiver])：拦截对象属性的读取
target：目标对象
propKey：属性名
receiver：proxy实例本身
set(target, propKey, value[, receiver])：拦截对象属性的设置，返回一个布尔值
target：目标对象
propKey：属性名
value：属性值
receiver：proxy实例本身
has(target, propKey)：拦截HasProperty操作（in），返回一个布尔值
target：目标对象
propKey：属性名
deleteProperty(target, propKey)：拦截delete操作，返回一个布尔值
target：目标对象
propKey：属性名
ownKeys(target)：用来拦截对象自身属性的读取操作，返回一个数组。
Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
for…in循环
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor()，返回属性的描述对象
defineProperty(target, propKey, propDesc)：拦截了Object.defineProperty操作，返回一个布尔值
target：目标对象
propKey：属性名
propDesc：设置属性
preventExtensions(target)：拦截Object.preventExtensions()，返回一个布尔值，否则会被自动转为布尔值
getPrototypeOf(target)：主要用来拦截获取对象原型，返回一个对象
Object.prototype.proto
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof
isExtensible(target)：拦截Object.isExtensible()，返回一个布尔值
target：目标对象
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf()，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截
apply(target, object, args)：拦截函数的调用、call和apply操作
target：目标对象
object：目标对象的上下文对象(this)
args：目标对象的参数数组
construct(target, args, newTarget)：拦截new命令
target：目标对象
args：构造函数的参数对象
newTarget：创造实例对象时，new命令作用的构造函数

方法详解

组件化开发

传统js添加HTML代码：

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。