ES6 Study Notes

Introduced

ECMAScript 6 will be a standard for ECMAScript over the next period of time. The standard is expected to be signed this year, whether on GitHub or in many communities, where JavaScript enthusiasts have already embraced change and enjoyed the beauty of ES6, this article will introduce some of the new features of ES6. Since ES6 is not well supported by browsers, the ES6 code for this article will be compiled with Babel.

New features for ECMAScript 6 arrows (arrow)

=>is a shorthand form of function, supported expression and statement  two forms. At the same time it is very important that it has the lexical scope of this value, to help you solve the problem of this point, this is a cool way to help you reduce some code to write, first look at its syntax.

([param] [, param]) => {   statements}param => expression

Then take a look at the examples, as well as the Babel compiled results.

ES6:

Babel post-compilation results:

Classes (Class)

ES6 introduces Class (class), making JavaScript object-oriented programming easier and easier to understand. Class is just a prototype-based object-oriented pattern of syntactic sugars.

  Class Animal {The constructor is invoked when instantiated, and if not specified, there is a default constructor with no parameters. Constructor (Name,color) {THIS.name = name;This.color = color; }ToString is a property on the prototype object, ToString () {Console.log (' Name: ' +THIS.name +', Color: ' +This.color); } }var animal =New Animal (' Dog ',' White '); Animal.tostring ();Console.log (Animal.hasownproperty (' name '));TrueConsole.log (Animal.hasownproperty (' toString '));FalseConsole.log (Animal.__proto__.hasownproperty (' toString '));Trueclass Cat extends Animal {constructor (action) {// Subclasses must specify the super method in constructor, or they will be given an error when creating a new instance. //if there is no pinned Consructor, the default with Super method constructor will be added, super (this.action = Action;} ToString () {console.log (super.tostring ());}} var cat = new Cat ( ' catch ') Cat.tostring (); //instance cat is an instance of cat and Animal, and ES5 is exactly the same. console.log (cat instanceof cat); //true console.log (cat  Instanceof Animal); //true             

Class of prototypeProperties, and __proto__Property

In the previous JavaScript object-oriented programming we have learned that an instantiated object has a __proto__ property that points to a constructor prototype . In the class . With __proto__ prototype Two attributes, there are two inheritance chains.

• The property of the subclass __proto__ , which represents the inheritance of the constructor, always points to the parent class.

• The prototype property of the subclass represents the inheritance of the __proto__ method, always pointing to the property of the parent class prototype .

  class Cat extends Animal {}  console.log(Cat.__proto__ === Animal); // true  console.log(Cat.prototype.__proto__ === Animal.prototype); // true 

Let's take a look at the first one of Cat.__proto__ === Animal these prototype chains. The essence of completing the constructor inheritance is as follows:

class Cat extends Animal {   construcotr() {     return Animal.__proto__.call(this);  } }

The second inheritance of the prototype chain Cat.prototype.__proto__ === Animal.prototype completion method is as follows:

Cat.prototype.__proto__ = Animal.prototype

There are also three other special cases.

class A extends Object {} console.log(A.__proto__ === Object); // true console.log(A.prototype.__proto__ === Object.prototype); 

A __prototype__ that inherits Object,a points to the parent class object. A that prototype.__proto__ points to the prototype of the parent class object.

From the prototype of the function object in the previous article, we can see that the function is a special kind of object, and all functions are Function instances.

class Cat {} console.log(Cat.__proto__ === Function.prototype); //true console.log(Cat.prototype.__proto__ === Object.prototype); //true

Because cat does not have any inheritance, it is equivalent to a normal function, because the function is an Function instance, so Cat.__proto__ point to Function.prototype. The second inheritance chain points to the prototype property of the parent class (Function.prototype). So Cat.prototype.__proto__ === Object.prototype . The cat call returns an object instance, so it A.prototype.__proto__ points to the prototype of the constructor (Object).

class Cat extends null {}; console.log(Cat.__proto__ === Function.prototype); // true; console.log(Cat.prototype.__proto__ === null); //true

Cat is a normal function, so inheritance Function.prototype . The second inheritance chain does not inherit any methods, so Cat.prototype.__proto__ == null .

Module

So far, JavaScript (ES5 and previous) has not been able to support native modularity, and most solutions have been modularized by referencing external libraries. For example, follow the CMD specification of SEAJS and AMD's Requirejs. In ES6, modules are added as important components. The function of the module consists of the main export import components. Each module has its own separate scope, and the mutual invocation relationship between modules is through the export interface that specifies the external exposure of the module by import referencing the interfaces provided by other modules. It also creates a namespace for the module and prevents naming conflicts for functions.

Export,import command

  //test.js  export var name = ‘Rainbow‘

ES6 treats a file as a module, and the above module export outputs a variable by outward. A module can also output multiple variables to the outside at the same time.

//test.js var name = ‘Rainbow‘; var age = ‘24‘; export {name, age};

Once the output of the module is defined, it can be referenced in another module import .

  //index.js import {name, age} from ‘./test.js‘

Overall input, module directive

//test.js    export function getName() { return name; } export function getAge(){ return age; } 

Through the import * as completion of the module as a whole import.

import * as test form ‘./test.js‘;

moduleThe overall input can also be achieved through the instruction.

module test from ‘test.js‘; test.getName();

Export default

No matter what the module output, through the export default instruction can be loaded into the default module, do not need to use curly braces to specify the output module,一个模块只能使用 export default 一次

  // default 导出  export default function getAge() {} // 或者写成 function getAge() {} export default getAge; // 导入的时候不需要花括号 import test from ‘./test.js‘;

A import statement can import both the default method and other variables at the same time.

import defaultMethod, { otherMethod } from ‘xxx.js‘;

ES6 Study Notes