【ES6】ES6和ES5特性对比

一、let && var

ES5只有全局作用域和函数作用域，没有块集作用域。而

let

则实际上为JavaScript新增了块级作用域。

用它所声明的变量，只在

let

命令所在的代码块内有效。

场景一：

let name = 'zach'
while (true) {
let name = 'obama'
console.log(name)  //obama
break
}
console.log(name)  //zach

var name = 'zach'
while (true) {
var name = 'obama'
console.log(name)  //obama
break
}
console.log(name)  //obama

场景二：

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

而使用let则不会出现这个问题。

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6

场景三：

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i)
}
}//i为全局变量，每次点击输出最后一次的i值

运用闭包解决：

function iteratorFactory(i){
return function(){
console.log(i)
}
}
var clickBoxs = document.querySelectorAll('.clickBox');
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i)
}

二、继承实现

ES5通过原型链实现继承：

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function SubType() {
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true

ES6引入了Class（类）这个概念，更像面向对象编程的语法。

class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用

class

定义了一个“类”，可以看到里面有一个

constructor

方法，这就是构造方法，而

this

关键字则代表实例对象。简单地说，

constructor

内定义的方法和属性是实例对象自己的，而

constructor

外定义的方法和属性则是所有实力对象可以共享的。

super

关键字，它指代父类的实例（即父类的this对象）。子类必须在

constructor

方法中调用

super

方法，否则新建实例时会报错。这是因为子类没有自己的

this

对象，而是继承父类的

this

对象，然后对其进行加工。如果不调用

super

方法，子类就得不到

this

对象。