js中一般怎么实现继承

学习一下js的继承实现。

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Animal(name){
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + " 正在睡觉。");
}
}
// 原型方法
Animal.prototype.eat = function(food){
console.log(this.name + " 正在吃 "+food);
}

// 子类
function Tiger(){}
Tiger.prototype = new Animal();
Tiger.prototype.name = "Tiger";

var tiger = new Tiger();
console.log(tiger.name);
console.log(tiger.eat('sleep'));
console.log(tiger.sleep());
console.log(tiger instanceof Animal); //true
console.log(tiger instanceof Tiger); //true

效果
原型链

##特点

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  2. 父类新增原型方法/原型属性,子类都能访问到
  3. 简单,易于实现

##缺点:

  1. 可以在子类构造函数中,为子类实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行
  2. 无法实现多继承
  3. 来自原型对象的引用属性是所有实例共享的
  4. 创建子类实例时,无法向父类构造函数传参

TODO:写这个的时候还是有点蒙。

组合继承同上

Object.create实现继承

1
2
3
4
5
6
7
8
9
10
11
function parent(val){
this.x = val;
}
function child(val){
parent.call(this,val);
this.y = val;
}
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;

const child = new child(1);

Class 继承