本文共 3328 字，大约阅读时间需要 11 分钟。

Proxy 代理

使用代理可以增强对象中的方法，做一些额外的处理

let user = {
       id: 1,    name: 'chy',    tel: '13812345678'}let userProxy = new Proxy(user, {
     //参数：目标对象（实参），增强    // 获取属性值。对get方法进行增强    get: function (target, key) {
     // 形参：目标对象，key        switch (key) {
               case 'tel':                return target[key].substring(0, 3) + '****' + target[key].substring(7);  //隐藏手机号中间部分            default:                return target[key];        }    },    // 设置属性值    set: function (target, key, value) {
               },    // 检测key是否存在    has: function(target, key) {
               },    // 删除key    deleteProperty: function(target, key) {
               },    // keys()    ownKeys(target) {
           // return Object.keys(target);    }    //...})//通过代理来进行操作userProxy.tel   //访问属性userProxy.name = "xxxx"  //设置属性if("name" in userProxy){
     //是否包含指定key}delete userProxy["name"]  //删除keyObject.keys(userProxy)  //keys()//...

Reflect 反射

通过反射可以直接访问对象的属性、方法。

let user = {
       name: "Nick",    age: 32}// 通过反射来访问对象的成员Reflect.get(user, "name")  //获取属性值Reflect.set(user,"name", "Jack")  //设置属性值Reflect.has(user, "name")  //key是否存在

使用反射的好处：对象可以作为参数传入，对象可以变化、不确定。

使用Proxy、Reflect实现双向绑定

// 获取dom元素let inputObj = document.getElementById('input')let showObj = document.getElementById('show')// 初始化代理对象let obj = {
   }// 代理选项let handler = {
       get: function(target, key) {
           return Reflect.get(target, key)    },    set: function(target, key, value) {
                       if(key === 'text') {
               inputObj.value = inputObj.value === value ? inputObj.value : value            showObj.innerHTML = value        }        return Reflect.set(target, key, value)    }}let objProxy = new Proxy(obj, handler)// 给input添加事件监听inputObj.addEventListener('keyup', function(e) {
       objProxy.text = e.target.value})

函数

// 参数设置默认值function f1(a,b=0){
     //设置默认值的参数要放在参数表的最后面    console.log(b);}f1(1);// 参数个数不定// ES5使用arguments实现不定个数的参数，但arguments只是伪数组，很多数组的方法都不能直接用，需要先把arguments转换为数组// ES6使用...实现不定个数的参数function f2(a,...rest){
      //...表示剩下的参数，把剩下的参数放在rest中，rest是数组    let sum=a;    // 使用for of遍历参数    for(let val of rest){
           sum+=val;    }    console.log(sum);}f2(1,2,3,4,5);// 箭头函数let f3=(x,y)=>{
       console.log(x+y);}f3(1,2);// 只有1个参数时可以省略()let f4=x=>{
       console.log(x);}f4("hello");// 如果函数体只有1个语句，且该语句是return语句，可以缺省{ }、关键字returnlet f5=(x,y)=> x+y   //回返回该语句的执行结果console.log(f5(10,20));

类

// 定义一个类class User{
       // 构造函数    constructor(name,age){
           this.name=name;          this.age=age;    }    info(){
           return `姓名：${
     this.name}，年龄：${
     this.age}`;  //必须加this    }    // 定义静态方法    static out(){
           return "this is static function";    }}// 创建对象let user=new User("chy",20);// 访问对象的成员、方法console.log(user.name);console.log(user.info());// 通过类名直接调用静态方法console.log(User.out());// 定义静态变量User.count=100;console.log(User.count);console.log(User.number);// 继承class Student extends User{
       constructor(name,age,score){
           super(name,age);  //先调用父类的构造函数进行初始化        this.score=score;    }    // 覆盖父类中同名的方法    info(){
             return `姓名：${
     this.name}，年龄：${
     this.age}，成绩：${
     this.score}`;     }}let student=new Student("chy",20,100);console.log(student.name);console.log(student.info());

ES6定义静态变量需要在类外定义，在ES7中定义静态变量可以在类中直接使用static关键字定义。

转载地址：http://ogqlb.baihongyu.com/