4.3 ES6 Class
Classification ES6 Tutorial
Overview
In ES6, the class, as a template for objects, is introduced and can be defined using the class keyword.
The essence of a class is a function.
It can be regarded as syntactic sugar, making the syntax for object prototypes clearer and more like object-oriented programming.
Basic Usage
Class Definition
Class expressions can be anonymous or named.
// Anonymous class
let Example = class {
constructor(a) {
this.a = a;
}
}
// Named class
let Example = class Example {
constructor(a) {
this.a = a;
}
}
Class Declaration
class Example {
constructor(a) {
this.a = a;
}
}
Note: No duplicate declarations are 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
Important Points
Class definitions are not hoisted, which means the class must be defined before it is accessed, otherwise an error will occur.
Methods in a class do not require the function keyword.
Semicolons should not be added between methods.
new Example();
class Example {}
Body of the Class
Properties
prototype
In ES6, the prototype still exists. Although methods can be defined directly within the class, the methods are actually defined on the prototype.
Overriding methods / Adding methods during initialization
Example.prototype={
//methods
}
Adding methods
Object.assign(Example.prototype,{
//methods
})
Static properties
Static properties: properties of the class itself, that is, properties defined directly within the class (Class.propname), without the need for instantiation. In ES6, it is stipulated that there are only static methods inside the Class, not static properties.
class Example {
// New proposal
static a = 2;
}
// Current feasible writing method
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 property
Returns the class name following the class (if present).
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
Methods
Constructor method
The constructor method is the default method of the class and is called when creating an instance of the class.
class Example{
constructor(){
console.log('I am the constructor');
}
}
new Example(); // I am the constructor
Return object
class Test {
constructor(){
// Default return instance object this
}
}
console.log(new Test() instanceof Test); // true
class Example {
constructor(){
// Specified return object
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);
}
}
}
Instantiation of the Class
new
Instantiation of a class must be done through the new keyword.
class Example {}
let exam1 = Example();
// Class constructor Example cannot be invoked without 'new'
Instantiation of the object
Sharing the 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__ is deprecated and not recommended
constructor() {
super();
}
set a(a) {
this._a = a;
}
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
class Father1 {
constructor(){}
// or both in the child class
get a() {
return this._a;
}
set a(a) {
this._a = a;
}
}
class Child1 extends Father1 {
constructor(){
super();
}
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2
### extends
Inherit class through extends.
class Child extends Father { ... }
### super
In the subclass constructor, there must be a super, and it must appear before this.
class Father { constructor() {} } class Child extends Father { constructor() {} // or // constructor(a) { // this.a = a; // super(); // } } let test = new Child(); // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
Call the parent class constructor, can only appear in the subclass constructor.
class Father { test(){ return 0; } static test1(){ return 1; } } class Child extends Father { constructor(){ super(); } } class Child1 extends Father { test2() { super(); // Uncaught SyntaxError: 'super' keyword unexpected here } }
Call the parent class method, super as an object, in the ordinary method, points to the parent class's prototype object, in the static method, points to the parent class.
class Child2 extends Father { constructor(){ super(); // Call the parent class's ordinary method console.log(super.test()); // 0 } static test3(){ // Call the parent class's static method return super.test1+2; } } Child2.test3(); // 3
### Attention points
Cannot inherit a regular object.
var Father = { // ... } class Child extends Father { // ... } // Uncaught TypeError: Class extends value #<Object> is not a constructor or null
// Solution Object.setPrototypeOf(Child.prototype, Father); ```
**Click to share notes
-
-
-
-2.2 ES6 Destructuring Assignment
- 4.3 ES6 Class