ES6 如何改变JS内置行为的代理与反射

代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取、属性定义、函数构造等一系列操作。ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力。

一、代理与反射的基本概念

什么是代理和反射呢?

代理是用来替代另一个对象(target),JS 通过new Proxy()创建一个目标对象的代理,该代理与该目标对象表面上可以被当作同一个对象来对待。

当目标对象上的进行一些特定的底层操作时,代理允许你拦截这些操作并且覆写它,而这原本只是 JS 引擎的内部能力。

如果你对些代理&反射的概念比较困惑的话,可以直接看后面的应用示例,最后再重新看这些定义就会更清晰!

拦截行为使用了一个能够响应特定操作的函数( 被称为陷阱),每个代理陷阱对应一个反射(Reflect)方法。

ES6 的反射 API 以 Reflect 对象的形式出现,对象每个方法都与对应的陷阱函数同名,并且接收的参数也与之一致。以下是 Reflect 对象的一些方法:

代理陷阱 覆写的特性 方法
get 读取一个属性的值 Reflect.get()
set 写入一个属性 Reflect.set()
has in 运算符 Reflect.has()
deleteProperty delete 运算符 Reflect.deleteProperty()
getPrototypeOf Object.getPrototypeOf() Reflect.getPrototypeOf()
isExtensible Object.isExtensible() Reflect.isExtensible()
defineProperty Object.defineProperty() Reflect.defineProperty
apply 调用一个函数 Reflect.apply()
construct 使用 new 调用一个函数 Reflect.construct()

每个陷阱函数都可以重写 JS 对象的一个特定内置行为,允许你拦截并修改它。

综合来说,想要控制或改变JS的一些底层操作,可以先创建一个代理对象,在这个代理对象上挂载一些陷阱函数,陷阱函数里面有反射方法。通过接下来的应用示例可以更清晰的明白代理的过程。

二、开始一个简单的代理

当你使用 Proxy 构造器来创建一个代理时,需要传递两个参数:目标对象(target)以及一个处理器( handler),

先创建一个仅进行传递的代理如下:

// 目标对象
let target = {};
// 代理对象
let proxy = new Proxy(target, {});

proxy.name = "hello";
console.log(proxy.name); // "hello"
console.log(target.name); // "hello"

target.name = "world";
console.log(proxy.name); // "world"
console.log(target.name); // "world

上例中的 proxy 代理对象将所有操作直接传递给 target 目标对象,代理对象 proxy 自身并没有存储该属性,它只是简单将值传递给 target 对象,proxy.name 与 target.name 的属性值总是相等,因为它们都指向 target.name。

此时代理陷阱的处理器为空对象,当然处理器可以定义了一个或多个陷阱函数。

2.1 set 验证对象属性的存储

假设你想要创建一个对象,并要求其属性值只能是数值,这就意味着该对象的每个新增属性

都要被验证,并且在属性值不为数值类型时应当抛出错误。

这时需要使用 set 陷阱函数来拦截传入的 value,该陷阱函数能接受四个参数:

  • trapTarget :将接收属性的对象( 即代理的目标对象)
  • key :需要写入的属性的键( 字符串类型或符号类型)
  • value :将被写入属性的值;
  • receiver :操作发生的对象( 通常是代理对象)

set 陷阱对应的反射方法和默认特性是Reflect.set(),和陷阱函数一样接受这四个参数,并会基于操作是否成功而返回相应的结果:

let targetObj = {};
let proxyObj = new Proxy(targetObj, {
 set: set
});

/* 定义 set 陷阱函数 */
function set (trapTarget, key, value, receiver) {
 if (isNaN(value)) {
   throw new TypeError("Property " + key + " must be a number.");
 }
 return Reflect.set(trapTarget, key, value, receiver);
}

/* 测试 */
proxyObj.count = 123;
console.log(proxyObj.count); // 123
console.log(targetObj.count); // 123

proxyObj.anotherName = "proxy" // TypeError: Property anotherName must be a number.

示例中set 陷阱函数成功拦截传入的 value 值,你可以尝试一下,如果注释或不return Reflect.set()会发生什么?,答案是拦截陷阱就不会有反射响应。

需要注意的是,直接给 targetObj 目标对象赋值时是不会触发 set 代理陷阱的,需要通过给代理对象赋值才会触发 set 代理陷阱与反射。

2.2 get 验证对象属性的读取

JS 非常有趣的特性之一,是读取不存在的属性时并不会抛出错误,而会把undefined当作该属性的值。

对于大型的代码库,当属性名称存在书写错误时(不会抛错)会导致严重的问题。这时使用 get 代理陷阱验证对象结构(Object Shape),访问不存在的属性时就抛出错误,使对象结构验证变得简单。

get 陷阱函数会在读取属性时被调用,即使该属性在对象中并不存在,它能接受三个参数:

  • trapTarget :将会被读取属性的对象( 即代理的目标对象)
  • key :需要读取的属性的键( 字符串类型或符号类型)
  • receiver :操作发生的对象( 通常是代理对象)

Reflect.get()方法接受与之相同的参数,并返回默认属性的默认值。

let proxyObj = new Proxy(targetObj, {
 set: set,
 get: get
});

/* 定义 get 陷阱函数 */
function get(trapTarget, key, receiver) {
 if (!(key in receiver)) {
  throw new TypeError("Property " + key + " doesn't exist.");
 }
 return Reflect.get(trapTarget, key, receiver);
}

console.log(proxyObj.count); // 123
console.log(proxyObj.newcount) // TypeError: Property newcount doesn't exist.

这段代码允许添加新的属性,并且此后可以正常读取该属性的值,但当读取的属性并

不存在时,程序抛出了一个错误,而不是将其默认为undefined。

还可以使用 has 陷阱验证in运算符,使用 deleteProperty 陷阱函数避免属性被delete删除。
注:in运算符用于判断对象中是否存在某个属性,如果自有属性或原型属性匹配这个名称字符串或Symbol,那么in运算符返回 true。

targetObj = {
 name: 'targetObject'
};
console.log("name" in targetObj); // true
console.log("toString" in targetObj); // true

其中 name 是对象自身的属性,而 toString 则是原型属性( 从 Object 对象上继承而来),所以检测结果都为 true。

has 陷阱函数会在使用in运算符时被调用,并且会传入两个参数(同名反射Reflect.has()方法也一样):

  • trapTarget :需要读取属性的对象( 代理的目标对象)
  • key :需要检查的属性的键( 字符串类型或 Symbol符号类型)

deleteProperty 陷阱函数会在使用delete运算符去删除对象属性时下被调用,并且也会被传入两个参数(Reflect.deleteProperty() 方法也接受这两个参数):

  • trapTarget :需要删除属性的对象( 即代理的目标对象) ;
  • key :需要删除的属性的键( 字符串类型或符号类型) 。

一些思考:分析过 Vue 源码的都了解过,给一个 Vue 实例中挂载的 data,是通过Object.defineProperty代理 vm._data 中的对象属性,实现双向绑定...... 同理可以考虑使用 ES6 的 Proxy 的 get 和 set 陷阱实现这个代理。

三、对象属性陷阱

3.1 数据属性与访问器属性

ES5 最重要的特征之一就是引入了 Object.defineProperty() 方法定义属性的特性。属性的特性是为了实现javascript引擎用的,属于内部值,因此不能直接访问他们。

属性分为数据属性和访问器属性。使用Object.defineProperty()方法修改数据属性的特性值的示例如下:

let obj1 = {
 name: 'myobj',
}
/* 数据属性*/
Object.defineProperty(obj1,'name',{
 configurable: false, // default true
 writable: false,   // default true
 enumerable: true,  // default true
 value: 'jenny'    // default undefined
})
console.log(obj1.name) // 'jenny'

其中[[Configurable]] 表示能否通过 delete 删除属性从而重新定义为访问器属性;[[Enumerable]] 表示能否通过for-in循环返回属性;[[Writable]] 表示能否修改属性的值; [[Value]] 包含这个属性的数据值。

对于访问器属性,该属性不包含数据值,包含一对getter和setter函数,定义访问器属性必须使用Object.defineProperty()方法:

let obj2 = {
 age: 18
}
/* 访问器属性 */
Object.defineProperty(obj2,'_age',{
 configurable: false, // default true
 enumerable: false,  // default true
 get () {       // default undefined
  return this.age
 },
 set (num) {     // default undefined
  this.age = num
 }
})
/* 修改访问器属性调用 getter */
obj2._age = 20
console.log(obj2.age) // 20

/* 输出访问器属性 */
console.log(Object.getOwnPropertyDescriptor(obj2,'_age'))
// { get: [Function: get],
//  set: [Function: set],
//  enumerable: false,
//  configurable: false }

[[Get]] 在读取属性时调用的函数, [[Set]] 再写入属性时调用的函数。使用访问器属性的常用方式,是设置一个属性的值导致其他属性发生变化。

3.2 检查属性的修改

代理允许你使用 defineProperty 同名函数陷阱函数拦截Object.defineProperty()的调用,defineProperty 陷阱函数接受下列三个参数:

  • trapTarget :需要被定义属性的对象( 即代理的目标对象);
  • key :属性的键( 字符串类型或符号类型);
  • descriptor :为该属性准备的描述符对象。

defineProperty 陷阱函数要求在操作后返回一个布尔值用于判断操作是否成功,如果返回了 false 则抛出错误,故可以使用该功能来限制哪些属性可以被Object.defineProperty() 方法定义。

例如,如果想阻止定义Symbol符号类型的属性,你可以检查传入的属性值,若是则返回 false:

/* 定义代理 */
let proxy = new Proxy({}, {
 defineProperty(trapTarget, key, descriptor) {
  if (typeof key === "symbol") {
   return false;
  }
  return Reflect.defineProperty(trapTarget, key, descriptor);
 }
});

Object.defineProperty(proxy, "name", {
 value: "proxy"
});
console.log(proxy.name); // "proxy"

let nameSymbol = Symbol("name");
// 抛出错误
Object.defineProperty(proxy, nameSymbol, {
 value: "proxy"
})

四、函数代理

4.1 构造函数 & 立即执行

函数的两个内部方法:[[Call]] 与[[Construct]]会在函数被调用时调用,通过代理函数来为这两个内部方法设置陷阱,从而控制函数的行为。

[[Construct]]会在函数被使用new运算符调用时执行,代理触发construct()陷阱函数,并和Reflect.construct()一样接收到下列两个参数:

  • trapTarget :被执行的函数( 即代理的目标对象) ;
  • argumentsList :被传递给函数的参数数组。

[[Call]]会在函数被直接调用时执行,代理触发apply()陷阱函数,它和Reflect.apply()都接收三个参数:

  • trapTarget :被执行的函数( 代理的目标函数) ;
  • thisArg :调用过程中函数内部的 this 值;
  • argumentsList :被传递给函数的参数数组。

每个函数都包含call()和apply()方法,用于重置函数运行的作用域即 this 指向,区别只是接收参数的方式不同:call()的参数需要逐个列举、apply()是参数数组。

显然,apply 与 construct 要求代理目标对象必须是一个函数,这两个代理陷阱在函数的执行方式上开启了很多的可能性,结合使用就可以完全控制任意的代理目标函数的行为。

4.2 验证函数的参数

看到apply()和construct()陷阱的参数都有被传递给函数的参数数组argumentsList,所以可以用来验证函数的参数。

例如需要保证所有参数都是某个特定类型的,并且不能通过 new 构造使用,示例如下:

/* 定义 sum 目标函数 */
function sum(...values) {
 return values.reduce((previous, current) => previous + current, 0);
}
/* 定义 apply 陷阱函数 */
function applyRef (trapTarget, thisArg, argumentList) {
 argumentList.forEach((arg) => {
  if (typeof arg !== "number") {
   throw new TypeError("All arguments must be numbers.");
  }
 });
 return Reflect.apply(trapTarget, thisArg, argumentList);
}
/* 定义 construct 陷阱函数 */
function constructRef () {
 throw new TypeError("This function can't be called with new.");
}
/* 定义 sumProxy 代理函数 */
let sumProxy = new Proxy(sum, {
 apply: applyRef,
 construct: constructRef
});

console.log(sumProxy(1, 2, 3, 4)); // 10

// console.log(sumProxy(1, "2", 3, 4)); // TypeError: All arguments must be numbers.
// let result = new sumProxy() // TypeError: This function can't be called with new.

sum() 函数会将所有传递进来的参数值相加,此代码通过将 sum() 函数封装在 sumProxy() 代理中,如果传入参数的值不是数值类型,该函数仍然会尝试加法操作,但在函数运行之前拦截了函数调用,触发apply陷阱函数以保证每个参数都是数值。

出于安全的考虑,这段代码使用 construct 陷阱抛出错误,以确保该函数不会被使用 new 运算符调用

实例对象 instance 对象会被同时判定为 proxy 与 target 对象的实例,是因为 instanceof 运算符使用了原型链来进行推断,而原型链查找并没有受到这个代理的影响,因此 proxy 对象与 target 对象对于 JS 引擎来说就有同一个原型。

4.3 调用类的构造函数

ES6 中新引入了class类的概念,类使用constructor构造函数封装数据,并规定必须始终使用 new 来调用,原因是类构造器的内部方法 [[Call]] 被明确要求抛出错误。

代理可以拦截对于 [[Call]] 方法的调用,你可以借助代理调用的类构造器。例如在缺少 new 的情况下创建一个新实例,就使用 apply 陷阱函数实现:

class Person {
 constructor(name) {
  this.name = name;
 }
}
let PersonProxy = new Proxy(Person, {
 apply: function(trapTarget, thisArg, argumentList) {
  return new trapTarget(...argumentList);
 }
});
let me = PersonProxy("Jenny");
console.log(me.name); // "Jenny"
console.log(me instanceof Person); // true
console.log(me instanceof PersonProxy); // true

类构造器即类的构造函数,使用代理时它的行为就像函数一样,apply陷阱函数重写了默认的构造行为。

关于类的更多有趣的用法,可参考 【ES6】更易于继承的类语法

总结来说,代理的用途非常广泛,因为它提供了修改 JS 内置对象的所有行为的入口。上述例子只是简单的一些应用入门,还有更多复杂的示例,推荐阅读《深入理解ES6》。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript对象反射用法实例

    本文实例讲述了JavaScript对象反射用法.分享给大家供大家参考.具体如下: 这里讲述JavaScript对象反射用法,涉及反射DOM对象和自定义对象 <html> <head> <title>JavaScript反射工具</title> <style type="text/css"> #show{ width:400px;height:300px; border:red solid 1px; overflow:scrol

  • JS的反射问题

    复制代码 代码如下: <html> <head><title>JS反射</title> <script type="text/javascript"> /* * 反射 */ function forwindow() { for (var i in window) { /*循环 if (window[i] === "wsenmin") { /* 三个等号,先比较类型 return i; /* 类型如果不同的话

  • JavaScript 反射和属性赋值实例解析

    这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java和.NET都有着比较完善的反射机制,用来处理未知的对象并获取它们的属性和方法.JavaScript虽然没有完善的反射体系,但在编程的时候还是可以通过代码设计来实现类似反射的基本功能. function Antzone(){ this.webName="蚂蚁部落"; this.age=6; } Antzone.proto

  • JS实现给json数组动态赋值的方法示例

    本文实例讲述了JS实现给json数组动态赋值的方法.分享给大家供大家参考,具体如下: json 数组也是数组: //1. var jsonstr="[{'name':'a','value':1},{'name':'b','value':2}]"; var jsonarray = eval('('+jsonstr+')'); var arr = { "name" : $('#names').val(), "value" : $('#values')

  • vue.js input框之间赋值方法

    如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va

  • AJAX JavaScript反射机制的介绍

    什么是反射机制 反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够在运行时知道自己有哪些方法和属性. 在JavaScript中利用for(-in-)语句实现反射 在JavaScript中有一个很方便的语法来实现反射,即for(-in-)语句,其语法如下: for(var p in obj){ //语句 } 这里var p表示声明的一个变量,用以存储对象obj的属性(方法)名称,有了对象名和属性(方法)名,就可以使用方括号语法来调用一个对象的属性(方法): 复制代码 代码如下: for

  • java反射实现javabean转json实例代码

    ObjectToJson.java 复制代码 代码如下: package com.ObjectToJson; import java.lang.reflect.Field;import java.lang.reflect.InvocationTargetException;import java.lang.reflect.Method;import java.util.ArrayList;import java.util.Iterator; public class ObjectToJson {

  • JavaScript反射与依赖注入实例详解

    本文实例讲述了JavaScript反射与依赖注入.分享给大家供大家参考,具体如下: 对于javascript中的反射的理解,一直都是认为,利用数组对回调函数进行保存,之后在适当的时刻利用call或是apply 方法,对回调进行调用即可,一般如下操作: 首先定义两个方法: var service = function() { return { name: 'Service' }; } var router = function() { return { name: 'Router' }; } 我们

  • ES6 如何改变JS内置行为的代理与反射

    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代理与反射的基本概念 什么是代理和反射呢? 代理是用来替代另一个对象(target),JS 通过new Proxy()创建一个目标对象的代理,该代理与该目标对象表面上可以被当作同一个对象来对待. 当目标对象上的进行一些特定的底层操作时,代理允许你拦截这些操作并且覆写它,而这原本只是 JS 引擎的内部能

  • js内置对象 学习笔记

    mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http://www.jb51.net/w3school/js/js_reference.htm) 作为一门编程语言,JavaScript提供了一些内置的对象和函数.内置对象提供编程的几种最常用的功能.JavaScript内置对象有以下几种. ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储

  • Angular.JS内置服务$http对数据库的增删改使用教程

    本文主要介绍的是Angular.JS内置服务$http对数据库的增删改操作的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.使用$http查询MySQL数据 angular.module('app',[]) .controller('MyCtrl',function ($scope,$http) { $http.get('http://127.0.0.1:80/user/getUsers') .success(function (resp) { console.log(resp);

  • js内置对象处理_打印学生成绩单的简单实现

    任务: 1.通过js的内置对象得到当前日期 var date=new Date(); var year=date.toString().slice(11,15); document.write(year.toString()+"年"); var month=date.getMonth(); month=month+1; if(month<10){ document.write("0"+month+"月"); }else{ document.

  • 浅谈js内置对象Math的属性和方法(推荐)

    属性: constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 E 欧拉常量,自然对数的底(约等于2.718) LN2 2的自然对数(约等于0.693) LN10 10的自然对数(约等于2.302) LOG2E 以2为底的e的对数.(约等于1.442) LOG10E 以10为底的e的对数(约等于0.434) PI ∏的值(约等于3.14159) SQRT1_2 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707) SQRT2 2的平方根(约等于1

  • vue.js内置组件之keep-alive组件使用

    keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view

  • JS内置对象和Math对象知识点详解

    Math对象 <script> // Math数学对象 不是一个构造函数 ,所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); // 一个属性 圆周率 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max(1, 99, 'pink老师')); // NaN console.log(Math.max(

  • JavaScript高级程序设计 阅读笔记(十二) js内置对象Math

    Math对象的属性 E:值e,自然对数的底 LN10:10的自然对数 LN2:2的自然对数 LOG2E:以2为底E的对数 LOG10E:以10为底E的对数 PI:值派 SQRT1_2:1/2 的平方根 SQRT2:2的平方根 Math对象的方法:最大值与最小值 min()&&max()用于取一组数中的最小值跟最大值. 示例: 复制代码 代码如下: var iMax=Math.Max(1,2,3); alert(iMax);//outputs 3 var iMin=Math.Min(1,2,

  • javascript学习笔记(八) js内置对象

    1.URI方法 encodeURI()和encodeURIComponent()对URI进行编码 encodeURI()不会对本身属于URI的特殊字符进行编码,如冒号,正斜杠,问好,井字等 encodeURIComponent()会对任何非标准字符进行编码 2.eval() 方法:解释参数中的代码字符串 复制代码 代码如下: var msg = "hello world"; eval("alert(msg)"); //"hello world"

  • 详解为Angular.js内置$http服务添加拦截器的方法

    前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应的处理工作,比如:在请求发起前,在

随机推荐