How to implement JS inheritance
Since we want to implement inheritance, first we have to have a parent class, the code is as follows:
// 定义一个动物类function Animal (name) { // 属性 this.name = name || ‘Animal‘; // 实例方法 this.sleep = function(){ console.log(this.name + ‘正在睡觉!‘); }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name + ‘正在吃:‘ + food);};
1. Prototype chain inheritance
Core: prototype An instance of a parent class as a child class
function Cat(){ }Cat.prototype = new Animal();Cat.prototype.name = ‘cat‘;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.eat(‘fish‘));console.log(cat.sleep());console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true
Characteristics:
- A very purely inherited relationship, an instance of a subclass, and an instance of the parent class.
- The parent class adds a new prototype method/prototype property that the subclass can access to
- Simple and easy to implement
Disadvantages:
- To add properties and methods to a subclass, you must
new Animal()
execute after such a statement and not put it in the constructor
- Unable to implement multiple inheritance
- The reference property from the prototype object is shared by all instances (see Appendix Code for details: Example 1)
- Cannot pass parameter to parent class when creating child class instance
Recommended index: ★ (3, 42 major fatal defects)
2017-8-17 10:21:43 Add: Thank MMHS for pointing out. Bad description in disadvantage 1: You can add instance properties to a cat instance in the cat constructor. If you want to add a prototype property and method, you must new Animal()
do so after the statement is placed.
2. Construction Inheritance
Core: Use the constructor of the parent class to enhance the subclass instance, which is equivalent to copying the instance property of the parent class to the subclass (useless to the prototype)
function Cat(name){ Animal.call(this); this.name = name || ‘Tom‘;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true
Characteristics:
- Resolves an issue where subclass instances share parent class reference properties in 1
- When you create a child class instance, you can pass parameters to the parent class
- Multiple inheritance can be implemented (call multiple parent objects)
Disadvantages:
- The instance is not an instance of the parent class, just an instance of the child class
- Only instance properties and methods of the parent class can be inherited and cannot inherit the prototype properties/methods
- Function reuse is not possible, each subclass has a copy of the parent class instance function, which affects performance
Recommended index: ★ (Disadvantage 3)
3. Instance Inheritance
Core: adds a new attribute to the parent class instance, returning as a subclass instance
function Cat(name){ var instance = new Animal(); instance.name = name || ‘Tom‘; return instance;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // false
Characteristics:
- Does not restrict the invocation, whether it is
new 子类()
or 子类()
, the returned object has the same effect
Disadvantages:
- Instance is an instance of the parent class, not an instance of the child class
- Multiple inheritance is not supported
Recommended Index: ★
4. Copy Inheritance
function Cat(name){ var animal = new Animal(); for(var p in animal){ Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || ‘Tom‘;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true
Characteristics:
- Support Multiple inheritance
Disadvantages:
- Low efficiency and high memory consumption (because you want to copy the properties of the parent class)
- Unable to get parent class non-enumerable method (non-enumerable method, cannot be accessed using for in)
Recommended index: ★ (disadvantage 1)
5. Combination Inheritance
Core: by calling the parent class construct, inheriting the property of the parent class and preserving the advantages of the pass parameter, and then implementing the function reuse by using the parent class instance as the subclass prototype
function Cat(name){ Animal.call(this); this.name = name || ‘Tom‘;}Cat.prototype = new Animal();// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // true
Characteristics:
- compensate for the defect in mode 2, can inherit instance properties/methods, or inherit prototype properties/Methods
- is both an instance of a subclass and an instance of the parent class
- There is no reference attribute sharing issue
- Can be passed the parameter
- Functions can be reused
Disadvantages:
- A two-time parent constructor was called, and two instances were generated (the subclass instance masked the sub-class prototype)
Recommendation index: ★★★★ (consumes only a bit more memory)
6. Parasitic combination inheritance
Core: by parasitic way, the instance property of the parent class is cut off, so that when two times the construction of the parent class is called, the two instance method/property is not initialized, the disadvantage of avoiding the combination inheritance
function Cat(name){ Animal.call(this); this.name = name || ‘Tom‘;}(function(){ // 创建一个没有实例方法的类 var Super = function(){}; Super.prototype = Animal.prototype; //将实例作为子类的原型 Cat.prototype = new Super();})();// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); //true
Characteristics:
- Perfect
Disadvantages:
- Achieve more complex
Recommendation index: ★★★★ (achieve complexity, deduct a star)
Appendix Code:
Example one:
function Animal (name) { // 属性 this.name = name || ‘Animal‘; // 实例方法 this.sleep = function(){ console.log(this.name + ‘正在睡觉!‘); } //实例引用属性 this.features = [];}function Cat(name){}Cat.prototype = new Animal();var tom = new Cat(‘Tom‘);var kissy = new Cat(‘Kissy‘);console.log(tom.name); // "Animal"console.log(kissy.name); // "Animal"console.log(tom.features); // []console.log(kissy.features); // []tom.name = ‘Tom-New Name‘;tom.features.push(‘eat‘);//针对父类实例值类型成员的更改,不影响console.log(tom.name); // "Tom-New Name"console.log(kissy.name); // "Animal"//针对父类实例引用类型成员的更改,会通过影响其他子类实例console.log(tom.features); // [‘eat‘]console.log(kissy.features); // [‘eat‘]原因分析:关键点:属性查找过程执行tom.features.push,首先找tom对象的实例属性(找不到),那么去原型对象中找,也就是Animal的实例。发现有,那么就直接在这个对象的features属性中插入值。在console.log(kissy.features); 的时候。同上,kissy实例上没有,那么去原型上找。刚好原型上有,就直接返回,但是注意,这个原型对象中features属性值已经变化了。
From: http://www.cnblogs.com/humin/p/4556820.html
JavaScript Inheritance Implementation