ES6(八）

14. Proxy代理

① 声明Proxy

我们用new的方法对Proxy进行声明。声明Proxy的基本形式。

new Proxy（{},{}）;

第一个花括号就相当于方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am qq'

};
console.log(obj.add(100));
console.log(obj.name);

现在把上边的obj对象改成我们的Proxy形式。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am qq'
}, {
        get:function(target,key,property){
            console.log('come in Get');
            return target[key];
        }
    });
console.log(pro.name);

可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。

② get属性

get属性是在你得到某对象属性值时预处理的方法，他接受三个参数

• target：得到的目标值

• key：目标的key值，相当于对象的属性

• property：这个不太常用。

③ set 属性

• set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。

• target:目标值。

• key：目标的Key值。

• value：要改变的值。

• receiver：改变前的原始值。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am qq'
}, {
        get:function(target,key){
            console.log('come in Get');
            return target[key];
        },
        set:function(target,key,value,receiver){
            console.log( 'setting ${key} = ${value}'（ps：此处两端为为“'”符）);
            return target[key] = value;
        }
    });
console.log(pro.name);
pro.name='wqw';
console.log(pro.name);

//come in Get
 I am qq
 setting name = wqw
come in Get
wqw

④ apply的使用

apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。

let target = function () {
    return 'I am qq';
};
let handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}
var pro = new Proxy(target, handler);
console.log(pro());
//do apply
I am qq

15. promise

ES6中的promise解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。当它成功时执行一些代码，当它失败时执行一些代码。

如：要想在家吃顿饭，是要经过三个步骤的。

洗菜做饭。

坐下来吃饭。

收拾桌子洗碗。

let state=1;
function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }

}
function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }

}
function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }

}
new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);
}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

//1.开始-洗菜做饭

洗菜做饭--完成

2.开始-坐下来吃饭

坐下来吃饭--完成

3.开始-收拾桌子洗完

收拾桌子洗完--完成

//当在step(1 or 2 or 3)函数中state的值发生改变不为1时，则就会在此步报错，无法执行之后的操作