js的继承
2008-04-03 18:12
281 查看
每当我们说到js的继承时，在您的脑袋的第一反应就是prototype原型机制来实现。但是您是否使用过其他的方法来实现继承呢，或者您是否了解其他实现方式及各种不同的继承实现机制的优缺点呢？
好了，下面我们就来看看几种比较常见的继承实现吧。
1、 prototype方式
1
var BaseClass =function()
2
3
{
4
5
this.name = "3zfp";
6
7
this.age = 100;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
this.address = "ShenZhen";
22
23
}
24
25
Derived.prototype = new BaseClass();
26
27
var instance = new Derived();
28
29
instance.ToString();
30
这种方式最为简单，只需要让一个类的prototype为被继承的一个实例就ok，然后直接使用BaseClass的方法。
prototype属性是啥意思呢？prototype即为原型，每一个对象(由function 定义出来)都有一个默认的原型属性，该属性是个对象类型。并且该默认属性用来实现链的向上攀查。意思就是说，如果某个对象的属性不存在，那个将通过prototype属性对应的对象的来查找该对象的属性。如果prototype查找不到呢？ js会自动地找prototype的prototype属性对应的对象来查找，这样就通过prototype一直往上索引攀查，直到查找到了该属性或者prototype最后为空("undefined");
例如：上例中的instance.ToString()方法。js会先在instance实例中查找是否有ToString()方法，因为没有，所以查找Derived.prototype属性，而prototype 为 NewClass的一个实例，该实例有ToString()方法，于是调用成功；同样给instance 的 name 属性赋值时也是查找prototype来实现的。
注意，每一个对象得prototype都默认对应一个object对象，但是该对象不等于Object；如何验证呢？看如下代码：result 所得值为 false;
1
var foo = function()
{};
2
3
var result = (foo.prototype==Object);
这段代码的
以下几个需要注意：
2、apply方式
1
typeof(Object.prototype) == "object";
2
3
4
5
typeof(Object.prototype.prototype) == "undefined";
6
7
8
9
var obj = new Object();
10
11
typeof(obj.prototype) == "undefined";
12
13
14
15
var obj =
{};
16
17
typeof(obj.prototype) == "undefined";
18
19
20
21
1
var BaseClass =function()
2
3
{
4
5
this.name = "3zfp";
6
7
this.age = 100;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
BaseClass.apply(this,new Array());
22
23
this.address = "ShenZhen";
24
25
}
26
27
var instance = new Derived();
28
29
instance.ToString();
30
31
32
在这种方式下，我们最需要理解的就是apply函数的作用。
该方法普遍的解释为用A方法去替换B方法。第一个参数为B方法的对象本身，第二个参数为一个数组，该数组内的值集合为需要传递给A方法对应的参数列表，如果参数为空，即没有参数传递，则通过 new Array() 来传递，null无效。
一般的方式为：
但是在本例当中，apply方法执行了两步操作。
第一：将BaseClass以apply传递的Array数组作为初始化参数进行实例化。
第二：将新生成的实例对象的所有属性（name，age，ToString方法）复制到 instance实例对象。这样就实现了继承。
1
var foo = function()
2
3
{
4
5
this.fooA = function()
{
6
7
this.fooB.apply(this,new Array("sorry"));
8
9
}
10
11
this.fooB =function(str)
12
13
{
14
15
alert(str);
16
17
}
18
19
}
20
21
new foo().fooA();
22
3、call+prototype 方式
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
BaseClass.call(this,"3zfp",100);
22
23
this.address = "ShenZhen";
24
25
}
26
27
Derived.prototype = new BaseClass();
28
29
var instance = new Derived();
30
31
instance.ToString();
32
33
其实，call函数和apply方式有很类似的作用，都是用A方法去替换B方法，但是参数传递不一样，call方法的第一个参数为B方法的对象本身，和面的参数列不用Array对象包装，直接依次传递就可以。
为什么作用类似，call方式的实现机制却要多一条 Derived.prototype = new BaseClass(); 语句呢？那是因为call方法只实现了方法的替换而没有作对象属性的复制操作。
call方法实际上是做了如下几个操作：
例：
this.fooB.call(this,"sorry")执行了如下几个操作：google Map API 的继承就是使用这种方式。大家可以下载的参考参考(maps.google.com)。
1
var foo = function()
2
3
{
4
5
this.fooA = function()
{
6
7
this.fooB.call(this,"sorry");
8
9
}
10
11
this.fooB =function(str)
12
13
{
14
15
alert(str);
16
17
}
18
19
}
20
21
new foo().fooA();
22
23
则
1
this.temp = this.fooB;
2
3
this.temp("sorry");
4
5
delete (this.temp);
6
其实，
4、prototype.js中的实现方式
1
Object.extend = function(destination, source)
{
2
3
for (property in source)
{
4
5
destination[property] = source[property];
6
7
}
8
9
return destination;
10
11
}
12
13
var BaseClass =function(name,age)
{
14
15
this.name = name;
16
17
this.age = age;
18
19
this.ToString = function()
{
20
21
return this.name+" " +this.age;
22
23
}
24
25
}
26
27
var Derived =function()
28
29
{
30
31
BaseClass.call(this,"foo",100);
32
33
this.address = "singapore";
34
35
this.ToString = function()
{
36
37
var string = Derived.prototype.ToString.call(this);
38
39
return string +" "+ this.address;
40
41
}
42
43
}
44
45
Object.extend(Derived.prototype,new BaseClass());
46
47
var instance = new Derived();
48
49
document.write(instance.ToString());
该方式，实际上是显式的利用了apply的原理来实现继承。先 var temp = new BaseClass()，再将 temp 的属性遍历复制到Derived.prototype中。for (property in source) 表示遍历某个对象的所有属性。但是私有属性无法遍历。例:
"name age"而没有"innerString" 和 "innerToString()";具体原理，以后有机会可以解释（包括私有变量，私有函数，私有函数的变量可访问性等等）。上面总结了种种继承方式的实现。但是每种方法都有其优缺点。
1
var foo = function()
2
3
{
4
5
var innerString = "";
6
7
this.name = "3zfp";
8
9
this.age = 100;
10
11
function innerToString()
12
13
{
14
15
return innerString;
16
17
}
18
19
}
20
21
var f =new foo();
22
23
var eles = "";
24
25
for (property in f)
26
27
{
28
29
eles+=" "+property;
30
31
}
32
33
document.write(eles);
34
35
输出为
第一种方式，如何实现如下需求，需要显示 "3zfp__100"; "undefined__undefined"。也就是说name和age没有被赋值。
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function(name,age)
18
19
{
20
21
this.address = "ShenZhen";
22
23
}
24
25
Derived.prototype = new BaseClass();
26
27
var instance = new Derived("3zfp",100);
28
29
document.write(instance.ToString());
30
31
我们通过运行可以发现，实际上输出的是
oh,my god!天无绝人之路。第二和第三种方法可以实现，具体如下：
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function(name,age)
18
19
{
20
21
BaseClass.apply(this,new Array(name,age));
22
23
this.address = "ShenZhen";
24
25
}
26
27
var instance = new Derived("3zfp",100);
28
29
document.write(instance.ToString());
30
31
______________________________________________
32
33
---------------------------------------------------------------------
34
35
var BaseClass =function(name,age)
36
37
{
38
39
this.name = name;
40
41
this.age = age;
42
43
this.ToString = function()
{
44
45
return this.name+" " +this.age;
46
47
}
48
49
}
50
51
var Derived = function(name,age)
52
53
{
54
55
BaseClass.call(this,name,age);
56
57
this.address = "ShenZhen";
58
59
}
60
61
Derived.prototype = new BaseClass();
62
63
var instance = new Derived("3zfp",100);
64
65
66
67
document.write(instance.ToString());
68
69
70
但是用apply方法也还是有缺点的，为什么？在js中，我们有个非常重要的运算符就是"instanceof"，该运算符用来比较某个对向是否为某种类型。对于继承，我们除了是属于 Derived类型，也应该是BaseClass类型，但是。apply方式返回值为false((instance instanceof BaseClass) == false).由于prototype.js使用了类似apply的方式，所以也会出现这个问题。
啊，终极方法就是 call+prototype方式了，还是google牛X。您可以试一下是否正确((instance instanceof BaseClass) == true)。
最后，就是多重继承了，由于js中prototype只能对应一个对象，因此无法实现真正意义上的多重继承。有一个js库模拟了多重继承，但是该库也额外重写了 instanceOf 方法，用 _instanceOf和_subclassOf 函数来模拟判断。该库的名字叫modello.js，感兴趣的可以搜索下载。
好了，下面我们就来看看几种比较常见的继承实现吧。
1、 prototype方式
1
var BaseClass =function()
2
3
{
4
5
this.name = "3zfp";
6
7
this.age = 100;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
this.address = "ShenZhen";
22
23
}
24
25
Derived.prototype = new BaseClass();
26
27
var instance = new Derived();
28
29
instance.ToString();
30
这种方式最为简单，只需要让一个类的prototype为被继承的一个实例就ok，然后直接使用BaseClass的方法。
prototype属性是啥意思呢？prototype即为原型，每一个对象(由function 定义出来)都有一个默认的原型属性，该属性是个对象类型。并且该默认属性用来实现链的向上攀查。意思就是说，如果某个对象的属性不存在，那个将通过prototype属性对应的对象的来查找该对象的属性。如果prototype查找不到呢？ js会自动地找prototype的prototype属性对应的对象来查找，这样就通过prototype一直往上索引攀查，直到查找到了该属性或者prototype最后为空("undefined");
例如：上例中的instance.ToString()方法。js会先在instance实例中查找是否有ToString()方法，因为没有，所以查找Derived.prototype属性，而prototype 为 NewClass的一个实例，该实例有ToString()方法，于是调用成功；同样给instance 的 name 属性赋值时也是查找prototype来实现的。
注意，每一个对象得prototype都默认对应一个object对象，但是该对象不等于Object；如何验证呢？看如下代码：result 所得值为 false;
1
var foo = function()
{};
2
3
var result = (foo.prototype==Object);
这段代码的
以下几个需要注意：
2、apply方式
1
typeof(Object.prototype) == "object";
2
3
4
5
typeof(Object.prototype.prototype) == "undefined";
6
7
8
9
var obj = new Object();
10
11
typeof(obj.prototype) == "undefined";
12
13
14
15
var obj =
{};
16
17
typeof(obj.prototype) == "undefined";
18
19
20
21
1
var BaseClass =function()
2
3
{
4
5
this.name = "3zfp";
6
7
this.age = 100;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
BaseClass.apply(this,new Array());
22
23
this.address = "ShenZhen";
24
25
}
26
27
var instance = new Derived();
28
29
instance.ToString();
30
31
32
在这种方式下，我们最需要理解的就是apply函数的作用。
该方法普遍的解释为用A方法去替换B方法。第一个参数为B方法的对象本身，第二个参数为一个数组，该数组内的值集合为需要传递给A方法对应的参数列表，如果参数为空，即没有参数传递，则通过 new Array() 来传递，null无效。
一般的方式为：
但是在本例当中，apply方法执行了两步操作。
第一：将BaseClass以apply传递的Array数组作为初始化参数进行实例化。
第二：将新生成的实例对象的所有属性（name，age，ToString方法）复制到 instance实例对象。这样就实现了继承。
1
var foo = function()
2
3
{
4
5
this.fooA = function()
{
6
7
this.fooB.apply(this,new Array("sorry"));
8
9
}
10
11
this.fooB =function(str)
12
13
{
14
15
alert(str);
16
17
}
18
19
}
20
21
new foo().fooA();
22
3、call+prototype 方式
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function()
18
19
{
20
21
BaseClass.call(this,"3zfp",100);
22
23
this.address = "ShenZhen";
24
25
}
26
27
Derived.prototype = new BaseClass();
28
29
var instance = new Derived();
30
31
instance.ToString();
32
33
其实，call函数和apply方式有很类似的作用，都是用A方法去替换B方法，但是参数传递不一样，call方法的第一个参数为B方法的对象本身，和面的参数列不用Array对象包装，直接依次传递就可以。
为什么作用类似，call方式的实现机制却要多一条 Derived.prototype = new BaseClass(); 语句呢？那是因为call方法只实现了方法的替换而没有作对象属性的复制操作。
call方法实际上是做了如下几个操作：
例：
this.fooB.call(this,"sorry")执行了如下几个操作：google Map API 的继承就是使用这种方式。大家可以下载的参考参考(maps.google.com)。
1
var foo = function()
2
3
{
4
5
this.fooA = function()
{
6
7
this.fooB.call(this,"sorry");
8
9
}
10
11
this.fooB =function(str)
12
13
{
14
15
alert(str);
16
17
}
18
19
}
20
21
new foo().fooA();
22
23
则
1
this.temp = this.fooB;
2
3
this.temp("sorry");
4
5
delete (this.temp);
6
其实，
4、prototype.js中的实现方式
1
Object.extend = function(destination, source)
{
2
3
for (property in source)
{
4
5
destination[property] = source[property];
6
7
}
8
9
return destination;
10
11
}
12
13
var BaseClass =function(name,age)
{
14
15
this.name = name;
16
17
this.age = age;
18
19
this.ToString = function()
{
20
21
return this.name+" " +this.age;
22
23
}
24
25
}
26
27
var Derived =function()
28
29
{
30
31
BaseClass.call(this,"foo",100);
32
33
this.address = "singapore";
34
35
this.ToString = function()
{
36
37
var string = Derived.prototype.ToString.call(this);
38
39
return string +" "+ this.address;
40
41
}
42
43
}
44
45
Object.extend(Derived.prototype,new BaseClass());
46
47
var instance = new Derived();
48
49
document.write(instance.ToString());
该方式，实际上是显式的利用了apply的原理来实现继承。先 var temp = new BaseClass()，再将 temp 的属性遍历复制到Derived.prototype中。for (property in source) 表示遍历某个对象的所有属性。但是私有属性无法遍历。例:
"name age"而没有"innerString" 和 "innerToString()";具体原理，以后有机会可以解释（包括私有变量，私有函数，私有函数的变量可访问性等等）。上面总结了种种继承方式的实现。但是每种方法都有其优缺点。
1
var foo = function()
2
3
{
4
5
var innerString = "";
6
7
this.name = "3zfp";
8
9
this.age = 100;
10
11
function innerToString()
12
13
{
14
15
return innerString;
16
17
}
18
19
}
20
21
var f =new foo();
22
23
var eles = "";
24
25
for (property in f)
26
27
{
28
29
eles+=" "+property;
30
31
}
32
33
document.write(eles);
34
35
输出为
第一种方式，如何实现如下需求，需要显示 "3zfp__100"; "undefined__undefined"。也就是说name和age没有被赋值。
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function(name,age)
18
19
{
20
21
this.address = "ShenZhen";
22
23
}
24
25
Derived.prototype = new BaseClass();
26
27
var instance = new Derived("3zfp",100);
28
29
document.write(instance.ToString());
30
31
我们通过运行可以发现，实际上输出的是
oh,my god!天无绝人之路。第二和第三种方法可以实现，具体如下：
1
var BaseClass =function(name,age)
2
3
{
4
5
this.name = name;
6
7
this.age = age;
8
9
this.ToString = function()
{
10
11
return this.name+" " +this.age;
12
13
}
14
15
}
16
17
var Derived = function(name,age)
18
19
{
20
21
BaseClass.apply(this,new Array(name,age));
22
23
this.address = "ShenZhen";
24
25
}
26
27
var instance = new Derived("3zfp",100);
28
29
document.write(instance.ToString());
30
31
______________________________________________
32
33
---------------------------------------------------------------------
34
35
var BaseClass =function(name,age)
36
37
{
38
39
this.name = name;
40
41
this.age = age;
42
43
this.ToString = function()
{
44
45
return this.name+" " +this.age;
46
47
}
48
49
}
50
51
var Derived = function(name,age)
52
53
{
54
55
BaseClass.call(this,name,age);
56
57
this.address = "ShenZhen";
58
59
}
60
61
Derived.prototype = new BaseClass();
62
63
var instance = new Derived("3zfp",100);
64
65
66
67
document.write(instance.ToString());
68
69
70
但是用apply方法也还是有缺点的，为什么？在js中，我们有个非常重要的运算符就是"instanceof"，该运算符用来比较某个对向是否为某种类型。对于继承，我们除了是属于 Derived类型，也应该是BaseClass类型，但是。apply方式返回值为false((instance instanceof BaseClass) == false).由于prototype.js使用了类似apply的方式，所以也会出现这个问题。
啊，终极方法就是 call+prototype方式了，还是google牛X。您可以试一下是否正确((instance instanceof BaseClass) == true)。
最后，就是多重继承了，由于js中prototype只能对应一个对象，因此无法实现真正意义上的多重继承。有一个js库模拟了多重继承，但是该库也额外重写了 instanceOf 方法，用 _instanceOf和_subclassOf 函数来模拟判断。该库的名字叫modello.js，感兴趣的可以搜索下载。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现继承的几种方式详述（推荐）
- js实现继承
- js真正的原型继承
- js继承
- 用Ext实现js方法的继承,以及扩展Ext组件的开发
- 【cocos2d-x从c++到js】04：cocos2d-x for js中的继承 推荐
- js实现继承
- js之原型链与继承
- js的三种继承方式及其优缺点
- js 继承和原型链
- js继承的三种方式
- javascript中的继承（JS基于原型链的继承），以及JS中的call和apply函数
- js中的prototype和基于prototype的继承总结
- js继承
- js继承
- javascript(js)创建对象的模式与继承的几种方式
- js继承
- JS实现继承的几种方式
- js继承有5种实现方式