JavaScript's class inheritance_Planning of the Dynamic Node Java Academy

JavaScript's object model is implemented based on prototypes. Its characteristic is that it is simple. The disadvantage is that it is more difficult to understand than the traditional class-instance model. The biggest disadvantage is that the inherited implementation requires a lot of code to be written and the prototype chain needs to be implemented correctly.

Is there a simpler way to write it? have!

New keywordsclassIt has been officially introduced into JavaScript since ES6.classThe purpose is to make it easier to define the class.

Let's first review the method of implementing Student using functions:

function Student(name) {
   = name;
}

 = function () {
  alert('Hello, ' +  + '!');
}

If using new oneclassWrite keywordsStudent, you can write it like this:

class Student {
  constructor(name) {
     = name;
  }

  hello() {
    alert('Hello, ' +  + '!');
  }
}

You can find out after comparison.classThe definition contains the constructorconstructorand functions defined on prototype objectshello()(Note thatfunctionKeywords), this will avoid = function () {...}Such a scattered code.

Finally, creating a Student object code is exactly the same as the previous chapter:

var xiaoming = new Student('Xiao Ming');
();

class inheritance

Another huge benefit of defining objects with class is that inheritance is more convenient. Think about us fromStudentDerived onePrimaryStudentThe amount of code to be written. Now, the intermediate objects inherited by the prototype, the constructor of the prototype object, etc. need not be considered, and it is directly passedextendsTo achieve:

class PrimaryStudent extends Student {
  constructor(name, grade) {
    super(name); // Remember to use super to call the constructor of the parent class!     = grade;
  }

  myGrade() {
    alert('I am at grade ' + );
  }
}

NoticePrimaryStudentThe definition of class keyword is also implemented, andextendsIt means that the prototype chain object comes fromStudent. The constructor of a subclass may be different from that of a parent class, for example,PrimaryStudentneednameandgradeTwo parameters, and need to passsuper(name)To call the constructor of the parent class, otherwise the parent classnameThe attribute cannot be initialized normally.

PrimaryStudentThe parent class has been automatically obtainedStudentofhelloMethod, we define a new one in the subclassmyGrademethod.

What is the difference between inheriting the class introduced by ES6 and the original JavaScript prototype? In fact, there is no difference between them. The role of class is to allow the JavaScript engine to implement the prototype chain code that we originally needed to write ourselves. In short, the advantage of using class is that it greatly simplifies the prototype chain code.

You will definitely ask, class is so easy to use, can it be used now?

It's still a little too early to use it now, because not all mainstream browsers support ES6 class. If you have to use it now, you need a toolclassConvert code to traditionalprototypeFor code, you can try the Babel tool.

Practice

Please useclassRedefineCatand let it go from the existing oneAnimalInherit, then add a new methodsay(), return the string'Hello, xxx!' 。