ES6学习笔记<一> let const class extends super

时间:2023-03-08 20:41:05

学习参考地址1  学习参考地址2

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015;也就是说,ES6就是ES2015。

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!

let

let 用法与 var 类似用来声明变量,但var声明的变量影响全局或函数,一下案例中var就显得不那么好用;

    var val = "a";
while(true){
var val = "b";
console.log(val); // b
break;
}
console.log(val); // b

两个 val 都输出b,之前赋值的 val = “a” 则直接被while块中的赋值覆盖了。

    var val = "a";
while(true){
let val = "b";
console.log(val); // b
break;
}
console.log(val); // a

新引进的 let 则只影响块级作用域,这样可以很好的避免变量被覆盖问题。

再看一个 for 循环的例子。

    var arr = [];
for (var i = 0; i < 7; i++) {
arr[i] = function(){ return i + 1; };
}
console.log(arr[4]()); //
console.log(arr[0]()); //

这里 i 的值影响全局,每次循环后都去覆盖前一次的值,所有最后不论取哪个下标结果都是8。

    var arr = [];
for (let i = 0; i < 7; i++) {
arr[i] = function(){ return i + 1; };
}
console.log(arr[4]()); //
console.log(arr[0]()); //

let 后 i 的值仅在一次循环中生效,不会再去覆盖之前的值。

再来引用一个实际开发中非常常见的例子

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

我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。

没有 let 时我们一般采用闭包来解决这类问题

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

有 let 后,解决这类问题就不需要再用闭包来做了。

const

这个和很多服务器端语言一样表示常量,一旦定义赋值不可再修改。

    const MyName = "miragefox";
MyName += "a"; // Uncaught TypeError: Assignment to constant variable.

常量定义后 一旦修改浏览器直接报错。const 在实际开发中用来定义 始终恒定的量,可以有效避免因无修改导致的迷之bug。

class   extends   super

这三个关键字的出现非常友好的解决了 原型(类) 继承 构造 这是js oop的一大进步,阅读书写起来都特别舒服了,先看个例子:

    // 创建对象
class People{
constructor(name){
this.eyeNum = 2;
this.mouthNum = 1;
this.headNum = 1;
this.name = name;
}
sayHello(language){
switch(language){
case "中文":
console.log("你好,我是" + this.name + ",我今年" + this.age + "岁。");
break;
case "English":
console.log("Hello,I'm " + this.name);
break;
}
}
};
class Chinese extends People {
constructor(name,age){
super(name);
this.age = age;
}
};
// 实例化对象
let p = new People("Zero");
p.sayHello("English"); // Hello,I'm Zero
let XiaoM = new Chinese("小明",18);
XiaoM.sayHello("中文"); // 你好,我是小明,我今年18岁。

这个例子看起来有点复杂,其实仔细调试下就发现 这个例子正好把 子类继承原型类(父类) 还有构造函数 都诠释了一遍。

引用参考资料的话来解释这三个关键字。

以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this

P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

ES6学习笔记目录

ES6学习笔记<一> let const class extends super

ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

ES6学习笔记<三> 生成器函数与yield

ES6学习笔记<四> default、rest、Multi-line Strings

ES6学习笔记<五> Module的操作——import、export、as