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

 

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"]  //删除key

Object.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实现双向绑定

<input type="text" name="" id="input" />
<p id="show"></p>  

// 获取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关键字定义。