ECMAScript6学习笔记

Hi, 大家好，这是我的js学习笔记。本篇从proxy开始，结合阮老师的入门文档进行学习。大家有仍任何推荐的学习博客或者是文档，可以分享给我呀。谢谢~

分割线来了

---

首先向大家推荐一个VScode学习js利器。插件Quokka。

打开方式：下载后 Ctrl+Shift+P 选择Quokka新增文件，再选择对应语言即可。

如图所示：我用红色框起来的便是这个插件显示的部分，只需要console.log，或者写出对应的变量名，就可以在vscode上查看对应的结果了，不用跑到控制台去看。（尊的方便

 下面就正式进入学习的板块了，分割线。

---

Proxy

Proxy可以理解为在目标对象前架设一层“拦截”。我的理解是，家跟外界有个门的拦截，只有有钥匙的人，或者是主人允许的客人才可以入内。Proxy这个词的原意是代理，用在这里是表示由它来“代理”某些操作，可以译为“代理器”。

使用方法：

var proxy = new Proxy(target, handler);

从上可知，有以下两个参数：

Target	代理对象
handler	一个对象，声明了代理target的一些操作

proxy是代理后的对象。

Handler

是声明了一些操作，这些操作是针对代理对象target的。整理了一些handle能代理的方法：

1. get方法：代理对象属性的读取

三个参数

get(target, key, receiver) {
return 123;
}

// target:源对象  key:获取的对象的属性名称 receiver：proxy对象实例本身;

2. set方法：修改

四个参数

set(target, key, value, receiver){
return true;
}

3.construct：构造函数

4. has代理对象：判断对象是否有该属性 has代理对象in操作符

两个参数

has(target, key){
return 123
}

以下举个例：

Proxy.revocable()

随即而来的是revoke函数：执行会销毁proxy属性的代理行为

Proxy.revocable()方法返回一个对象

This问题

在Proxy代理的情况下，目标对象内部的this会指向Proxy代理

const target = {
   func: function(){
    console.log(this === p);
   }
};
const p = new Proxy(target, {});

当p代理的target之后，target函数内部的this就是指向proxy，而不是target。

这会产生什么问题呢？ 

有些原生对象的内部属性，要通过正确的this才可以拿到，当proxy拿到代理后也无法代理这些原生对象的属性。需要使用This绑定原始对象。

target.(方法名).bind(target)

web服务的实例

因为proxy对象可以拦截目标对象的任意属性，所以适合来写web服务的客户端。

---

Reflect

• 从reflect对象上可以拿到语言内部的方法
• 让Object操作都变成函数行为

• Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。也就是说，不管Proxy怎么修改行为，你总可以在Reflect上获取默认行为。

Reflect静态方法

Reflect.get(target, name, receiver) // 查找，如有则返回name属性，没有则返回undefined

• 如果name属性有读取函数（getter），则读取this绑定的receiver

•  第一个参数必须是对象，否则会报错

Reflect.set(target, name, value, receiver) //taget对象的name属性值为value

const myObejct ={
  foo:2,
  set bar (value){
   return this.foo = value;
}
}
Reflect.set(myObejct, 'foo', 10);
myObject.foo // 10
Reflect.set(myObject, 'bar', 100);
myObject.foo //100

​​​​​​​

---

 

 

。。。待更