JavaScript ES6 代理，反射，函数，类

客官°小女子只卖身不卖艺 2023-02-09 14:17 18阅读 0赞

### 目录 ###

*   *   *  Proxy 代理
         *  Reflect 反射
         *  使用Proxy、Reflect实现双向绑定
         *  函数
         *  类

### Proxy 代理 ###

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

### 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语句，可以缺省{ }、关键字return
    let f5=(x,y)=> x+y   //回返回该语句的执行结果
    
    console.log(f5(10,20));

使用箭头函数时要注意：箭头函数中的 return 只是终止箭头函数本身的执行，不会终止外部函数的执行。

### 类 ###

// 定义一个类
    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关键字定义。