js 对象的继承

前言:面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。

1、原型式继承

JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。也就是说,如果属性和方法定义在原型上,那么所有实例对象就能共享。

借用构造函数的prototype属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
 
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
 
cat1.color // 'white'
cat2.color // 'white'
 
//如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。
 
cat1.color = 'black';
 
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

  总结一下,原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因,而实例对象可以视作从原型对象衍生出来的子对象。

 2、构造函数式继承

1
2
3
4
5
6
7
8
9
10
function Sub(value) {
  Super.call(this);
  this.prop = value;
}
//上面代码中,Sub是子类的构造函数,this是子类的实例。在实例上调用父类的构造函数Super,就会让子类实例具有父类实例的属性。
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.method = '...';
 
//上面代码中,Sub.prototype是子类的原型,要将它赋值为Object.create(Super.prototype),而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作,会连父类的原型Super.prototype一起修改掉。

  

3、混入

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 M1() {
  this.hello = 'hello';
}
 
function M2() {
  this.world = 'world';
}
 
function S() {
  M1.call(this);
  M2.call(this);
}
 
// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);
 
// 指定构造函数
S.prototype.constructor = S;
 
var s = new S();
s.hello // 'hello'
s.world // 'world'

  子类S同时继承了父类M1M2

posted @   虚无——缥缈  阅读(231)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示