JavaScript实现继承的4种方法总结

 更新时间:2014年10月16日 09:00:37   作者:四火  
这篇文章主要介绍了JavaScript实现继承的4种方法总结,本文给出了原型链继承、构造继承、实例继承、拷贝继承等实现JS继承的方法,需要的朋友可以参考下

JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。

1、原型链继承:

复制代码 代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

}; 
Sub.prototype = new Base(); 
Sub.prototype.name = "sub";

优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

缺点:子类区别于父类的属性和方法,必须在Sub.prototype = new Base();这样的语句之后分别执行,无法被包装到Sub这个构造器里面去。例如:Sub.prototype.name = “sub”;无法实现多重继承。

2、构造继承:

复制代码 代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    Base.call(this); 
    this.name = "sub"; 
};

优点:可以实现多重继承,可以把子类特有的属性设置放在构造器内部。

缺点:使用instanceof发现,对象不是父类的实例。

3、实例继承:

复制代码 代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    var instance = new Base(); 
    instance.name = "sub"; 
    return instance; 
};

优点:是父类的对象,并且使用new构造对象和不使用new构造对象,都可以获得相同的效果。

缺点:生成的对象实质仅仅是父类的实例,并非子类的对象;不支持多继承。

4、拷贝继承:

复制代码 代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var Sub = function() 

    var base = new Base(); 
    for(var i in base) 
        Sub.prototype[i] = base[i]; 
    Sub.prototype["name"] = "sub"; 
};

优点:支持多继承。

缺点:效率较低;无法获取父类不可枚举的方法。

这几种形式各有特点,仅就我提供的代码而言,满足下面的表格:

2012-1-10:补充,如果我们不需要类继承,只需要对象继承,对于支持 ECMAScript 5 的浏览器来说,还可以用Object.create方法来实现:

复制代码 代码如下:

var Base = function() 

    this.level = 1; 
    this.name = "base"; 
    this.toString = function(){ 
        return "base"; 
    }; 
}; 
Base.CONSTANT = "constant"; 
  
var sub = Object.create(new Base()); 
sub.name = "sub";

相关文章

  • 基于JavaScript获取url参数2种方法

    基于JavaScript获取url参数2种方法

    这篇文章主要介绍了基于JavaScript获取url参数2种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能

    bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能

    这篇文章主要为大家详细介绍了bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Javascript字符串常用方法详解

    Javascript字符串常用方法详解

    这篇文章主要介绍了Javascript字符串常用方法详解的相关资料,在平时工作中经常会用到的,非常不错,需要的朋友可以参考下
    2016-07-07
  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    这篇文章主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
    2015-08-08
  • 再谈javascript原型继承

    再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一个关于继承比较完整的实现。
    2014-11-11
  • 详解单页面路由工程使用微信分享及二次分享解决方案

    详解单页面路由工程使用微信分享及二次分享解决方案

    这篇文章主要介绍了详解单页面路由工程使用微信分享及二次分享解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • js中indexOf()的简单使用示例

    js中indexOf()的简单使用示例

    indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,下面这篇文章主要给大家介绍了关于js中indexOf()简单使用的相关资料,需要的朋友可以参考下
    2023-01-01
  • 去掉gridPanel表头全选框的小例子

    去掉gridPanel表头全选框的小例子

    这篇文章介绍了去掉gridPanel表头全选框的小例子,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript设计模式之建造者模式实例教程

    JavaScript设计模式之建造者模式实例教程

    这篇文章主要介绍了JavaScript设计模式之建造者模式,结合实例形式分析了设计模式中建造者模式的概念、功能及JavaScript实现与使用建造者模式的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 前端微信H5公众号实现授权登录的方法总结

    前端微信H5公众号实现授权登录的方法总结

    这篇文章主要介绍了如何在微信公众号中实现网页授权功能,包括创建微信服务公众号、配置重定向地址、调试和开发使用等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01

最新评论