- When we talk about JS inheritance, let’s first understand what a prototype is and what a prototype chain is. Here if JS foundation is not very solid people will have a question: “prototype is not the prototype chain?” . No, they’re different. They’re very different. So let’s explain the difference.
- · Every constructor has a Prototype property, which points to a prototype object. The stereotype object to which the stereotype attribute points is called a stereotype
- (2) : Stereotype chain: The stereotype property of each constructor points chained to the stereotype object, and each stereotype object has a constructor property that points to the constructor (default to the constructor if undefined). This forms a chain structure called the stereotype chain.
- Here is a common sense. The underlying prototype chain of all Object classes eventually points to the prototype of the browser’s native Object. So all Object classes can call Object’s prototype methods. Here’s an example
2. Getting back to the subject, there are several ways of object inheritance, and how are they implemented? Let’s see.
- ①· Structural inheritance (of course, there are three ways to implement structural inheritance, as follows)
The technique of borrowing constructors (sometimes called forging objects or classical inheritance). The basic idea of this technique is fairly simple: call the supertype constructor inside the subtype constructor. Remember that functions are simply objects that execute code in a particular environment, so you can also execute constructors on (future) newly created objects by using the apply() and call() methods, as shown below
- Pretend to be inherited
function Person(name,age){ this.name = name ; this.age = age; This. ShowName = function(){console.log(' I am '+name); }} /** * @description runs the function in its own runtime environment, where this refers to Child, */ function Child(){this.temp = Person; // Create a self-caching function and assign the parent constructor this.temp(' liend ','26'); delete this.temp; } var child = new child (); child.showName(); // I am Li DuanCopy the code- Bind this to the implementation
function Person(name,age){ this.name = name ; this.age = age; This. ShowName = function(){console.log(' I am '+name); }} /** * @description runs the function in its own runtime environment, where this refers to Child, */ function Child(){person.bind (this)(' liend ','26'); } var child = new child (); child.showName(); // I am Li DuanCopy the code- Call
function Person(name,age){ this.name = name ; this.age = age; This. ShowName = function(){console.log(' I am '+name); }} function Child(){Person. Call (this,' this ','26'); }; var child = new Child(); child.showName();Copy the code- Apply mode implementation
function Person(name,age){ this.name = name ; this.age = age; This. ShowName = function(){console.log(' I am '+name); Child () {}} function Person. Apply (this, [' Li Duan ', '26']); }; var child = new Child(); child.showName();Copy the code- ② prototype inheritance
function Person(name,age){ this.name = name; this.age = age; } Person. Prototype. SayHello = function () {alert (' use prototypes to get + enclosing name); } var per = new Person(' 26','26'); per.sayHello(); Function Student(){}; Student. Prototype = new Person(' 1 ','23') var stu = new Student(); stu.sayHello();Copy the code- ③· Combinatorial inheritance (combinatorial construction and prototypical inheritance)
Combination inheritance, sometimes called pseudo-classical inheritance, refers to an inheritance pattern that combines a chain of archetypes and techniques borrowed from constructors to take advantage of the best of both. The idea behind this is to use stereotype chains to inherit stereotype attributes and methods, while borrowing constructors to inherit instance attributes. In this way, function reuse is achieved by defining methods on prototypes, while ensuring that each instance has its own attributes. Let’s look at an example
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; Function SubType(name, age){// Inherit supertype. call(this, name); this.age = age; } // subtype.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); / / 27Copy the code- ④ parasitic inheritance
Parasitic inheritance was a line of thought closely associated with parasitic inheritance and was also popularized by Crockford. The idea of parasitic inheritance is similar to that of the parasitic constructor and factory pattern, which is to create a function that simply encapsulates the inheritance process, enhances the object internally in some way, and finally returns the object as if it had really done all the work. The following code demonstrates the parasitic inheritance pattern.
In this example, the createAnother() function takes an argument, which is the object that will be the basis for the new object. This object(Original) is then passed to the object() function, which assigns the result to Clone. Add a new method sayHi() to the Clone object and return it. You can use createAnother() like this:
function createAnother(original){ var clone = Object(original); SayHi = function(){// Somehow enhance the object alert("hi"); }; return clone; Var person = {name: "Nicholas", friends: ["Shelby", "Court", "Van"]}; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi"Copy the code- ⑤ parasitic combinatorial inheritance
Parasitic combinatorial inheritance, that is, inheriting properties by borrowing constructors and inheriting methods through a hybrid form of stereotype chains. The basic idea behind this is that instead of calling the constructor of the supertype to specify the stereotype of the subtype, all you need is a copy of the stereotype of the supertype. Essentially, you use parasitic inheritance to inherit the stereotype of the supertype and then assign the result to the stereotype of the subtype. The basic pattern of parasitic combinatorial inheritance is shown below
function inheritPrototype(subType, superType){ var prototype = Object(superType.prototype); Prototype. constructor = subType; // Add object subtype. prototype = prototype; } function SuperType(name){this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){ alert(this.age); };Copy the code