Advanced ES2015

学习教程系列:

规范:

目前还是以 airbnb 的 规范为准

https://github.com/airbnb/javascript

另外 MDN 是无敌的。

features

先将重点部分看一看:

https://github.com/lukehoban/es6features#enhanced-object-literals

arrow function

  • 很明显语法更为简洁了: 直接return;简化回调函数
  • 文法上的固定this对象。

注意:

  1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  2. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  4. 不可以使用yield命令,因此箭头函数不能用作Generator函数。

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

Classes

注意结合ES5所谈论的类,继承,原型等,理解问题

hasOwnProperty

本质上,ES6的Class只是ES5的构造函数的一层包装,语法糖,可以理解为JS在不断的打补丁。

理解里面的各种继承,子类从父类的继承

静态方法,静态属性

constructor方法

是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this)

constructor() {}  

ES6的类,完全可以看作构造函数的另一种写法。

class Point{  
  // ...
}

typeof Point // "function"  
Point === Point.prototype.constructor // true  

上面代码表明,类的数据类型就是函数,类本身就指向构造函数。

Enhanced Object Literals

Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods,* making super calls, and *computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

var obj = {  
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Template Strings

字符串新增了很多方法,但模板字符串真的很强大。

模板字符串(template string)是增强版的字符串,用反引号(`)标识。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1  
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";  
`Hello ${name}, how are you ${time}?`

Destructuring

解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。

Default + Rest + Spread

let + const

  • 块级作用域 Block-scoped
  • let不像var那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。

刚开始使用Bable转换了,所以觉得也提升了。应该再无转换的情况下运行代码。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。

let不允许在相同作用域内,重复声明同一个变量,会报错

const一旦声明变量,就必须立即初始化,不能留到以后赋值。如下代码:一切以严格模式为准:

'use strict';  
const foo;  
// SyntaxError: missing = in const declaration

Modules & Modules loader

Language-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model – no code executes until requested modules are available and processed.

odule loaders support:

Dynamic loading
State isolation
Global namespace isolation
Compilation hooks
Nested virtualization
The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.

Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.

实践出真知

ES2015的块级作用域

感觉这里ES5和ES2015狡诈在一起了。

严格模式

类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。

考虑到未来所有的代码,其实都是运行在模块之中,所以ES6实际上把整个语言升级到了严格模式。