Key points of ES6 class inheritance

As mentioned above ： stay  class  Before appearance ,JavaScript  Implementing inheritance is a hassle , Constructor inheritance has the problem that the functions on the prototype cannot be reused ; Prototype chain inheritance also has the problem that the modification of reference value attribute is not independent ; Composite inheritance has the problem of calling the constructor twice , Parasitic combination inheritance , It's too much trouble to write , All in all , stay  class  Before it appeared ,JavaScipt  Implementing inheritance is a real hassle .

However ,class  Has the emergence of really changed this situation ？

Why don't you look down .

How to write it

Similar to function type , There are also two main ways to define classes ： Class declaration and class expression .

//  Class declaration  class Person {}

//  Class expression  const Animal = class {};

however , What's different from the definition of a function is , Although function declarations can promote , But class definitions cannot .

Like function constructors , Most programming styles recommend that class names be capitalized , To distinguish it from the instance created through it .

Classes can contain ：

• Constructor method

• Example method

• Get function

• Set function

• Static class methods

These items are optional

constructor

class Person { 
 constructor(name) {
 this.name = name
 console.log('person ctor');
 }
}

let p1 = new Person("p1")


constructor  Will tell the interpreter   In the use of  new  Operator to create a new instance of the class , This function should be called .

Equate to

function Person(name){
 this.name = name
 console.log('person ctor')
}

let p1 = new Person("p1")


The main difference between class constructors and constructors is , This will give you an error ：

class Animal {}

let a = Animal(); // TypeError: class constructor Animal cannot be invoked without 'new'


therefore ,new  Operators are mandatory ;

Use  new  when , Principle and  new  An object is the same , Because it's so important , again ：

(1)  Create a new object in memory .(2)  Inside this new object [[Prototype]] The pointer is assigned to the constructor  prototype  attribute . (3)  Inside the constructor  this  Assigned to this new object （ namely  this  Point to a new object ）. (4)  Execute the code inside the constructor （ Add properties to the new object ）. (5)  If the constructor returns a non empty object , Returns the object ; otherwise , Return to the new object you just created .

characteristic

From all sides ,ECMAScript  Class is a special function .

We can use  typeof  Try printing ：

class Person {} 

console.log(typeof Person); // function


It can also be used.  instanceof  Check its prototype chain

class Person {} 

let p = new Person()

console.log(p instanceof Person); // true


adopt  class  Each instance of the construct corresponds to a unique member object , This means that all members will not share on the prototype ;

class Person {
 constructor() {
 this.name = new String('Jack');
 this.sayName = () => console.log(this.name);
 }
}
let p1 = new Person();
let p2 = new Person();

console.log(p1.name === p2.name) // false
console.log(p1.sayName === p2.sayName) // false


If you want to share , Just rewrite it into a method , Written in  constructor  outside ：

class Person {
 constructor() {
 this.name = new String('Jack');
 }
 sayName(){
 console.log(this.name);
 }
}
let p1 = new Person();
let p2 = new Person();

console.log(p1.sayName === p2.sayName) // true


We can add... Before the method  static  keyword , Realization ： Static class members . We cannot call static methods on instances of a class , Can only be called through the class itself . Do not go into .

Inherit

ECMAScript 6  One of the best new features is the native support for class inheritance . Although class inheritance uses a new syntax , but

The prototype chain is still used behind

.

Let's review constructor inheritance and prototype chain inheritance  2  A classic question ：

①  Constructor inheritance ：

Constructors define methods on external prototypes , Can't reuse

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}

function SubType(){
 SuperType.call(this) //  Constructor inheritance
}

let p1 = new SubType()
console.log(p1.sayName()) // Uncaught TypeError: p1.sayName is not a function


Prototype chain inheritance can solve this problem ：

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}

function SubType(){}
SubType.prototype = new SuperType() //  Prototype chain inheritance

let p1 = new SubType()
console.log(p1.sayName()) // bob


②  The problem of prototype chain inheritance ：

The reference values contained in the prototype are shared across all instances .

function SuperType(){
 this.name = ["bob","tom"];
}

function SubType(){}
SubType.prototype = new SuperType() //  Prototype chain inheritance

let p1 = new SubType()
p1.name.push("jerry")

let p2 = new SubType()
console.log(p2.name) // ['bob', 'tom', 'jerry']


Constructor inheritance can solve this problem ：

function SuperType(){
 this.name = ["bob","tom"];
}

function SubType(){
 SuperType.call(this) //  Constructor inheritance
}

let p1 = new SubType()
p1.name.push("jerry")

let p2 = new SubType()
console.log(p2.name) // ['bob', 'tom']


class  Do inheritance have these two problems ？？

The code is easy to know ：

class SuperType{}
SuperType.prototype.sayName = ()=>{console.log("bob")}

class SubType extends SuperType{
}

let p1 = new SubType()
p1.sayName() // bob


problem ①, No problem , Prototype inheritance written outside the constructor , Public methods are still accessible ！！

class SuperType{
 constructor(){
 this.name=["bob","tom"]
 }
}

class SubType extends SuperType{
}

let p1 = new SubType()
let p2 = new SubType()
p1.name.push("Jerry")
console.log(p2.name) // ['bob', 'tom']


problem ②, No problem , stay  constructor  Reference value attribute of , Modification does not interfere ！！

class  Inheritance perfectly solves the problem of constructor inheritance , And prototype chain inheritance , There is no composite inheritance in writing 、 Parasitic inheritance is so troublesome , If you have to  JS  Simulate object-oriented programming ,class  essential ！！

Digression

Actually write  Class C  and  C.prototype  It's dangerous to write together ： Obviously, they are all operating object-oriented classes , Also operate the prototype chain . Class operation and prototype operation are two different design ideas

OK, The above is the sharing of this article . Like, follow the comments , Help good writing

I'm Anthony nuggets   100  Popular front-end technology bloggers with a reading volume of 10000   INFP  Writing personality persistence  1000  Japanese Geng Wen    Pay attention to me , Spend the long programming years with you