ES6第三天
Generator函数 是一种新的函数类型 用于解决异步编程 允许一个函数分多次进行
function * gen（）{
console.log(aaaaa)
yield 表示停住 让步的意思 它只能用在generator函数中
要执行的函数体执行到yield所在行
console.log(bbbbb)
}
var g = gen() 注 该函数不可以用new来调用
g.next();
yield作用
1 把控制权交给g.next()
2 返回内容
g.next()返回的是一个对象 {value， done}
yield后跟什么value就是什么 return后跟什么value就是什么
done 是否结束
g.next()作用
1 把控制权再交给generator函数
2 传递参数
Promise 解决异步编程的语法 改变的是代码的书写方式
var p = new Promise(function(resolve,reject){
}) 会立即执行
resolve ：成功
reject：失败
p是promise的实例化对象 用于监听成功或者失败 p.then()方法有2个参数 参数都是函数 注P.then()可以多次调用 但是只有第一次调用的时候区分resolve和reject
从第二个p.then方法 每次都会执行 且它只有一个参数 后一个then的参数是
前一个then方法的返回值
p的三个状态
1 pending 发送中 pending==>resolve
2 resolved 已成功 pending==>rejected
3 rejected 已失败
如何连续调用Promise
方式一 在第一个promise的then方法中返回一个新的promise（因为promise会立即执行 所以我们把连续的promise函数装进一个普通函数中）
定义第一个任务
2var task1 = function() { 3 // 初始化Promise 4 return new Promise(function(resolve, reject) { 5 // 发送ajax 6 $.ajax({ 7 url: "/action1", 8 type: "get", 9 dataType: "json", 10 success: function(data) { 11 if (!data.error) { 12 resolve(data); 13 } else { 14 reject(data); 15 } 16 } 17 }) 18 }); 19}
定义第二个任务
22var task2 = function(data) { 23 return new Promise(function(resolve, reject) { 24 $.ajax({ 25 url: "/action2", 26 data: data, 27 type: "get", 28 dataType: "json", 29 success: function(data) { 30 if (!data.error) { 31 resolve(data); 32 } else { 33 reject(data); 34 } 35 } 36 }) 37 }); 38} 39
40
//执行第一个任务
var p = task1(); 41p.then(function(data) { 42 console.log(data); 43 return task2(); 44}, function(data) { 45 46})
//第二个then方法 47.then(function(data) { 48 console.log(data); 49}, function() { })
方式二 promise的实例p还有catch方法
当某一个Promise中调用了reject或者出异常时，会调用catch方法 将所有的失败行为统一处理
（这里是把reject提取出来，只保留resolve方法）
1var p = task1(); 2p.then(function(data) { 3 console.log("第一个Promise成功"); 4 return task2(); 5}) 6.then(function(data) { 7 console.log("第二个Promise成功"); 8}) 9.catch(function(data) { 10 console.log(data); });
方法三 Promise.all 这是一个静态方法 该方法可以监听多个请求
参数是一个数组 数组中的每一项都是promise的实例
返回值 是promise的实例
返回值可以调用then方法，也接收两个参数
第一个参数 只有在数组中所有的promise状态都变成resolved时 才会执行（都成功才可以成功）
第二个参数 只要有任何一个数组的promise状态变成rejected时 才会执行 （有一个失败就会失败）
方法四 promise.race 这是一个静态方法 可以监听多个请求
参数是一个数组 数组中的每一项都是promise的实例
返回值 是promise的实例
返回值可以调用then方法 也接受两个参数
第一个参数：数组中的Promise第一个发生变化且变为resolved 才会执行。
第二个参数：数组中的Promise第一个发生变化且变为rejected 才会执行
demo：
1// 因为Promise所接收的函数会被立即执行 所以我们在连续调用多个Promise时，会把每个Promise都放进一个普通函数内 2var task1 = function() { 3 // 初始化Promise 4 return new Promise(function(resolve, reject) { 5 // 发送ajax 6 $.ajax({ 7 url: "/action1", 8 type: "get", 9 dataType: "json", 10 success: function(data) { 11 if (!data.error) { 12 resolve("任务1 成功"); 13 } else { 14 reject("任务1 失败"); 15 } 16 } 17 }) 18 }); 19}
21// 定义第二个任务 22var task2 = function(data) { 23 return new Promise(function(resolve, reject) { 24 $.ajax({ 25 url: "/action2", 26 data: { 27 msg: data 28 }, 29 type: "get", 30 dataType: "json", 31 success: function(data) { 32 if (!data.error) { 33 resolve("任务2 成功"); 34 } else { 35 reject("任务2 失败"); 36 } 37 } 38 }) 39 }); 40}
42 // 调用race方法
43 var p = Promise.race([task1(), task2()]);
44
45 // 监听
46 p.then(function(data) {
47 console.log(data);
48 }, function() {
49 console.log(data);
})
类
class People {}
初始化 var p = new People（）
构造函数 ---就是类的一部分 ，用于初始化时执行
demo：
1 // 定义类 2 class People { 3 // 定义构造函数 该函数可以定义自身的属性 4 constructor (name, age, sex) { 5 this.name = name; 6 this.age = age; 7 this.sex = sex; 8 } 9} 10 // 初始化 11 var p = new People("小明", 22, "男"); console.log(p)
原型方法 以前的方法都在原型上 es6中方法定义在类的内部
1 // 定义类 2 class People { 3 // 定义构造函数 该函数可以定义自身的属性 4 constructor (name, age, sex) { 5 this.name = name; 6 this.age = age; 7 this.sex = sex; 8 } 9 // 定义普通方法 10 sayHello () { 11 console.log("大家好, 我的名字是" + this.name); 12 } 13 } 14 // 初始化 15 var p = new People("小明", 22, "男"); p.sayHello();
静态方法---就是类本身调用的方法 static
1 // 定义类 2 class People { 3 // 定义静态方法 4 static sayHi() { 5 console.log("我是People类"); 6 console.log(this); 7 } 8 } 9 // 调用静态方法 People.sayHi();
存取器 ---就可以访问实例的getName属性和setName属性。同时会触发响应的函数 给实例使用
1// 定义类 2class People { 3 // 定义构造函数 该函数可以定义自身的属性 4 constructor (name, age, sex) { 5 this.name = name; 6 this.age = age; 7 this.sex = sex; 8 } 9 // 定义存取器方法 10 get getAge() { 11 console.log("哈哈哈哈哈"); 12 return this.name; 13 } 14 set setAge(value) { 15 console.log("hehehehehehe"); 16 this.name = value; 17 } 18} 19// 初始化 20var p = new People("王老五", 13, "男"); 21// 访问存取器属性 22console.log(p.getName);
静态存取器--- 给类使用
1// 定义类 2class People { 3 // 定义构造函数 该函数可以定义自身的属性 4 constructor (name, age, sex) { 5 this.name = name; 6 this.age = age; 7 this.sex = sex; 8 } 9 // 定义存取器方法 10 static get getName() { 11 console.log("哈哈哈哈哈"); 12 return this.name; 13 } 14 static set setName(value) { 15 console.log("hehehehehehe"); 16 } 17} 18 19// 访问类的存取器方法 console.log(People.getName);
继承---extends关键字用于继承
使用方式
class Student extends People { constructor() { super(); // 构造函数式继承 } }
1 // 定义父类 2 class People { 3 constructor(name, age) { 4 this.name = name; 5 this.age = age; 6 }
//方法 7 sayHello() { 8 console.log("hello"); 9 }
//静态方法 10 static hi() { 11 console.log("hi") 12 }
//存取器 13 get getAge() { 14 console.log("存取器"); 15 }
//静态存取器 16 static get getName() { 17 console.log(this.name); 18 } 19} 20 // 定义子类 21 class Student extends People { 22 constructor(name, age, sex) { 23 super(name, age); // 构造函数式继承 24 this.sex = sex; 25 } 26 } 27 28 // 初始化子类 29 var s = new Student("王老五", 22, "男"); 30 // 子类原型上没有该方法 31 s.sayHello();// 调用成功 32 // 子类调用hi方法 33 Student.hi(); 34 // 子类调用存取器属性 35 s.getAge; 36 // 子类调用静态存取器 37 Student.getName; // 最终：父类的一切都可以继承
转换es6为es5代码
需要的模块 babel-loader@7、babel-core、babel-preset-env
需要建立一个webpack.config.js配置文件
1 module.exports = { 2 entry: "./module/main", 3 output: { 4 path: __dirname, 5 filename: "./bundle.js" 6 }, 7 module: { 8 rules: [ 9 { 10 test: /\.es6$/, 11 loader: "babel-loader", 12 options: { 13 presets: ["env"] 14 } 15 } 16 ] 17 } }
