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 getproxy.js:28 I am duproxy.js:20 before getproxy.js:24 I am du=>ming proxy.js:20 before getproxy.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 Codecode.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的区别
- 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;}复制代码 - export default
export default var a='jspang'复制代码
对应引入方式
import str from './temp';复制代码