How does ES6 define classes?

In ES6, class (class) was introduced as a template for objects, and classes can be defined through the "class" keyword. The essence of class is function, which can be regarded as syntactic sugar, making the writing of object prototypes clearer and more like the syntax of object-oriented programming.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

ES6 Class

In ES6, class (class) is introduced as a template for objects and can be defined through the "class" keyword kind.

The essence of class is function.

Basically, the ES6 class can be regarded as just a syntax sugar. Most of its functions can be achieved by ES5. The new class writing method only makes the object prototype writing method clearer and more object-oriented. It’s just programming syntax.

Basic usage

Class definition

Class expressions can be anonymous or named.

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

Class declaration

class Example {
    constructor(a) {
        this.a = a;
    }
}

Note: Repeatable declarations are not allowed.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

Note:

The class definition will not be promoted, which means that the class must be defined before accessing, otherwise an error will be reported.

Methods in the class do not require the function keyword.

Semicolons cannot be added between methods.

new Example(); 
class Example {}

Body of the class

Attributes

prototype

ES6 Medium , the prototype still exists. Although methods can be defined directly from the class, the methods are actually still defined on the prototype. Override method/Add method during initialization

Example.prototype={
    //methods
}

Add method

Object.assign(Example.prototype,{
    //methods
})

Static attributes

Static attributes: attributes of the class itself, that is, attributes directly defined inside the class (Class. propname ), no instantiation is required. ES6 stipulates that there are only static methods inside Class and no static attributes.

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

Public properties

class Example{}
Example.prototype.a = 2;

Instance properties

Instance properties: Properties defined on the instance object (this).

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

name attribute

Returns the class name following class (when it exists).

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

Method

constructor method

The constructor method is the default method of the class and is called when creating an instantiated object of the class.

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

Return object

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

Static method

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

Prototype method

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

Instance method

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

Class The instantiation of

new

#class must be instantiated through the new keyword.

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

Instantiated object

Shared prototype object

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已废弃，不建议使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

[Related recommendations: javascript video tutorial, web front end】

The above is the detailed content of How does ES6 define classes?. For more information, please follow other related articles on the PHP Chinese website!