继承的概念

在JavaScript中，继承就是当前对象可以使用其他对象的方法和属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var animal = {
    name:"Animal",
    sex:"male",
    age:5,
    bark:function(){
        console.log("Animal bark");
    }
};
var dog = {};
//当前有两个对象，一个animal,一个dog
//dog没有属性和方法
//但是我们知道，dog属于animal，所以animal的方法和属性，都可以被dog使用
//如何让dog可以使用animal的属性和方法呢？
//通过继承就可以实现

继承的实现方式

在上一节内容中，最终的结论就是可以通过继承来让dog对象可以使用animal对象的属性和方法，那怎么实现继承呢？

1. 最简单的继承实现

直接遍历父对象的属性，将所有的属性加到当前对象上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var animal = {
    name:"Animal",
    sex:"male",
    age:5,
    bark:function(){
    console.log("Animal bark");
    }
};
var dog = {};
for (var k in animal){
    dog[k]= animal[k];
}

2. 原型继承

每一个构造函数都有prototype原型属性，通过构造函数创建出来的对象都继承自该原型属性。所以可以通过更改构造函数的原型属性来实现继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function Dog(){
    this.type = "yellow Dog";
}
function extend(obj1, obj2){
    for (var k in obj2){
        obj1[k] = obj2[k];    
    }
};
//使用混入的方式，将属性和方法添加到构造函数的原型属性上，构造函数所创建出来的实例就都有了这些属性和方法。
extend(Dog.prototype, {
    name:"",
    age:"",
    sex:"",
    bark:function(){}
})
//使用面向对象的思想把extend方法重新封装
//extend是扩展的意思，谁要扩展就主动调用extend这个方法
//所以extend应该是对象的方法，那现在我们要扩展的是构造函数的原型对象
//所以给构造函数的原型对象添加一个extend方法
//如下：
Dog.prototype.extend = function(obj){
    for (var k in obj){
        this[k]=obj[k];
    }
}
//调用方式就变成了下面这种形式
Dog.prototype.extend({
    name:"",
    age:"",
    sex:"",
    bark:function(){}
});

最后更新： 2017年09月25日 22:02

原始链接： http://yoursite.com/2017/09/23/js高级中的继承问题/