我理解的继承

怎么说呢。
昨天写完继承的总结,总感觉漏了点什么。今天一起说明了。

什么是继承

简而言之继承就是指一个对象之间使用另外一个对象的属性和方法。


如何继承

javascript并不提供原生的继承机制,不过还是有很多方法可以帮助我们实现javascript的继承。

例如
我们先定义两个类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//定义一个构造函数
var Show=function(name,age){
this.name=name;
this.age=age;
}
//在原型中定义他的方法
show.prototype.say=function(){
console.log("this.name");
}
//定义另外一个构造函数
var Person=function(sex){
this.sex=sex;
}
//在原型中定义他的方法
Person.prototype.init=function(){
console.log("this.sex");
}

我们知道这样通过new来创建上面两个构造函数的实例,可以通过proto来使用他们共用的方法,但是我想让Person创建出的实例也能访问show的方法和变量,应该怎么做呢?

如何继承方法


这里可以用到之前在this中提到的call这个方法,让Person的指针指向show这个构造函数,并传入对应的变量运行。

1
2
3
4
5
6
7
8
var Person=function(name,age,sex){
show.call(this,name,age);
this.sex=sex;
}
var p=new Person("acorn",23,"男");
p.name="acorn";
p.say()//报错
这样是可以获取到Show的属性了,那如果需要获取到Show原型中的方法 应该又应该怎么办了?

如何继承属性

在前面我们可以知道,函数都有一个prototype属性,里面一般存放的一些方法,我们现在要做的只用把Person的prototype变成Show的prototype就行了。

这里用到一个方法:Object.create

1
Person.prototype = Object.create(Show.prototype);

但是有点需要注意:

1
2
3
4
5
6
7
8
9
10
11
12
13
Person.prototype.init=function(){
console.log(this.sex);
}
Person.prototype=Object.create(Show.prototype);
//这样init方法就无效了。相当于被重置。
所以如果要添加新的方法。应该
Person.prototype=Object.create(Show.prototype);
Person.prototype.init=function(){
console.log(this.sex);
}

var p=new Person("acorn",23,"男");
p.say()// acorn


关于constructor

不过这里有个问题,我们知道prototype有个属性constructor指向的是这个构造函数本身,因为我们是复制的父类的prototype,这里的constructor指向的就是父类,而不是自己。

这里用到这个方法可以避免

1
2
3
4
5
function inhert(x,b){
var _prototype=Object.create(x.prototype);
_prototype.constructor=b;
b.prototype=_prototype;
}

最终形态的继承

一个完整的继承就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Show=function(name,age){
this.name=name;
this.age=age;
}
//在原型中定义他的方法
Show.prototype.say=function(){
console.log(this.name);
}
//定义另外一个构造函数
var Person=function(name,age,sex){
Show.call(this,name,age);
this.sex=sex;
}
//先复制 在定义
Person.prototype=Object.create(Show.prototype)

Person.prototype.init=function(){
console.log("this.sex");
}
var p=new Person("acorn",23,"男");