• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

[每日一题]面试官问:谈谈你对ES6的proxy的理解?

互联网 diligentman 5个月前 (01-10) 44次浏览

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

作者:saucxs | songEagle

一、前言

2020.12.23 日刚立的 flag,每日一题,题目类型不限制,可以是:算法题,面试题,阐述题等等。

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

[每日一题]面试官问:谈谈你对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等领域,希望可以帮助到你,我们一起成长~

[每日一题]面试官问:谈谈你对ES6的proxy的理解?

字节内推福利

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

后续会有更多福利

学习资料福利

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

往期「每日一题」

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、浏览器

3、Vue

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

4、算法

  • 第 4 道「每日一题」与面试官手撕代码:如何科学高效的寻找重复元素?

5、Http

  • 第 1 道「一道面试题是如何引发深层次的灵魂拷问?」

程序员灯塔
转载请注明原文链接:[每日一题]面试官问:谈谈你对ES6的proxy的理解?
喜欢 (0)