【ES6】ES6和ES5特性对比

最新推荐文章于 2024-11-18 09:39:48 发布

原创最新推荐文章于 2024-11-18 09:39:48 发布 · 6.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

知识点笔记专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了ES6中let和var的区别，展示了let如何解决变量作用域问题，并通过实例对比了ES5与ES6的不同。此外，还探讨了ES6中类的继承实现方式。

一、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对象。