Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the way of inheritance of JavaScript", the content is detailed, the steps are clear, and the details are handled properly. I hope this article of "what is the way of inheritance of JavaScript" can help you solve your doubts.

Inheritance methods in JavaScript Q: how many inheritance methods are there in JavaScript?

Emmm... Six? Five? There are still four kinds.

Remember clearly this time that there are five ways of inheritance.

Embezzlement of constructors (classical inheritance)

Combinatorial inheritance

Prototype chain inheritance

Parasitic inheritance

Parasitic combinatorial inheritance

Q: how is each inheritance implemented? embezzlement of constructors

The basic idea is simple: call the parent constructor in the subclass constructor. Because, after all, a function is a simple object that executes code in a particular context, you can use the apply () and call () methods to execute the constructor in the context of the newly created object.

One of the advantages of stealing a constructor is that it can pass parameters to the parent constructor in the subclass constructor.

Function SuperType (name) {this.name = name this.sayName = function () {console.log (this.name);}} function SubType (name, age) {/ / inherits SuperType and passes the parameter SuperType.call (this, name); / / instance property this.age = age} let instance1 = new SubType ('zxc', 2) let instance2 = new SuperType (' gyx') / / instance1.sayHi () /? Classes also cannot access the methods defined on the parent class prototype, so all types can only use the constructor pattern console.log (instance1); / / SubType {name: 'zxc', sayName: [Function (anonymous)], age: 2} combined inheritance

Combinatorial inheritance (sometimes called pseudo-classical inheritance) combines prototype chains and embezzlement constructors, bringing together the advantages of both. The idea of the base is to inherit the properties and methods on the prototype using the prototype chain and to inherit the instance properties through embezzlement of the constructor. In this way, the method can be defined on the prototype for reuse, and each instance can have its own properties.

Function SuperType (name) {this.name = name this.colors = ['red',' blue', 'green']} SuperType.prototype.sayName = function () {console.log (this.name) } function SubType (name, age) {/ / inherit instance properties SuperType.call (this, name) this.age = age} / / inherit prototype method SubType.prototype = new SuperType () SubType.prototype.sayAge = function () {console.log (this.age);} let instance1 = new SubType ('zxc',' 22') instance1.sayName () / / zxcinstance1.sayAge () / / 22let instance2 = new SubType ("Greg", 27); console.log (instance2.colors) / / "red,blue,green" instance2.sayName (); / / "Greg"; instance2.sayAge (); / / 27 prototype chain inheritance

Prototype inheritance works in this case: you have an object and you want to create a new object based on it. You need to pass this object to object () first, and then make appropriate modifications to the returned object.

The Object.create () method normalizes the concept of prototype inheritance. This method takes two parameters: the object that is the prototype of the new object, and the object that defines additional properties for the new object (the second optional).

Let person = {name: "Nicholas", age: 12, friends: ["Shelby", "Court", "Van"]}; let anotherPerson1 = Object.create (person); anotherPerson1.name = 'lll' anotherPerson1.friends.push (' zxc') console.log (anotherPerson1); / {name: 'lll'} console.log (person.friends); / / [Shelby',' Court', 'Van',' zxc']

/ /? The second parameter of Object.create () is the same as the second parameter of Object.defineProperties (): each new property is described by its own descriptor

Let anotherPerson = Object.create (person, {name: {value: "Greg"}}); console.log (anotherPerson.name); / / "Greg" parasitic inheritance

The idea behind parasitic inheritance is similar to parasitic constructors and factory patterns: create a function that implements inheritance, enhance the object in some way, and then return it.

Function createAnother (original) {/ / create an object let clone = Object (original) clone.sayHi = function () {/ / enhance the object console.log ("hi") in some way by calling the function; clone.sayName = function () {/ / enhance the object console.log (this.name) in some way; return clone / / return this object} let person = {name: "Nicholas", friends: ["Shelby", "Court", "Van"]}; let anotherPerson = createAnother (person); anotherPerson.sayHi (); / / "hi" anotherPerson.sayName () / / when "hi" is parasitic, the combination inherits function SuperType (name) {this.name = name this.colors = ['red',' blue']} SuperType.prototype.sayName = function () {console.log (this.name)} function SubType (name, age) {SuperType.call (this, name); / / the second call SuperType () this.age = age;} SubType.prototype = new SuperType () / / first call SuperType () SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function () {console.log (this.age);}; let instance1 = new SubType ('zxc', 12) console.log (instance1)

After the above code is executed, there will be two properties on the SubType.prototype: name and colors. They are all instance properties of SuperType, but are now prototype properties of SubType. When the SubType constructor is called, the SuperType constructor is also called, this time creating the instance properties name and colors on the new object. These two instance properties obscure properties with the same name on the prototype.

As shown in the figure, there are two sets of name and colors properties: one on the instance and the other on the prototype of SubType. This is the result of calling the SuperType constructor twice, but fortunately there is a way to solve this problem.

Parasitic combinatorial inheritance inherits properties by embezzling constructors, but uses hybrid prototype chain inheritance methods. The basic idea is not to assign a value to the subclass prototype by calling the parent class constructor, but to obtain a copy of the parent prototype. In the final analysis, parasitic inheritance is used to inherit the parent prototype, and then the new object returned is assigned to the subclass prototype. The basic pattern of parasitic composite inheritance is as follows:

Function inheritPrototype (subType, superType) {let prototype = object (superType.prototype); / / create object prototype.constructor = subType; / / enhanced object subType.prototype = prototype; / / assign object}

This inheritPrototype () function implements the core logic of parasitic combinatorial inheritance. This function takes two parameters: the subclass constructor and the parent constructor. Within this function, the first step is to create a copy of the parent prototype. Then, set the constructor property on the returned prototype object to solve the problem of losing the default constructor due to rewriting the prototype. Finally, assign the newly created object to the prototype of the subtype. As shown in the following example, the subtype prototype assignment in the previous example can be achieved by calling inheritPrototype ():

Function SuperType (name) {this.name = name; this.colors = ["red", "blue", "green"];} SuperType.prototype.sayName = function () {console.log (this.name);} function SubType (name, age) {SuperType.call (this, name) this.age = age;} inheritPrototype (SubType, SuperType); SubType.prototype.sayAge = function () {console.log (this.age);}

The SuperType constructor is called only once, avoiding unnecessary and unnecessary attributes on the SubType.prototype, so it can be said that this example is more efficient. Also, the prototype chain remains the same, so the instanceof operator and the isPrototypeOf () method are working properly. Parasitic combinatorial inheritance is the best mode for reference type inheritance.

After reading this, the article "what is the inheritance method of JavaScript" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.