ES6-学习之路-05

nothingeverything
213 阅读4分钟

ES6-学习之路-05

用Proxy进行预处理

在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。 首先定义对象如下：

let obj = {
    add: (val) => {
        return val + 100
    },
    name: 'I am du'
}
console.log(obj.add(10))
console.log(obj.name)

声明proxy

用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。new Proxy（{},{}） 以下是定义proxy的完整代码：

/** 定义proxy*/
let pro = new Proxy({
    add: (val) => {
        return val + 100
    },
    name: 'I am du'
}, {
    get: (target, key, property) => {
        console.log('before get')
        return target[key]
    }
})
console.log(pro.name)

get属性

  • target：得到的目标值
  • key：目标的key值，相当于对象的属性
  • property：这个不太常用，用法还在研究中，还请大神指教。

set属性

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

  • target:目标值。
  • key：目标的Key值。
  • value：要改变的值。
  • receiver：改变前的原始值。
let pro = new Proxy({
    add: (val) => {
        return val + 100
    },
    name: 'I am du'
}, {
    get: (target, key, property) => {
        console.log('before get')
        return target[key]
    },
    set: (target, key, value, receiver) => {
        console.log(`${receiver[key]}=>${value} `)
        return target[key] = value

    }
})
console.log(pro.name)
pro.name = 'ming'
console.log(pro.name)

输出如下：
before get
proxy.js:28 I am du
proxy.js:20 before get
proxy.js:24 I am du=>ming 
proxy.js:20 before get
proxy.js:30 ming

apply

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

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

var pro2 = new Proxy(target, handler);

console.log(pro2());

promise使用

ES6中的promise的出现给我们很好的解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那，你可以想象他是一种承诺，当它成功时执行一些代码，当它失败时执行一些代码,更符合人类的行为思考习惯。

promise的基本用法

promise执行多步操作非常好用，那我们就来模仿一个多步操作的过程，那就以吃饭为例吧。要想在家吃顿饭，是要经过三个步骤：

  • 洗菜做饭。
  • 坐下来吃饭。
  • 收拾桌子洗碗。
    这个过程是有一定的顺序的，你必须保证上一步完成，才能顺利进行下一步，现在用promise来实现。
/**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;
});

上面示例代码中，resolve 和 reject是两个函数变量，resole函数在Promise对象执行成功的时候触发，reject函数则在Promise对象执行失败的时候触发，Promise实际上就是前面说过的Proxy。

class类的使用

class的定义见如下代码：

class Code {
    name(val) {
        console.log(val)
    }
}
let code = new Code
code.name('duduming')
console.log(code.name)

class类内多函数互相调用：

class Code {
    name(val) {
        console.log(val)
        return val
    }
    anthorM(val) {
        console.log(this.name('test') + ' another method' + val)
    }
}
let code = new Code
    //code.name('duduming')
code.anthorM('ano')

类的构造函数： 通过constructor构造函数，向class内传参，然后在class内的方法中使用参数。

class Code {
    name(val) {
        console.log(val)
        return val
    }
    anthorM(val) {
        console.log(this.name('test') + ' another method' + val)
    }
    add() {
        return this.a + this.b
    }
    constructor(a, b) {
        this.a = a
        this.b = b
    }
}
let code = new Code(3, 4)
    //code.name('duduming')
console.log(code.add())

class的继承,通过extends关键字。

class Code {
    name(val) {
        console.log(val)
        return val
    }
    anthorM(val) {
        console.log(this.name('test') + ' another method' + val)
    }
    add() {
        return this.a + this.b
    }
    constructor(a, b) {
        this.a = a
        this.b = b
    }
}

class SonCode extends Code {

}

let sonCode = new SonCode(3, 4)
    //code.name('duduming')
console.log(sonCode.add(4, 5))

模块化

export

export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。

export default的使用

加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别

  1. export
export var a ='jspang';
 
export function add(a,b){
    return a+b;
}

对应的引入方法：

export var a ='jspang';
 
export function add(a,b){
    return a+b;
}
  1. export default
export default var a='jspang'

对应引入方式

import str from './temp';

参考链接

技术胖blog

avatar
文章
阅读
粉丝