乐趣区

关于代理:每日一题面试官问谈谈你对ES6的proxy的理解

jiezi

关注「松宝写代码」，精选好文，每日一题

作者：saucxs | songEagle

一、前言

2020.12.23 日刚立的 flag，每日一题，题目类型不限度，能够是：算法题，面试题，论述题等等。

本文是「每日一题」第 8 题：[每日一题]面试官问：谈谈你对 ES6 的 proxy 的了解

往期「每日一题」：

  • 第 7 题 [[每日一题] 面试官问：for in 和 for of 的区别和原理？](https://mp.weixin.qq.com/s/Rs…
  • 第 6 题 [[每日一题] 面试官问：Async/Await 如何通过同步的形式实现异步？](https://mp.weixin.qq.com/s/UA…
  • 第 5 道「每日一题」到底该如何答复：vue 数据绑定的实现原理？
  • 第 4 道「每日一题」与面试官手撕代码：如何迷信高效的寻找反复元素？
  • 第 3 道「「每日一题」面试官问你对 Promise 的了解？可能是须要你能手动实现各个个性」
  • 第 2 道[「[每日一题]ES6 中为什么要应用 Symbol？」](https://mp.weixin.qq.com/s/om…
  • 第 1 道「一道面试题是如何引发深层次的灵魂拷问？」

二、什么是 Proxy？

Proxy，代理，是 ES6 新增的性能，能够了解为代理器（即由它代理某些操作）。

Proxy 对象用于定义或批改某些操作的自定义行为，能够在外界对指标对象进行拜访前，对外界的拜访进行改写。

1、Proxy 定义

var proxy = new Proxy(target, handler)

new Proxy()示意生成一个 Proxy 实例

  • target：指标对象
  • handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。

留神：要实现拦挡操作，必须是对 Proxy 实例进行操作，而不是针对指标对象 target 进行操作。

2、proxy 拦挡 get 和 set 操作

咱们先来看一下 proxy 拦挡 get 和 set 操作，示例代码如下：

let handler = {get: function(target, key, receiver) {console.log(`getter ${key}!`)
        return Reflect.get(target, key, receiver)
    },
    set: function(target, key, value, receiver) {console.log(`setter ${key}=${value}`)
        return Reflect.set(target, key, value, receiver)
    }
}
var obj = new Proxy({}, handler)
obj.a = 1          // setter a=1
obj.b = undefined  // setter b=undefined

console.log(obj.a, obj.b) 
// getter a!
// getter b!
// 1 undefined

console.log('c' in obj, obj.c)    
// getter c!
// false undefined

3、proxy 笼罩组件的原始行为

咱们来看一下，示例代码如下：

let handler = {get: function(target, key, receiver) {return 1},
      set: function (target, key, value, receiver) {console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
      }
}
var obj = new Proxy({}, handler)
obj.a = 5       // setting 5!
console.log(obj.a);    // 1

由下面代码看出：Proxy 不仅是拦挡了行为，更是用本人定义的行为笼罩了组件的原始行为。

若 handler = {}，则代表 Proxy 没有做任何拦挡，拜访 Proxy 实例就相当于拜访 target 指标对象。

三、Proxy handle 办法

  • 1、get(target, key, receiver)：拦挡 target 属性的读取
  • 2、set(target, key, value, receiver)：拦挡 target 属性的设置
  • 3、has(target, key)：拦挡 key in proxy 的操作，并返回是否存在（boolean 值）
  • 4、deleteProperty(target, key)：拦挡 delete proxy[key]的操作，并返回后果（boolean 值）
  • 5、ownKeys(target)：拦挡 Object.getOwnPropertyName(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for … in 循环。并返回指标对象所有本身属性的属性名数组。留神：Object.keys()的返回后果数组中只蕴含指标对象本身的可遍历属性
  • 6、getOwnPropertyDescriptor(target, key)：拦挡 Object.getOwnPropertyDescriptor(proxy, key)，返回属性的形容对象
  • 7、defineProperty(target, key, desc)：拦挡 Object.defineProperty(proxy, key, desc)、Object.defineProperties(proxy, descs)，返回一个 boolean 值
  • 8、preventExtensions(target)：拦挡 Object.preventExtensions(proxy)，返回一个 boolean 值
  • 9、getPrototypeOf(target)：拦挡 Object.getPrototypeOf(proxy)，返回一个对象
  • 10、isExtensible(target)：拦挡 Object.isExtensible(proxy)，返回一个 boolean 值
  • 11、setPrototypeOf(target, key)：拦挡 Object.setPrototypeOf(proxy, key)，返回一个 boolean 值。如果指标对象是函数，则还有两种额定操作能够被拦挡
  • 12、apply(target, object, args)：拦挡 Proxy 实例作为函数调用的操作，比方 proxy(…args)、proxy.call(object, …args)、proxy.apply(…)
  • 13、construct(target, args)：拦挡 Proxy 实例作为结构函数调用的操作，比方 new proxy(…args)

总共 13 个拦挡办法，上面进行简要举例说明，更多可见阮一峰老师的《ECMAScript 6 入门》（https://es6.ruanyifeng.com/#d…）

1、get 办法和 set 办法

get 办法用于拦挡某个属性的读取操作，能够承受三个参数，顺次为指标对象、属性名和 proxy 实例自身（严格地说，是操作行为所针对的对象），其中最初一个参数可选。

set 拦挡 target 属性的设置，能够承受四个参数，顺次为指标对象、属性名、value 和 proxy 实例自身（严格地说，是操作行为所针对的对象），其中最初一个参数可选。

let target = {foo: 1}
let proxy = new Proxy(target, {get(target, key, receiver) {console.log(`getter ${key}!`)
        return target[key]
    },
    set: function(target, key, value, receiver) {console.log(`setter ${key}!`)
        target[key] = value;
    }
})

let obj = Object.create(proxy)
console.log(obj.foo) 
// getter foo!
// 1

2、has 办法

拦挡 propKey in proxy 的操作，返回一个布尔值。

// 应用 has 办法暗藏某些属性，不被 in 运算符发现
var handler = {has (target, key) {if (key.startsWith('_')) {return false;}
        return key in target;
    }
};
var foo = {_name: 'saucxs', name: 'saucxs'};
var proxy = new Proxy(foo, handler);
console.log('_name' in proxy); // false
console.log('name' in proxy); // true

3、ownKeys 办法

拦挡本身属性的读取操作。并返回指标对象所有本身属性的属性名数组。具体返回后果可联合 MDN 属性的可枚举性和所有权

  • Object.getOwnPropertyName(proxy)
  • Object.getOwnPropertySymbols(proxy)
  • Object.keys(proxy)
  • for … in 循环
let target = {
  _foo: 'foo',
  _bar: 'bar',
  name: 'saucxs'
};

let handler = {ownKeys (target) {return Reflect.ownKeys(target).filter(key => key.startsWith('_'));
  }
};

let proxy = new Proxy(target, handler);
for (let key of Object.keys(proxy)) {console.log(target[key]);
}
// "saucxs"

4、apply 办法

apply 拦挡 Proxy 实例作为函数调用的操作，比方函数的调用（proxy(…args)）、call（proxy.call(object, …args)）、apply（proxy.apply(…)）等。

var target = function () { return 'I am the target';};
var handler = {apply: function () {return 'I am the saucxs proxy';}
};

var proxy = new Proxy(target, handler);

proxy();
// "I am the saucxs proxy"

更多可见阮一峰老师的《ECMAScript 6 入门》（https://es6.ruanyifeng.com/#d…）

谢谢反对

1、文章喜爱的话 能够「分享，点赞，在看」三连 哦。

2、作者昵称：saucxs，songEagle，松宝写代码。「松宝写代码」公众号作者，每日一题，实验室等。一个喜好折腾，致力于全栈，正在致力成长的字节跳动工程师，星辰大海，将来可期。内推字节跳动各个部门各个岗位。

3、长按上面图片，关注「松宝写代码」，是获取开发常识体系构建，精选文章，我的项目实战，实验室，每日一道面试题，进阶学习，思考职业倒退，波及到 JavaScript，Node，Vue，React，浏览器，http 等畛域，心愿能够帮忙到你，咱们一起成长～

字节内推福利

  • 回复「校招」获取内推码
  • 回复「社招」获取内推
  • 回复「实习生」获取内推

后续会有更多福利

学习材料福利

回复「算法」获取算法学习材料

往期「每日一题」

1、JavaScript && ES6

  • 第 19 题：【每日一题】面试官问：谈谈 JS 中的 XMLHttpRequest 对象的了解？
  • 第 18 题：【每日一题】面试官问：JS 中的 Ajax 跨域与扩大 Comet？
  • 第 17 题：【每日一题】(17 题)面试官问：JS 中事件流，事件处理程序，事件对象的了解？
  • 第 16 题：【每日一题】面试官问：JS 中如何全面进行客户端检测？
  • 第 15 题：【每日一题】面试官问：JS 类型判断有哪几种办法？
  • 第 14 题：【每日一题】面试官问：谈谈你对 JS 对象的创立和引申
  • 第 13 题 [[每日一题] 面试官问：[‘1’, ‘2’, ‘3’].map(parseInt)输入，起因，以及延长？](https://mp.weixin.qq.com/s/DJ…
  • 第 12 题 [[每日一题] 面试官问：JS 引擎的执行过程（二）](https://mp.weixin.qq.com/s/CC…
  • 第 11 题 [[每日一题] 面试官问：JS 引擎的执行过程（一）](https://mp.weixin.qq.com/s/Lh…
  • 第 10 题 [[每日一题] 面试官问：具体说一下 JS 数据类型](https://mp.weixin.qq.com/s/wm…
  • 第 8 题 [[每日一题] 面试官问：谈谈你对 ES6 的 proxy 的了解？](https://mp.weixin.qq.com/s/8l…
  • 第 7 题 [[每日一题] 面试官问：for in 和 for of 的区别和原理？](https://mp.weixin.qq.com/s/Rs…
  • 第 6 题 [[每日一题] 面试官问：Async/Await 如何通过同步的形式实现异步？](https://mp.weixin.qq.com/s/UA…
  • 第 3 道「「每日一题」面试官问你对 Promise 的了解？可能是须要你能手动实现各个个性」
  • 第 2 道[「[每日一题]ES6 中为什么要应用 Symbol？」](https://mp.weixin.qq.com/s/om…

2、浏览器

  • 第 9 题[[每日一题]requestAnimationFrame 不香吗？](https://mp.weixin.qq.com/s/4O…

3、Vue

  • 第 5 道「每日一题」到底该如何答复：vue 数据绑定的实现原理？

4、算法

  • 第 4 道「每日一题」与面试官手撕代码：如何迷信高效的寻找反复元素？

5、Http

  • 第 1 道「一道面试题是如何引发深层次的灵魂拷问？」
退出移动版