IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 关于阅读 ES6- Proxy 整理的问题 -> 正文阅读

[JavaScript知识库]关于阅读 ES6- Proxy 整理的问题

1、Proxy是什么?

答:用来修改默写默认操作的行为,在语言层面上修改,是属于一种‘元编程’,即对编程语言进行编程。
Proxy可以理解成在目标对象前架设了一个‘拦截层’。外界想要访问这个对象,需要经过这层拦截,
因此proxy也被称为‘拦截器’。例如,在获取或添加某个对象的属性前进行拦截

var obj = new Proxy({b: 2}, {
 get: function(target, key,  receiver){ // target是目标对象,key是对象属性 ,receiver是Proxy实例本身
   console.log('您正在访问对象的属性')
   return Reflect.get(target, key, receiver)
 },
 set: function(target, key, value, receiver){
   console.log('您正在为对象增加属性并赋值');
   return Reflect.set(target, key, value, receiver)
 }
})
obj.a = 111 // 您正在为对象增加属性并赋值
obj.a // 您正在访问对象的属性 111

2、Proxy构造函数

答:ES6原生提供了Proxy构造函数,可以通过new关键字生成Proxy实例:new Proxy(target, handler);
target是所要拦截的目标对象 handler是拦截函数(行为);
如果handler没有设置任何的拦截,那么等同于直接通向原来的对象。

let target = {}, handler = {}
var p = new Proxy(target,  handler)
p.a = 1;
target.a // 1 没有做任何的拦截操作,那么访问proxy就等同于访问 target

3、怎么实现对对象默认操作的拦截

答:有两种方式。一种是直接将Proxy对象实例设置到其他对象proxy属性上,这样可以在对象上进行调用
二是将Proxy实例作为其他对象的原型对象。

var obj = { //设置到对象proxy属性上
  proxy: new Proxy(target, handler)
}
// 将Proxy实例作为其他对象的原型对象,这样其他对象虽然没有设置拦截,但是根据原型链的继承,可以被有效拦截
var proxy = new Proxy({}, {
  get: function(target, key, receiver){
    return 111
  }
})
var obj = Object.create(proxy)
obj.aa // 111

4、Proxy实例上的拦截函数handler有多少种拦截行为呢

答:13种。
get(target, prop, receiver)-----------------拦截对象属性的读取
set(target, prop, value, receiver)---------拦截对象属性的获取,返回布尔值
has(target, prop)---------拦截 key in obj 操作,返回布尔值
deleteProperty(target, prop)---------------拦截 delete obj[key] 操作,返回布尔值
ownKeys(target)–拦截 Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbols(obj)、Object.keys()、for…in,返回一个数组
getOwnPropertyDescriptor(target, prop)-----拦截Object.getOwnPropertyDescriptor(obj, prop),返回描述对象
defineProperty(target, prop, propDecription) --拦截 Object.defineProperty(obj, prop, propDecription)、Object.defineProperties(obj, propDecription),返回一个布尔值。
getPrototypeOf(obj)—拦截 Object.getPrototypeOf(obj),返回一个对象
setPrototypeOf(target, prototype)—拦截Object.setPrototypeOf(obj, prototype),返回一个布尔值
apply(target, object, args)—拦截Proxy实例作为函数调用的操作。比如 proxy()、proxy.call(obj, …args)、proxy.apply(obj, null, arrArgs)
preventExtensions(target)—拦截Object.preventExtensions(obj),返回一个布尔值
isExtensible(target)–拦截Object.isExtensible(obj),返回一个布尔值
construct(target, args) —拦截Proxy实例作为构造函数调用的操作,比如 new proxy(…args)

5、Proxy实例的get(target, prop,receiver)方法

答:get()用来拦截对象的属性读取操作。
如果一个属性是不可配置(configurable)或不可写(writable)那么这个属性就不能被代理,Proxy对象访问该属性也会报错。
get()方法可以接受3个参数,依次为目标对象、属性名和 Proxy 实例本身,其中最后一个参数可选。

var person = { name: "张三"};
var proxy = new Proxy(person, {
  get: function(target, propKey) {
    if (propKey in target) {
      return target[propKey];
    } else {
      throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
    }
  }
});
proxy.name // "张三"
proxy.age // 抛出一个错误
// 也可以使用继承的方式来拦截对象的属性获取操作
let proto = new Proxy({}, {
  get(target, propertyKey, receiver) {
    console.log('GET ' + propertyKey);
    return target[propertyKey];
  }
});
let obj = Object.create(proto);
obj.foo // "GET foo"

6、Proxy实例的set(target, prop, value, receiver)方法

答:用来拦截对象的属性赋值操作
如果一个属性是不可配置(configurable)或不可写(writable)那么这个属性就不能被代理,Proxy对象访问该属性也会报错。
get()方法可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。
严格模式下,set代理返回false或者undefined,都会报错。

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop // Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c' // Error: Invalid attempt to set private "_prop" property
// 下面是set方法第四个参数的例子:
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy // true
// 严格模式下,set代理返回false或者undefined,都会报错,例如:
'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return false;// 无论有没有下面这一行,都会报错
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar'; // TypeError: 'set' on proxy: trap returned falsish for property 'foo'

7、Proxy实例的apply(target, ctx, arguments)方法

答:apply方法是用来拦截函数的调用、call和apply操作。
apply方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

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"

8、Proxy实例的has(target, prop) 方法

答:该方法用来拦截hasProperty操作,判断对象是否存在某个属性,最典型的操作就是对象的in操作。
如果一个属性是不可配置(configurable)或禁止扩展,那么使用has方法就会报错;
这个拦截操作对 for…in 不起作用。

var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

9、Proxy实例的construct(target, arguments, newTarget)方法

答:该方法用来拦截 new命令,可以接受三个参数,分别是目标对象、构造函数的参数数组、创造实例对象时,new命令作用的构造函数
该方法必须返回一个对象,否则会报错
construct()拦截的是构造函数,所以它的目标对象必须是函数,否则就会报错。
construct()方法中的this指向的是handler,而不是实例对象。

const handler = {
  construct: function(target, args) {
    console.log(this === handler);
    return new target(...args);
  }
}
let p = new Proxy(function () {}, handler);
new p() // true

10、Proxy实例的deleteProperty(target, prop)方法

答:deleteProperty方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除。
如果目标对象自身的不可配置(configurable)的属性,不能被deleteProperty方法删除,否则报错。

var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    delete target[key];
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop // Error: Invalid attempt to delete private "_prop" property

11、Proxy实例的defineProperty(target, prop, propDescription)方法

答: defineProperty()方法拦截了Object.defineProperty()操作。
如果目标对象不可扩展(non-extensible),则defineProperty()不能增加目标对象上不存在的属性,否则会报错。
另外,如果目标对象的属性不可写(writable)或不可配置(configurable),则defineProperty()方法不得改变这两个设置。
如果该方法只返回false,会导致添加新属性总是无效。但这里的false只是用来提示操作失败,本身并不能阻止添加新属性。

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不会生效

12、Proxy实例的getOwnPropertyDescriptor(target, prop)方法

答:该方法用来拦截Object.getOwnPropertyDescriptor(),返回一个属性描述对象或者undefined。

var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat') // undefined
Object.getOwnPropertyDescriptor(proxy, '_foo') // undefined
Object.getOwnPropertyDescriptor(proxy, 'baz') // { value: 'tar', writable: true, enumerable: true, configurable: true }

13、Proxy实例的getPrototypeOf(target)方法

答:该方法主要用来拦截获取对象原型,涉及的操作有:
Object.prototype.proto 、Object.prototype.isPrototypeOf()
Object.getPrototypeOf() 、Reflect.getPrototypeOf() 、instanceof
getPrototypeOf()方法的返回值必须是对象或者null,否则报错。
如果目标对象不可扩展(non-extensible), getPrototypeOf()方法必须返回目标对象的原型对象。

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

14、Proxy实例的isExtensible(target)方法

答:isExtensible()方法拦截Object.isExtensible()操作。
该方法只能返回布尔值,否则返回值会被自动转为布尔值。
这个方法有一个强限制,它的返回值必须与目标对象的isExtensible属性保持一致,否则就会抛出错误。

var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});
Object.isExtensible(p) // 报错:Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

15、Proxy实例的ownKeys(target)方法

答:ownKeys()方法用来拦截对象自身属性的读取操作。
拦截的操作有Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()、for…in循环;
如果目标对象自身包含不可配置的属性,则该属性必须被ownKeys()方法返回,否则报错。
如果目标对象是不可扩展的(non-extensible),这时ownKeys()方法返回的数组之中,必须包含原对象的所有属性,且不能包含多余的属性,否则报错。
使用Object.keys()方法时,ownKeys()会过滤目标对象上不存在的属性、Symbol类型的属性、不可遍历的属性(key)都会被自动过滤掉,不会返回。
ownKeys()方法返回的数组成员,只能是字符串或 Symbol 值。如果有其他类型的值,或者返回的根本不是数组,就会报错。

var obj = {};
var p = new Proxy(obj, {
  ownKeys: function(target) {
    return [123, true, undefined, null, {}, []];
  }
});
Object.getOwnPropertyNames(p) // 报错 :Uncaught TypeError: 123 is not a valid property name

16、Proxy实例的preventExtensions(target)方法

答:该方法用来拦截 Object.preventExtensions()。
该方法返回一个布尔值,如果不是布尔值,会进行转换成布尔值。
当目标对象不可扩展时(即Object.isExtensible(proxy)为false),该方法才能返回true,不然会报错。

var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target); // 必须加上该代码,目的是为了防止Object.isExtensible()为true
    return true;
  }
});
Object.preventExtensions(proxy) // "called"           Proxy {}

17、Proxy实例的setPrototype(target, proto)方法

答:该方法用来拦截 Object.setPrototypeOf()方法。
该方法只能返回布尔值,如果不是布尔会被自动转为布尔值。
如果目标对象不可扩展,那么这个方法不得改变目标对象的原型。

var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto); // Error: Changing the prototype is forbidden

18、Proxy.revocable(target,handler)方法

答:该方法返回一个可取消的Proxy实例。
运用场景是:当需求是只能通过代理进行访问,目标对象不可以进行直接访问,
访问结束就收回代理权且不允许再次访问,可以使用该方法。

let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke(); // 函数revoke可以取消 Proxy实例
proxy.foo // 报错 TypeError: Revoked

19、利用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

20、目标对象的构造函数中的this会指向目标对象的Proxy代理吗?

答:不会

const _name = new WeakMap();
class Person {
  constructor(name) {
    _name.set(this, name);
  }
  get name() {
    return _name.get(this);
  }
}
const jane = new Person('Jane');
jane.name // 'Jane'
const proxy = new Proxy(jane, {});
proxy.name // undefined  

21、Proxy 拦截函数内部的this指向哪里

答:指向handler对象

const handler = {
  get: function (target, key, receiver) {
    console.log(this === handler);
    return 'Hello, ' + key;
  },
  set: function (target, key, value) {
    console.log(this === handler);
    target[key] = value;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo // true            Hello, foo
proxy.foo = 1 // true

22、所有原生对象中的内部属性能被Proxy代理吗

答:不能,例如:

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate(); //报错:因为 getDate()方法只能在Date对象实例上面拿到,如果this不是Date对象实例就会报错。
// this绑定原始对象,就可以解决上面的问题。
const target = new Date('2015-01-01');
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() // 1

23、Proxy代理的应用有哪些

答:可用于编写Web服务器的客户端
可用于实现数据库的ORM层

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-06 10:58:49  更:2022-05-06 10:59:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:57:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码