学习参考地址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

ES6学习笔记<一> let const class extends super的更多相关文章

  1. es6学习笔记--let和const

    今天学习了es6中的let和const命令,借此整理一下笔记. let : let 和 var 的声明方式一样,但有 var 比不上的优点.下面用 var 和 let 的例子来加深对 let 的理解. ...

  2. ES6 学习笔记 - let和const

    let 和 const 命令 学习资料:ECMAScript 6 入门 let 所声明的变量,只在let命令所在的代码块内有效.用途:循环计数器. 如果使用var,只有一个全局变量i: var a = ...

  3. ES6学习笔记(let,const,变量的解构赋值)

    1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...

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

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

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

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

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

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

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

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  8. ES6学习笔记(一)——let和const

    1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它 ...

  9. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

随机推荐

  1. java JVM JRE JDK三者之间的关系

    JDK在包含JRE之外,提供了开发Java应用的各种工具,比如编译器和调试器. JRE包括JVM和JAVA核心类库和支持文件,是Java的运行平台. JVM是JRE的一部分,Java虚拟机的主要工作是 ...

  2. C# 构造方法...

    Class1.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  3. ASP.NET AJAX入门系列(3):使用ScriptManagerProxy控件

    在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时, ...

  4. Hanlp在java中文分词中的使用介绍

    项目结构 该项目中,.jar和data文件夹和.properties需要从官网/github下载,data文件夹下载 项目配置 修改hanlp.properties: 1 #/Test/src/han ...

  5. 用shell脚本生成日志文件

    mdate=`date +%R-%d-%m-%Y` LogFile=/root/HDstatusLog.log echo disk is good! $mdate >> $LogFile ...

  6. JavaScrip之BOM、DOM

    BOM 浏览器对象模型(BrowserObjectModel),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 使 Jav ...

  7. Set ARITHABORT Option设置为ON

    MSDN注释中提到,应该总是将Set ARITHABORT Option设置为ON,原因有四: 1,如果SSMS和application client的设置不同,那么会导致application cl ...

  8. 我的less学习之路

    less注释 可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中.开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文 ...

  9. materializecss的水波纹效果

    参考http://www.materializecss.cn/waves.html <html lang="en"> <head> <meta cha ...

  10. ALGO-13_蓝桥杯_算法训练_拦截导弹(贪心,DP)

    问题描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...