JavaScript模拟实现继承的方法

 更新时间:2015年03月30日 16:34:14   作者:码农小牛  
这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

先定义一个父类,

//父类
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、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 实现:

//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 实现:

//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方法只实现了方法的替换而没有对对象属性进行复制操作。

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

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;

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();

实例化:

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程序设计有所帮助。

相关文章

  • 微信小程序tabBar 返回tabBar不刷新页面

    微信小程序tabBar 返回tabBar不刷新页面

    这篇文章主要介绍了微信小程序tabBar 返回tabBar不刷新页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript实现商品评价五星好评

    JavaScript实现商品评价五星好评

    这篇文章主要为大家详细介绍了JavaScript实现商品评价五星好评,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 添加JavaScript重载函数的辅助方法2

    添加JavaScript重载函数的辅助方法2

    话说,人就是要被关注才有动力啊于是修改了下上次写的《添加JavaScript重载函数的辅助方法》在添加方法的时候增加了一个参数 用于限制参数的类型。
    2010-07-07
  • 小程序实现简单验证码倒计时

    小程序实现简单验证码倒计时

    这篇文章主要为大家详细介绍了小程序实现简单验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Three.js+React实现3D文字悬浮效果

    Three.js+React实现3D文字悬浮效果

    这篇文章主要介绍了如何利用Three.js+React制作出神奇的3D文字悬浮效果,文中的示例代码讲解详细,感兴趣的小伙伴可以动手尝试一下
    2022-03-03
  • javascript 禁止复制网页

    javascript 禁止复制网页

    常见的一些禁止复制网页的代码,但破解方法也不见容易,这里就不说了,可以看本站以前发布的文章。
    2009-06-06
  • js实现3D图片逐张轮播幻灯片特效代码分享

    js实现3D图片逐张轮播幻灯片特效代码分享

    这篇文章主要介绍了js实现3D图片逐张轮播幻灯片特效,图片轮播效果特别适合做产品展示,具有很强的立体效果,感兴趣的小伙伴可以参考下。
    2015-09-09
  • 完美实现仿QQ空间评论回复特效

    完美实现仿QQ空间评论回复特效

    这篇文章主要介绍了完美实现仿QQ空间评论回复特效,非常的实用,附上实例代码给大家,有需要的小伙伴参考下吧。
    2015-05-05
  • JS 拖动效果实现代码 比较简单

    JS 拖动效果实现代码 比较简单

    JS拖动效果,计算的位移,主要是应用了鼠标事件与坐标控制。
    2009-11-11
  • 浅谈JSON.parse()和JSON.stringify()

    浅谈JSON.parse()和JSON.stringify()

    本文给大家简单描述了下JSON.parse()和JSON.stringify()的异同点,十分的实用,有需要的小伙伴可以参考下
    2015-07-07

最新评论