ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。最近也一直在学习ES6,对于前端开发人员而言,ES6已经成为我们日常工作中的开发利器,今天我就和大家聊聊我学习ES6的学习心得,有错误的地方,还望各位同仁给予指正!
箭头函数
箭头函数很类似C#中的lambda表达式,在C#中,泛型委托中用到了lambda表达式。
lambda简介
lambda运算符:所有的lambda表达式都是用新的lambda运算符 " => ",可以叫他,“转到”或者 “成为”。运算符将表达式分为两部分,左边指定输入参数,右边是lambda的主体。
lambda表达式:
1.一个参数:param=>expr
2.多个参数:(param-list)=>expr
ES6允许使用“箭头”(=>)定义函数。
var f = s => s;
上面的箭头函数等同于:
var f = function(s) { return s; };
箭头函数有几个使用注意点:
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。 (4)不可以使用yield命令,因此箭头函数不能用作Generator函数。 上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
箭头函数中,this指向是固定的原因:
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
Promise 对象
什么是 Promise 对象?
Promise是处理异步操作的一种模式,之前在很多第三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,
其实就是在应用promise模式。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise对象的特点:
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。
只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。
这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
(3)可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
(4)Promise
对象提供统一的接口,使得控制异步操作更加容易。
Promise对象的缺点:
(1)无法取消Promise,一旦新建它就会立即执行,无法中途取消。 (2)如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。 (3)当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
ES6规定,Promise对象是一个构造函数,用来生成Promise实例。
下面代码创造了一个Promise实例。
/创建promise var promise = new Promise(function(resolve, reject) { // 进行一些异步或耗时操作 if ( /*如果成功 */ ) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } }); //绑定处理程序 promise.then(function(result) { //promise成功的话会执行这里 console.log(result); // "Stuff worked!" }, function(err) { //promise失败会执行这里 console.log(err); // Error: "It broke" });
Class
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,
它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
什么是class?
(1)类是模子,确定对象将会拥有的特征(属性)和行为(方法) (2) 类是对象的类型
e.g 人类 张三; =》 int a ;
对象类型 对象 数据类型 变量名
类与对象的区别:
(1) 类是抽象的概念,仅仅是模板; e.g:"人"类 (2)对象是一个你能够看得着,摸得着的具体实体; (3)对象是类的实例化; (4)类不占内存,对象才占内存; (5)类定义了一个概念模型,对象是真实的实体
类的定义
//类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log('My name is '+this.name); } } //类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } } //测试我们的类 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘I'm coding...’