JS class is not just a simple syntax sugar!

Long ago , Wrote an article “ class ” Design patterns and “ Prototype ” Design patterns ——“ Copy ” and “ entrust ” The difference of , That is to say ： Code reuse , That is inheritance 、 rewrite , There are two ways of thinking ：1. Object oriented class inheritance ;2. be based on JavaScript Prototype inheritance of prototype chain ; The main feature of the former is ： Copy , Generally speaking, it means to put variables 、 Attribute copy again , The main feature of the latter is ： entrust , It is realized through the search of attributes .

Later on , Deepen understanding JavaScript Inheritance in advanced programming , Including constructor inheritance 、 Prototype inheritance 、 Combination inheritance 、 Parasitic combination inheritance , Each has its own shortcomings .​

also , Ben Gua especially remembers ： Wiki pair JavaScript An explanation of the origin

JavaScript The language design of is mainly influenced by ​ ​Self​​（ A prototype based programming language ） and ​ ​Scheme​​（ A functional programming language ） Influence . In grammatical structure, it is similar to ​ ​C Language ​​ There are many similarities .

Last , My summary is ：JavaScript The design itself is “ Through prototype delegation ” To realize code reuse , result ES6 We've come up with a class As a grammar sugar , It is still based on the prototype chain , But it is to realize object-oriented , Object oriented is based on class Kind of “ Copy ” To achieve code reuse .

class and Prototype , It's two different things ,JS class Mix the two together , Don't be awkward ？

Later I saw some articles saying that JS Use in class Classes cause some problems , Such as this one ：​ ​medium.com/giant-machi…​​, So be more determined to reduce the use of class .

But in fact , The title of this article is ：JS class It's not just a simple grammar sugar , therefore , This article is not meant to say that it is bad , But to say it's good ！

Come on , Spread your wings ！

class The first one is good ： Private variables

If not class , Is there any more elegant way to implement the private variables of the following subclasses ？

Log in and copy

      
      

       
       class Person {
       
       
  constructor(firstName, lastName) {
       
       
    this.firstName = firstName;
       
       
    this.lastName = lastName;
       
       
  } // Person.constructor
       
       
 
       
       
  get FullName () {
       
       
    return this.firstName + " " + this.lastName;
       
       
  }
       
       
 
       
       
} // Person
       
       
class Employee extends Person {
       
       
 
       
       
  #salary;
       
       
 
       
       
  constructor(firstName, lastName, salary) {
       
       
    super(firstName, lastName);
       
       
    this.salary = salary;
       
       
  }
       
       
 
       
       
  get salary() {
       
       
    return this.#salary;
       
       
  }
       
       
 
       
       
  set salary(salary) {
       
       
    this.#salary = salary;
       
       
    console.log("Salary changed for " + this.fullName + " : $" + this.salary);
       
       
  }
       
       
 
       
       
} // Employee
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
       
       
15.
       
       
16.
       
       
17.
       
       
18.
       
       
19.
       
       
20.
       
       
21.
       
       
22.
       
       
23.
       
       
24.
       
       
25.
       
       
26.
       
       
27.
       
       
28.
       
       
29.
       
       
30.
      
      

Envisaged , We use the idea of prototype chain to simulate （ object ）：

Log in and copy

      
      

       
       const Person = {
       
       
  set givenName(givenName) {
       
       
    this._givenName = givenName;
       
       
  },
       
       
  set familyName(familyName) {
       
       
    this._familyName = familyName;
       
       
  },
       
       
  get fullName() {
       
       
    return `${this._givenName} ${this._familyName}`;
       
       
  }
       
       
};
       
       

       
       
const test = Person; //  Let's assume that   object   simulation   class 
       
       
test.givenName = "Joe";
       
       
test.familyName = "Martinez";
       
       
console.log("test.fullName", test.fullName); // Joe Martinez
       
       
console.log("test.givenName", test.givenName); // undefined
       
       
console.log("test._givenName", test._givenName); // Joe
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
       
       
15.
       
       
16.
       
       
17.
       
       
18.
      
      

No private property implemented ​​_givenName​​

and class You can save values as private , So that the object cannot be modified outside ：

Code examples can refer to ：​ ​javascript-classes-are-not-just-syntactic-sugar​​

class The second one is good ：super Inherit

class Can pass super More elegant implementation of inheritance 、 And rewrite , such as ：

Log in and copy

      
      

       
       class Cash {
       
       
 
       
       
  constructor() {
       
       
    this.total = 0;
       
       
  }
       
       
 
       
       
  add(amount) {
       
       
    this.total += amount;
       
       
    if (this.total < 0) this.total = 0;
       
       
  }
       
       
 
       
       
} // Cash
       
       
class Nickles extends Cash {
       
       
 
       
       
  add(amount) {
       
       
    super.add(amount * 5);
       
       
  }
       
       
 
       
       
} // Nickles
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
       
       
15.
       
       
16.
       
       
17.
       
       
18.
       
       
19.
      
      

If it is the same , Prototype chain , It might look something like this ：

Log in and copy

      
      

       
       const Cash = function() {
       
       
  this.total = 0;
       
       
}; // Cash
       
       
Cash.prototype = {
       
       
  add : function(amount) {
       
       
    this.total += amount;
       
       
    if (this.total < 0) this.total = 0;
       
       
  }
       
       
  
       
       
}; // Cash.prototype
       
       
const Nickles = function() {
       
       
  Object.assign(this, new Cash());
       
       
  
       
       
  this.add = function(amount) {
       
       
    Cash.add.apply(this, amount);
       
       
  };
       
       
  
       
       
} // Nickles
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
       
       
15.
       
       
16.
       
       
17.
       
       
18.
      
      

It's a bit confusing ,this Pointing to and fro , And you can do it manually in the constructor assign operation , This increases code execution time .

---

To sum up, two points ,JS class It is very valuable to use it , Don't run away , Use it in the right situation , You will find its charm ~~

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