Javascript prototype实现继承

发表于 | 分类于

前面讲过使用apply与call实现继承，使用prototype原型的方式也可以实现javascript的继承。

apply的继承实际上是this对象劫持的方式实现的，直接把当前对象替换成父类对象中的this。而prototype是通过原型链的方式继承，通过把父类的方法属性克隆给子类。

下面是实例代码：

Person类：

1
2
3
4
5
6
7
8
function Person(name,age){
　　this.name = name;
　　this.age = age;
}

Person.prototype.showName = function(){
　　console.log("my Name is: " + this.name);
}

通过实例化对象之后可以调用：

1
2
var people = new Person("jenkiHuang",24);
people.showName(); //out: my Name is: jenkiHuang

MyInfo类:

1
2
3
4
5
6
7
8
9
function MyInfo() {}

//使用原型方式继承
MyInfo.prototype = new Person("jenkiHuang",24);
var my= new MyInfo();
MyInfo.prototype.height = "173";
MyInfo.prototype.showHeight = function(){
　　console.log("my Height is: " + this.height);
}

代码成功运行，使用原型的方式也可以达到继承的目的。

另外一种原型扩展的方法，直接使用对象集合的形式，但是这以这种形式扩展的方法需要修正constructor。

1
2
3
4
5
6
7
8
9
10
11
Person.prototype = {
　　constructor: Person,
　　jump: function () {
　　　　console.log('person ' + this.name + ' jump');
　　}
}

// 这种方式扩展prototype则无需修正constructor
Person.prototype.jump = function () {
　　console.log('person ' + this.name + ' jump');
}

类继承函数

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 构建类之间的继承关系
 * 
 * @param {Function} subClass 子类函数
 * @param {Function} superClass 父类函数
 */
function inherits(subClass, superClass) {
    var F = new Function();
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}