js代理

作者: Viewwei | 来源:发表于2020-11-06 21:39 被阅读0次

代理定义:ES6新增了代理和反射威开发者提供拦截并向操作嵌入额外行为
1 空代理:所谓的空代理,就是作为一个抽象的目标对象,其他的什么都不做

const target = {
  "id":"target"
}
const handle ={}
const proxy = new Proxy(target,handle)
target.id ="foo"
console.log(target.id) //foo
console.log(proxy.id) //foo

上述例子就是一个空代理
2 捕获器
使用代理的主要目的是捕获器.每个处理程序对象可以包含零个或者多个捕获器,每个捕获器代表一种操作.下面例子为get捕获器

const target = {
  foo: 'bar'
}
const handle ={
  get(){
  return "handle overide"
}
const proxy = new Proxy(target,handle)
}

当通过执行get()操作的时候,就会触发get()捕获器,其中 proxy[property] proxy.property Object.create(property)[property]都会触发get()捕获器
3 捕获器参数和反射
不同的捕获器的参数各部相同,比如get捕获器,则接收三个参数,第一个参数为原目标,第二个参数为属性,第三个参数为代理对象

get(targget,property,receiver){
}

可以通过全局的Reflect捕获器对象进行重建.几乎所有的捕获器都有相对应的Reflect.比如 Reflect.get Reflect.set....
如果想创建一个可以捕获所有方法,可以如下写法

const target ={
  foo:"bar"
}
const proxy = new Proxy(target,Relfect)

4 捕获器的不变样式
捕获器几乎可以改变所有的基本方法,但也不是没有限制.必须遵循捕获不变样式.比如,如果一个对象的属性设置writeable为false,如果通过代理设置值,那么就是报错
5撤销代理
能够设置代理,也能够取消代理,取消代理方法是revocable

const target ={
  foo:'bar'
}
const handle ={
  get(){
return "intercepted"
}

let { proxy,revoke} = Proxy.revocable(target,handle)
console.log(target.foo) //bar
console.l0g(proxy.foo) //intercepted
revoke()
console.l0g(proxy.foo) //报错 
}

3 代理不足
代理与内置引用类型的实例很好引用,但是不能代理没有内部槽道的类型,比如 Date函数对象
4 捕获器API
4.1 get()
4.2 set()
4.3 has()
4.4 defineProperty()
4.5 getOwnProperDescriptor()
4.6 deleteProperty()
4.7 ownKeys() Object.keys()方法受用
...

相关文章

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • Vue 2.0配置代理

    1.配置代理的文件位置 config.js/index.js 2.如何配置代理 proxyTable: { ...

  • UIWebView属性及方法

    UIWebView代理 UIWebView代理方方法 web请求数据及加载数据 web执行JS代码(OC调用JS的...

  • 获取WKWebView高度

    目录 通过代理执行JS方法获取 通过KVO获取 方法一:通过代理执行JS方法获取 方法二:通过KVO获取

  • JS和原生的交互

    原生与js交互有两种方法:代理、JsContent 一、UIWebviewDelegate 代理交互 代理交互原理...

  • js代理

    代理定义:ES6新增了代理和反射威开发者提供拦截并向操作嵌入额外行为1 空代理:所谓的空代理,就是作为一个抽象的目...

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • OC和JS的交互那点事

    1、OC调用JS代码 在代理方法webViewDidFinishLoad:方法中调用JS代码 2、JS调用OC代码...

  • Node.js | 更tech地解决Excel表的邮件地址

    Dependencies Node.js Nodemailer 基于Node的邮件代理库,要求Node.js ...

  • vue 项目前端数据模拟服务

    项目结构: Demo.js 内容: proxy.config.js 内容: package.json 增加代理: ...

网友评论

      本文标题:js代理

      本文链接:https://www.haomeiwen.com/subject/nkyivktx.html