JavaScript继承的模拟实现

本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下:

  我们都知道,在JavaScript中只能模拟实现OO中的”类”,也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。

JavaScript模拟实现继承的方法

 这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 

 

本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下:

我们都知道,在JavaScript中只能模拟实现OO中的”类”,也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。

先定义一个父类,

?

1

2

3

4

5

6

7

8

9

//父类

function ParentClass() {

this.className = "ParentClass";

this.auth = "Auth";

this.version = "V1.0";

this.parentClassInfo = function () {

return this.className + "\n" + this.auth + "\n" + this.version;

}

}

一、prototype 实现:

?

1

2

3

4

5

6

7

8

9

10

11

12

//子类

//1、prototype继承

function ChildClassByPrototype() {

this.date = "2013-07-26";

this.classInfo = function () {

return this.parentClassInfo() + "\n" + this.date;

}

}

ChildClassByPrototype.prototype = new ParentClass();

var cctest1 = new ChildClassByPrototype();

cctest1.parentClassInfo();

cctest1.classInfo();

这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的
cctest1.parentClassInfo()
方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。

二、apply 实现:

?

1

2

3

4

5

6

7

8

9

//2、apply继承

function ChildClassByApply() {

ParentClass.apply(this, new Array());

//ParentClass.apply(this, []);

this.date = "2013-07-26";

this.classInfo = function () {

return this.parentClassInfo() + "\n" + this.date;

}

}

JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过
new Array()、[] 来传递。

三、call + prototype 实现:

?

1

2

3

4

5

6

7

8

9

//3、call+prototype继承

function ChildClassByCall() {

ParentClass.call(this, arguments);

this.date = "2013-07-26";

this.classInfo = function () {

return this.parentClassInfo() + "\n" + this.date;

}

}

ChildClassByCall.prototype = new ParentClass();

call和apply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句
原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。

每种方法都有其适用环境,比如,如果父类带有有参构造函数:

?

1

2

3

4

5

6

7

8

function ParentClass(className, auth, version) {

this.className = className;

this.auth = auth;

this.version = version;

this.parentClassInfo = function () {

return this.className + "\n" + this.auth + "\n" + this.version;

}

}

这种情况下,prototype就不适用了,可选用apply或call;

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function ChildClassByApply(className, auth, version) {

ParentClass.apply(this, [className, auth, version]);

this.date = "2013-07-26";

this.classInfo = function () {

return this.parentClassInfo() + "\n" + this.date;

}

}

function ChildClassByCall(className, auth, version) {

ParentClass.call(this, arguments[0], arguments[1], arguments[2]);

//ParentClass.call(this, className, auth, version);

this.date = "2013-07-26";

this.classInfo = function () {

return this.parentClassInfo() + "\n" + this.date;

}

}

ChildClassByCall.prototype = new ParentClass();

实例化:

www.hj8828.com,?

1

2

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");

var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用”instanceof”检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call

  • prototype 来模拟实现继承。据说,Google Map API
    的继承就是使用这种方式哟。

希望本文所述对大家的javascript程序设计有所帮助。

这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定…

我们都知道,在JavaScript中只能模拟实现OO中的”类”,也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。

先定义一个父类,

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 隐性调用php程序的方法
  • php数组随机排序实现方法
  • 浅谈JavaScript中的Math.atan()方法的使用
  • JavaScript中反正弦函数Math.asin()的使用简介
  • JavaScript中的acos()方法使用详解
  • 介绍JavaScript中Math.abs()方法的使用

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

//父类function ParentClass() { this.className = "ParentClass"; this.auth = "Auth"; this.version = "V1.0"; this.parentClassInfo = function () { return this.className + "\n" + this.auth + "\n" + this.version; }}
1         //父类
2         function ParentClass() {
3             this.className = "ParentClass";
4             this.auth = "Auth";
5             this.version = "V1.0";
6             this.parentClassInfo = function () {
7                 return this.className + "\n" + this.auth + "\n" + this.version;
8             }
9         }

帮客评论

一、prototype 实现:

一、prototype
实现:

//子类//1、prototype继承function ChildClassByPrototype() { this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; }}ChildClassByPrototype.prototype = new ParentClass();var cctest1 = new ChildClassByPrototype();cctest1.parentClassInfo;
 1         //子类
 2         //1、prototype继承
 3         function ChildClassByPrototype() {
 4             this.date = "2013-07-26";
 5             this.classInfo = function () {
 6                 return this.parentClassInfo() + "\n" + this.date;
 7             }
 8         }
 9 
10         ChildClassByPrototype.prototype = new ParentClass();
11 
12         var cctest1 = new ChildClassByPrototype();
13         cctest1.parentClassInfo();
14         cctest1.classInfo();

这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的
cctest1.parentClassInfo()
方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。

   这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的
cctest1.parentClassInfo()
方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。

二、apply 实现:

二、apply
实现: