js继承探讨

squirrelRao

浏览: 68017 次
性别:
来自: 北京

最近访客更多访客>>

jnletao

cappuccinoanan

kentleo

XayLei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascripte apply call

全文转载自：http://www.blogjava.net/baoyaer/articles/105481.html

每当我们说到 js 的继承时，在您的脑袋的第一反应就是 prototype 原型机制来实现。但是您是否使用过其他的方法来实现继承呢，或者您是否了解其他实现方式及各种不同的继承实现机制的优缺点呢？

好了，下面我们就来看看几种比较常见的继承实现吧。

1、 prototype方式

var BaseClass = function ()
2

{
4

this .name = " 3zfp " ;
6

this .age = 100 ;
8

this .ToString = function () {
10

return this .name + " " + this .age;
12

}
14

}
16

var Derived = function ()
18

{
20

this .address = " ShenZhen " ;
22

}
24

Derived.prototype = new BaseClass();
26

var instance = new Derived();
28

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 ；如何验证呢？看如下代码：

var foo = function () {} ;
2

var result = (foo.prototype == Object);

这段代码的result 所得值为 false;

以下几个需要注意：

typeof (Object.prototype) == " object " ;
2

typeof (Object.prototype.prototype) == " undefined " ;
6

var obj = new Object();
10

typeof (obj.prototype) == " undefined " ;
12

var obj = {} ;
16

typeof (obj.prototype) == " undefined " ;
18

2 、 apply 方式

var BaseClass = function ()
2

{
4

this .name = " 3zfp " ;
6

this .age = 100 ;
8

this .ToString = function () {
10

return this .name + " " + this .age;
12

}
14

}
16

var Derived = function ()
18

{
20

BaseClass.apply( this , new Array());
22

this .address = " ShenZhen " ;
24

}
26

var instance = new Derived();
28

instance.ToString();
30

在这种方式下，我们最需要理解的就是 apply 函数的作用。

该方法普遍的解释为用 A 方法去替换 B 方法。第一个参数为 B 方法的对象本身，第二个参数为一个数组，该数组内的值集合为需要传递给 A 方法对应的参数列表，如果参数为空，即没有参数传递，则通过 new Array() 来传递， null 无效。

一般的方式为：

但是在本例当中， apply 方法执行了两步操作。

第一：将 BaseClass 以 apply 传递的 Array 数组作为初始化参数进行实例化。

第二：将新生成的实例对象的所有属性（ name ， age ， ToString 方法）复制到 instance 实例对象。这样就实现了继承。

var foo = function ()
2

{
4

this .fooA = function () {
6

this .fooB.apply( this , new Array( " sorry " ));
8

}
10

this .fooB = function (str)
12

{
14

alert(str);
16

}
18

}
20

new foo().fooA();
22

3 、 call+prototype 方式

var BaseClass = function (name,age)
2

{
4

this .name = name;
6

this .age = age;
8

this .ToString = function () {
10

return this .name + " " + this .age;
12

}
14

}
16

var Derived = function ()
18

{
20

BaseClass.call( this , " 3zfp " , 100 );
22

this .address = " ShenZhen " ;
24

}
26

Derived.prototype = new BaseClass();
28

var instance = new Derived();
30

instance.ToString();
32

其实， call 函数和 apply 方式有很类似的作用，都是用 A 方法去替换 B 方法，但是参数传递不一样， call 方法的第一个参数为 B 方法的对象本身，和面的参数列不用 Array 对象包装，直接依次传递就可以。

为什么作用类似， call 方式的实现机制却要多一条 Derived.prototype = new BaseClass(); 语句呢？那是因为 call 方法只实现了方法的替换而没有作对象属性的复制操作。

例：

var foo = function ()
2

{
4

this .fooA = function () {
6

this .fooB.call( this , " sorry " );
8

}
10

this .fooB = function (str)
12

{
14

alert(str);
16

}
18

}
20

new foo().fooA();
22

则 this.fooB.call(this,"sorry") 执行了如下几个操作：

this .temp = this .fooB;
2

this .temp( " sorry " );
4

delete ( this .temp);
6

其实，google Map API 的继承就是使用这种方式。大家可以下载的参考参考 (maps.google.com) 。

4 、 prototype.js 中的实现方式

Object.extend = function (destination, source) {
2

for (property in source) {
4

destination[property] = source[property];
6

}
8

return destination;
10

}
12

var BaseClass = function (name,age) {
14

this .name = name;
16

this .age = age;
18

this .ToString = function () {
20

return this .name + " " + this .age;
22

}
24

}
26

var Derived = function ()
28

{
30

BaseClass.call( this , " foo " , 100 );
32

this .address = " singapore " ;
34

this .ToString = function () {
36

var string = Derived.prototype.ToString.call( this );
38

return string + " " + this .address;
40

}
42

}
44

Object.extend(Derived.prototype, new BaseClass());
46

var instance = new Derived();
48

document.write(instance.ToString());

该方式，实际上是显式的利用了 apply 的原理来实现继承。先 var temp = new BaseClass() ，再将 temp 的属性遍历复制到 Derived.prototype 中。 for (property in source) 表示遍历某个对象的所有属性。但是私有属性无法遍历。例 :

var foo = function ()
2

{
4

var innerString = "" ;
6

this .name = " 3zfp " ;
8

this .age = 100 ;
10

function innerToString()
12

{
14

return innerString;
16

}
18

}
20

var f = new foo();
22

var eles = "" ;
24

for (property in f)
26

{
28

eles += " " + property;
30

}
32

document.write(eles);
34

输出为 "name age" 而没有 "innerString" 和 "innerToString()"; 具体原理，以后有机会可以解释（包括私有变量，私有函数，私有函数的变量可访问性等等）。上面总结了种种继承方式的实现。但是每种方法都有其优缺点。

第一种方式，如何实现如下需求，需要显示 "3zfp__100";

var BaseClass = function (name,age)
2

{
4

this .name = name;
6

this .age = age;
8

this .ToString = function () {
10

return this .name + " " + this .age;
12

}
14

}
16

var Derived = function (name,age)
18

{
20

this .address = " ShenZhen " ;
22

}
24

Derived.prototype = new BaseClass();
26

var instance = new Derived( " 3zfp " , 100 );
28

document.write(instance.ToString());
30

我们通过运行可以发现，实际上输出的是 "undefined__undefined" 。也就是说 name 和 age 没有被赋值。

oh,my god! 天无绝人之路。第二和第三种方法可以实现，具体如下：

var BaseClass = function (name,age)
2

{
4

this .name = name;
6

this .age = age;
8

this .ToString = function () {
10

return this .name + " " + this .age;
12

}
14

}
16

var Derived = function (name,age)
18

{
20

BaseClass.apply( this , new Array(name,age));
22

this .address = " ShenZhen " ;
24

}
26

var instance = new Derived( " 3zfp " , 100 );
28

document.write(instance.ToString());
30

______________________________________________
32

---------------------------------------------------------------------
34

var BaseClass = function (name,age)
36

{
38

this .name = name;
40

this .age = age;
42

this .ToString = function () {
44

return this .name + " " + this .age;
46

}
48

}
50

var Derived = function (name,age)
52

{
54

BaseClass.call( this ,name,age);
56

this .address = " ShenZhen " ;
58

}
60

Derived.prototype = new BaseClass();
62

var instance = new Derived( " 3zfp " , 100 );
64

document.write(instance.ToString());
68

但是用 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 ，感兴趣的可以搜索下载。

分享到：

DB2：”因为未能分配专用虚拟内存，所以请 ... | js中的prototype

2011-11-01 15:43
浏览 1015
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js继承探讨

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js继承探讨

评论

发表评论

相关推荐

js中的prototype

JS中this的总结

最近访客更多访客>>