Hello, everyone! I make milk tea without sugar. A front-end siege lion who likes drinking milk tea (haha, today is another day to touch fish (*￣))😁😁😁
preface
🙌 recently in the process of learning TS and reviewed the es5 inside the inheritance way, I believe that inheritance is also a lot of interviewers like to ask the knowledge point, especially a pen test questions always want us to write some inheritance method hahaha 😄, here with you review and consolidate
The implementation of JS inheritance
If you want to implement inheritance, of course you need a father, otherwise what is not inheritance parent class:
// Define an animal class
function Animal (name) {
/ / property
this.name = name || 'Animal';
// Instance method
this.sleep = function(){
console.log(this.name + 'Sleeping! ');
}
// Instance references attributes
this.features = [];
}
// Prototype method
Animal.prototype.eat = function() {
console.log(this.name + 'Eating! ');
};
Copy the codeConstructor implementation inheritance (also called object impersonation implementation inheritance)
Use.call() and.apply() to introduce the superclass constructor into the subclass function.
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name); //Tom
//instanceof determines if an element is on another element's prototype chain
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
cat.sleep() //Tom is sleeping!
cat.eat() Cat. Eat is not a function
Object impersonation can inherit properties and methods from the constructor, but not from the prototype chain
Copy the code❌ faults:
- An instance is not an instance of a parent class, only an instance of a subclass
- You can only inherit instance properties and methods from the parent class, not properties/methods from the parent class prototype
- Function reuse is not possible, each subclass has a copy of the parent class instance function, affecting performance
Each subclass has a copy of the parent function’s properties and methods whencatcallAnimalOn the method,AnimalThe inside of thethisPoints to thecat.AnimalThe inside of thethisThe properties and methods of thecatIf each instance of a subclass copies the attributes and methods of its parent class, it will consume a lot of memory. If the methods of the parent class change, the subclass instance cannot update the methods, because it has copied the original method as its own method.
2, prototype chain to achieve inheritance
< span style = “max-width: 100%; clear: both;
function Cat(){
}
Cat.prototype.play = function() {
console.log(this.name + 'Playing! ');
};
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
// Test Code
var cat = new Cat('zhangsan'); // Shortcoming 4
var cat1 = new Cat('lisi');
cat.name = 'Tom';
cat.features.push('red');
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
cat.play() Cat. Prototype = new Animal(); // Play is not a function
cat.eat() // Cat is eating! Solves the shortcoming of constructor implementation inheritance 2 <(*￣▽￣*)/
cat.sleep() // Cat is sleeping!
// Changes to members of the parent instance value type are not affected
console.log(cat.name); // "Tom"
console.log(cat1.name); // "cat"
// A change that refers to a type member of a parent class instance can defect 2 by affecting other subclass instances
console.log(cat.features); // ['red']
console.log(cat1.features); // ['red']
Copy the code❌ faults:
- If you want to add a property or method to a subclass, you can do so only in the
new Animal()After that, it cannot be placed in the constructor. As in the code example above, if the new method is placed before changing the orientation of the subclass’s prototype, the new method is uselessprototypeI’m already pointing to the parent class - All instances of a subclass share all of the attributes of the parent class. A subclass cannot have its own attributes. If you have multiple instances and one instance changes the value of the reference type of the parent class, then all of the instances will change
featuresAn array['red'], then the method will change in all instances - Multiple inheritance is not possible, because it is changing the direction of the prototype chain and cannot point to multiple parent classes, so it can only be single inheritance
- When creating a subclass, you cannot pass arguments to the parent class constructor because the attributes and methods of a subclass are invalid after changing the prototype-pointing of the subclass
3. Composite inheritance (composite prototype chain inheritance and borrowed constructor inheritance)
Core: By calling the parent class construction, inherit the attributes of the parent class and retain the advantages of parameter passing, and then by taking the parent class instance as the prototype of the subclass, realize function reuse key: combining the advantages of the above two modes, parameter passing and reuse
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal(); // Cat. Prototype = Animal. Prototype;
// Composite inheritance also needs to be fixed to the constructor point.
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
Copy the code❌ Disadvantages: This method calls the constructor of the parent class twice, generating two instances with the same properties in both the instance and the prototype
Copy inheritance
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Copy the code❌ faults:
- Cannot get a method whose parent class is not enumerable
for inTo traverseAnimalProperty, such as multi-checkboxcheckedProperties, which are non-enumerable properties - Low efficiency, high memory footprint
5. Parasitic Combination Inheritance (recommended)
Core: By parasitic way, the instance attribute of the parent class is cut off, so that when the construction of the parent class is called twice, the method/attribute of the two instances will not be initialized
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// Create a class with no instance methods
var Super = function(){};
Super.prototype = Animal.prototype;
// Use the instance as the prototype of the subclass
Cat.prototype = new Super();
}) ();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Copy the codeAfter the language
Hope to see here friends can move a thumbs-up 👍 oh, your support is the biggest encouragement to me 💪💪💪!!
