Simple Learning Es6-class

Objective

With the finalization of the ES6 standard, many features also tend to stabilize, the major browsers are also gradually realizing these features, then more understanding of ES6 is understandable.

Get ready

Before we learn ES6, we need to have an environment to test the ES6 code. Here I recommend using node's branch io.js.

1. How do I install it?

   1. : https://iojs.org/en/index.html, if your friends are not accustomed to English, you can change the en in the URL to CN.
   2. Then, depending on your operating system version, download the appropriate installation package (primarily the Windows system) for installation.
   3. The installation process will not be mentioned, and the General software is the same.

2. How do I verify that the installation was successful?

   1. Open cmd, then enter iojs -v , if output a version number, then represents Io.js installation success. (PS: I am using v1.2.0 now)
   2. You can also enter a version that looks at the iojs -p process.versions.v8 V8 (PS: not V8 engine) used by IOJS. (PS: I show 4.1.0.14 here)

Small Glimpse ES6

Before testing the ES6 code, we can look at the Io.js support for ES6: https://iojs.org/cn/es6.html.

Next, start our Es6-class tour:

1. Class Basics

You should know that in most object-oriented languages, there is a class, then in the early JS, the object-oriented implementation is very special, we have to use function to simulate. Such as:

//ES5及以下function Point(x, y){  this.x = x;  this.y = y;}var p1 = new Point(100, 100);

In ES6, however, we can use the class keyword directly, such as:

//ES6‘use strict‘ //不能去掉，要不然iojs会提示不认识class。class Point{  constructor(x, y){    this.x = x;    this.y = y;  }}var p1 = new Point(100, 100);console.log(p1);

Save the above code to 1.js, then execute the following command iojs --es_staging 1.js : You can see "{x:100, y:100}" the result. (PS: Note To open cmd in the 1.js directory).

Next, look at a complex point that inherits:

//ES6‘use strict‘class Point{  constructor(x, y){    this.x = x;    this.y = y;  }}var p1 = new Point(100, 100);console.log(p1);class ColorPoint extends Point{  constructor(x, y, color){    super(x, y);    this.color = color;  }}var cp = new ColorPoint(50, 50, ‘red‘);console.log(cp);//输出继承关系console.log(cp instanceof ColorPoint); //trueconsole.log(cp instanceof Point);  //true

As you can see, the inheritance of most languages is very similar, if you have other object-oriented language basis, then it is easy to understand.

The point and ColorPoint are typeof, and the results are obvious and can be seen as function.

console.log(typeof Point);  // functionconsole.log(typeof ColorPoint);  // function

What if the function calls to class?

Point(100, 100); //Error

As above, the class must be called by new, and the direct use of the function call will cause an error.

Then compare the following code:

//标准的函数可以先写调用语句，后写申明语句。因为会定义前置foo();function foo(){}//如果是class呢?new Foo(); //Error,Foo is not definedclass Foo{}

As above, if the class is defined, then the statement must be defined before, and called after.

Let's look at the following scenario:

function funThatUseBar(){  new Bar();}//funThatUseBar(); //Error,Bar is not definedclass Bar{}funThatUseBar(); //ok

If you use bar first, you will also get an error. class must be defined first.

Attached to all of the above JS, will be an error statement, commented.

//ES6‘use strict‘class Point{  constructor(x, y){    this.x = x;    this.y = y;  }}var p1 = new Point(100, 100);console.log(p1);class ColorPoint extends Point{  constructor(x, y, color){    super(x, y);    this.color = color;  }}var cp = new ColorPoint(50, 50, ‘red‘);console.log(cp);//*********************************************//输出继承关系console.log(cp instanceof ColorPoint); //trueconsole.log(cp instanceof Point);  //trueconsole.log(typeof Point);  // functionconsole.log(typeof ColorPoint);  // function//Point(100, 100); //Error//************************************//标准的函数可以先写调用语句，后写申明语句。因为会定义前置foo();function foo(){}//如果是class呢?//new Foo(); //Error,Foo is not definedclass Foo{}//*******************************************function funThatUseBar(){  new Bar();}//funThatUseBar(); //Error,Bar is not definedclass Bar{}funThatUseBar(); //ok

2. The subject in the class

The body of a ES6 class can contain only methods and cannot contain data properties. If you include a variable definition in your class, you will get an error. There are three types of methods in class: constructors, static methods, and prototype methods, such as:

class Class1{  //构造  constructor(options){  }  // 静态方法，静态方法用static修饰  static staticMethod(){    return ‘static method‘;  }  prototypeMethod(){    return ‘prototype method‘;  }}

The constructor of each class and class prototype are equal, and the class nature is also function

console.log(Class1 === Class1.prototype.constructor) // trueconsole.log(typeof Class1)  // function

Then we test the methods in the class

var p = console.log;p(typeof Class1.prototype.prototypeMethod); Class1.prototype.prototypeMethod() // 原型方法调用方式p(typeof Class1.staticMethod);  Class1.staticMethod() //静态方法调用方式

The use of Getters and Setters

class Class2{  get name(){    return ‘jay‘;  }  set name(value){    console.log(‘set name = ‘ + value);  }}var c2 = new Class2();c2.name = ‘hu‘;  // "set name = hu"console.log(c2.name); // "jay"

When get and set are used, the get and set for properties automatically call the related method in class.

Post all the JS code:

‘use strict‘class Class1{  //构造  constructor(options){  }  // 静态方法  static staticMethod(){    return ‘static method‘;  }  prototypeMethod(){    return ‘prototype method‘;  }}console.log(Class1 === Class1.prototype.constructor);console.log(typeof Class1);var p = console.log;p(typeof Class1.prototype.prototypeMethod);p(typeof Class1.staticMethod);class Class2{  get name(){    return ‘jay‘;  }  set name(value){    console.log(‘set name = ‘ + value);  }}var c2 = new Class2();c2.name = ‘hu‘;console.log(c2.name);

3. Inheritance of Classes

The simple inheritance relationship is as follows:

‘use strict‘class Class1{  toString(){    return ‘parent class.‘;  }}class SubClass extends Class1{  toString(){    return ‘sub class.‘;  }}var sc = new SubClass();console.log(sc.toString()); // "sub class"

Among them, SC is an example of Class1, and also an example of subclass:

console.log(sc instanceof Class1); //trueconsole.log(sc instanceof SubClass); //true

What if you want to invoke the method of the parent class?

class SubClass2 extends Class1{  toString(){    return super.toString();  }}var sc2 = new SubClass2();console.log(sc2.toString());

In an inheritance relationship, the prototype of a subclass equals the parent class:

console.log(Object.getPrototypeOf(SubClass2) === Class1); //true

To access the parent class construct in the subclass, use Super.

Other

1. If you want to list all the ES6 new features, you can refer to Https://github.com/lukehoban/es6features
2. If you want the system to learn ES6, then recommend http://es6.ruanyifeng.com/
3. To learn more about classes in ECMAScript 6, refer to Http://www.2ality.com/2015/02/es6-classes-final.html

Simple Learning Es6-class