Inheritance and characteristics (extend) javascript in

js Inheritance: subclasses shared properties and methods of the parent class, js inheritance are implemented based on the prototype.

js inherited divided into the following succession:

First, let's define a class of animal `

function Animal (name) {
    // 属性
    this.name = name;
    // 实例方法
    this.say= function(){
      console.log("My name is "+this.name);
    }
}
// 原型方法
Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃:' + food);
};

1, the prototype chain inheritance: the prototype points to an instance of a subclass of the class of the parent

function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';


var cat = new Cat();
console.log(cat.name);
cat.say();
cat.eat('fish');
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
Prototype chain to inherit characteristics
  1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  2.父类新增原型方法/原型属性,子类都能访问到
  3.简单,易于实现
Prototype chain to inherit shortcomings
1.要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中
2.无法实现多继承
3.来自原型对象的引用属性是所有实例共享的
4.创建子类实例时,无法向构造函数传参

2, structure inherited (call, apply inheritance)

function Cat(name){
    Animal.call(this,name);
}

var cat = new Cat("Tom");
console.log(cat.name);
cat.say();
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Structure inherited characteristics:

1, solution 1, the sub-class share the parent class instance attributes cited problem
2, subclassing instance, the parameters can be passed to the parent class
3, may be implemented multiple inheritance (call plurality parent class object)

Structure inherited disadvantages:

1, examples of the instance of the parent class is not the only instance of a subclass
2, can inherit attributes and methods of the parent class instance, the prototype can not inherit the property / method
3, the function can not be achieved by multiplexing, for each instance of the parent class has a subclass copy function, affecting performance

3, a copy of succession

function Cat(name){
    var animal = new Animal(name);
    for(var key in animal){
        Cat.prototype[key] = animal[key];
    }
}
// Test Code
var cat = new Cat("Tom");
console.log(cat.name);
cat.say();
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
Copy inherited characteristics:
1、支持多继承
Copy inherited shortcoming:
1、效率较低,内存占用高(因为要拷贝父类的属性)
2、无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

4, a combination of inherited (combinations and configurations prototype inheritance chain)

function Cat(name){
    Animal.call(this,name);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
cat.say();
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
A combination of inherited characteristics

1, to make up for the shortcomings of mode 2, can inherit instance property / method, can inherit prototype property / method
, both instances of subclasses 2, examples thereof are also the parent class
3, there is no reference attributes sharing
can pass argument
4, the function reusable

A combination of inherited disadvantages:
1、调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

5, a combination of parasitic inheritance

function Cat(name){
    Animal.call(this);
    this.name = name;
}
(function(){
    // 创建一个没有实例方法的类
    var Super = function(){};
    Super.prototype = Animal.prototype;
    //将实例作为子类的原型
    Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
cat.say();
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

Parasitic combination of inherited characteristics: perfect
parasitic combination of inherited disadvantages: to achieve more complex

6, ES6 inheritance (syntactic sugar)

class Animal{
    constructor(name){
        this.name = name;
    }
    say(){
        alert("My name is "+this.name);
    }
    eat(food){
        alert(this.name+" is eating "+food);
    }
}
class Cat extends Animal{
    constructor(name){
        super(name);
    }
}

var  tom = new Cat("Tom");
tom.say();
tom.eat("apple");
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

ES6 inherited characteristics: The most comfortable

Published an original article · won praise 0 · Views 16

Guess you like

Origin blog.csdn.net/qq_42259050/article/details/104464793