这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

0 前面的话

今天开始系统复习ES6啦，我参考了以下资料。
课程：
juejin.cn/course/byte…
资料：
www.runoob.com/react/react…

1 正文

ES6 Proxy

一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。

let target = { 
    name: 'Tom', 
    age: 24 
} 
let handler = { 
    get: function(target, key) { 
        console.log('getting '+key); 
        return target[key]; // 不是target.key 
    }, 
    set: function(target, key, value) { 
        console.log('setting '+key); 
        target[key] = value; 
    } 
} 
let proxy = new Proxy(target, handler) 
proxy.name // 实际执行 handler.get 
proxy.age = 25 // 实际执行 handler.set 

// getting name 
// setting age 
// 25 

// target 可以为空对象 
let targetEpt = {} 
let proxyEpt = new Proxy(targetEpt, handler) 
// 调用 get 方法，此时目标对象为空，没有 name 属性 
proxyEpt.name // getting name // 调用 set 方法，向目标对象中添加了 name 属性 proxyEpt.name = 'Tom' 
// setting name 
// "Tom" 
// 再次调用 get ，此时已经存在 name 属性 
proxyEpt.name 
// getting name 
// "Tom" 

// 通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相 
// 影响 
targetEpt 
// {name: "Tom"} 

// handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象 
let targetEmpty = {} 
let proxyEmpty = new Proxy(targetEmpty,{}) 
proxyEmpty.name = "Tom" 
targetEmpty // {name: "Tom"}

get()

用于 target 对象上 propKey 的读取操作。

// get(target, propKey, receiver)

let exam ={ 
    name: "Tom", 
    age: 24 
} 
let proxy = new Proxy(exam, { 
    get(target, propKey, receiver) { 
        console.log('Getting ' + propKey); 
        return target[propKey]; 
    } 
}) 
proxy.name 
// Getting name 
// "Tom"

set()

用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。

// set(target, propKey, value, receiver)

let validator = { 
    set: function(obj, prop, value) { 
        if (prop === 'age') { 
            if (!Number.isInteger(value)) { 
                throw new TypeError('The age is not an integer'); 
            } 
            if (value > 200) { 
                throw new RangeError('The age seems invalid'); 
            } 
        } 
        // 对于满足条件的 age 属性以及其他属性，直接保存 
        obj[prop] = value; 
    } 
}; 
let proxy= new Proxy({}, validator) 
proxy.age = 100; 
proxy.age // 100 
proxy.age = 'oppps' // 报错 
proxy.age = 300 // 报错

apply(target, ctx, args)

用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。

function sub(a, b){ 
    return a - b; 
} 
let handler = { 
    apply: function(target, ctx, args){ 
        console.log('handle apply'); 
        return Reflect.apply(...arguments); 
    } 
} 
let proxy = new Proxy(sub, handler) 
proxy(2, 1) 
// handle apply
// 1

has(target, propKey)

用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。

let handler = { 
    has: function(target, propKey){ 
        console.log("handle has"); 
        return propKey in target; 
    } 
} 
let exam = {name: "Tom"} 
let proxy = new Proxy(exam, handler) 
'name' in proxy 
// handle has 
// true

注意：此方法不拦截 for ... in 循环。

construct(target, args)

用于拦截 new 命令。返回值必须为对象。

let handler = { 
    construct: function (target, args, newTarget) { 
        console.log('handle construct') 
        return Reflect.construct(target, args, newTarget) 
    } 
} 
class Exam { 
    constructor (name) { 
        this.name = name 
    } 
} 
let ExamProxy = new Proxy(Exam, handler) 
let proxyObj = new ExamProxy('Tom') 
console.log(proxyObj) 
// handle construct 
// exam {name: "Tom"}

deleteProperty(target, propKey)

用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

普通字符串

let string = Hello'\n'world; console.log(string); // "Hello' // 'world"

字符串插入变量和表达式。

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Mike"; 
let age = 27; 
let info = `My Name is ${name},I am ${age+1} years old next year.` console.log(info); 
// My Name is Mike,I am 28 years old next year.

对象的拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person = {name: "Amy", age: 15}; 
let someone = { ...person }; 
someone; //{name: "Amy", age: 15}

可用于合并两个对象

let age = {age: 15}; 
let name = {name: "Amy"}; 
let person = {...age, ...name}; 
person; //{age: 15, name: "Amy"}

自定义的属性和拓展运算符对象里面属性的相同的时候：自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉。

let person = {name: "Amy", age: 15}; 
let someone = { ...person, name: "Mike", age: 17}; 
someone; //{name: "Mike", age: 17}

Object.assign(target, source_1, ···)

用于将源对象的所有可枚举属性复制到目标对象中。

let target = {a: 1}; 
let object2 = {b: 2}; 
let object3 = {c: 3}; 
Object.assign(target,object2,object3); 
// 第一个参数是目标对象，后面的参数是源对象 target; 
// {a: 1, b: 2, c: 3

• 如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。
• 如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回。