Javascript中3种实现继承的方法和代码实例


Posted in Javascript onAugust 12, 2014

继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。

Javascript中实际上是没有继承的概念的,但是我们可以通过一些手段来模仿实现它。这种继承实际上把一个对象复制到另外一个对象内部。你需要注意的是所有的本地类和宿主类是不能作为基类被继承的,主要是为了安全方面的考虑。

Javascript中的继承大约有三类:1.对象冒充;2.原型继承;3.二者的混合。

一、对象冒充

其实对象冒充是跟this关键字紧密联系在一起的(所以说充分理解Javascript中的this关键字是多么的重要:P)。构造函数使用this来给属性和方法赋值,而构造函数也可以看作为一个普通的函数,所以我们就可以使我们的基类的构造函数成为子类的构造函数,然后在子类的内部调用这个函数,那么子类就会得到父类的属性和方法。

原理很简单,那我们怎么实现呢?下面就以代码示例,实际的操作一下。

对象冒充实现方法一,我们最常用的新建对象的方法:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.myConstructor = classA;

 this.myConstructor(name);

 delete this.myConstructor;

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

为了验证以上的方法是否正确,你可以亲自测试下,我将测试用的代码写在下面:

var objA = new classA('DK');

objA.alertName();//DK

 

var objB = new classB('DS',20);

 

objB.alertName();//DS

objB.alertAge();//20

这就是所谓的对象冒充了,另外对象冒充还有另外两种实现的方式,虽然它们的实现手段不一样,但是它们的原理是一样的。

对象冒充实现方法二,使用call方法:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.call(this,name);

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

通过代码也能看出来,第一种方法中我们新建了函数指针指向父类,调用函数,然后将指针删除。而这里我们之间用call方法在this对象下面运行父类的构造函数,实现了同样的目的。另外与call方法相对于的则就是apply方法啦。

对象冒充实现方法三,使用apply方法:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.apply(this,new Array(name));

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

其实大家可以看到,apply方法跟call方法是非常类似的,只不过传递参数是略有不同罢了。

二、原型继承

大家应该对prototype对象有所了解,原型对象上的所有属性和方法将被传递给类的所有实例,所有当我们把父类的所有属性和方法付给子类的prototype对象时也就相当于实现了我们的继承。

子类想获得父类的所有属性和方法,那我们将父类的一个实例直接付给子类的prototype对象,那我们的子类不就相当于获取了父类的所有对象和方法?

代码示例伺候:

var classA = function(){

 this.name = 'DK';

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.name = name;

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

注意这里的父类的构造函数需要确保没有参数。因为即使有构造参数在实现原型继承的时候你也无法传递=.=!

三、混合继承

顾名思义,混合继承就是前两种方式的混合使用了。

var classA = function(name){

 this.name = name;

}

 

classA.prototype.alertName = function(){

 alert(this.name);

}

 

var classB = function(name,age){

 classA.call(this,name);

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

使用对象冒充实现了向父类传递参数,同时使用原型继承实现了对公有方法的继承。

说完了这三中继承方式了,下面该说到问题的时候了。

你可能会不解,为什么有了对象冒充,有了原型继承还要再弄出个什么混合继承,对,最重要的也就是这个问题。

1.如果你实际测试一下,你会发现通过对象冒充的方式实现的继承,子类是无法访问到父类的原型链上的方法的。

2.而用原型继承,则会把所有的属性变成共享的属性,如果你同一个子类实现两个实例,你会发现你的所有实例共享所有的属性。

3.但是这肯定是不合适的了。所以就有了混合继承的方式,让属性继续保持私有,同时让子类能够访问父类的原型链的方法。

你可以亲自动手试一下,在对象冒充继承的时候,子类无法访问父类的原型链方法,原型链继承子类的所有实例共享所有父类属性。这里我就不写例子了。

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
Vue Router的手写实现方法实现
Mar 02 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 #Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 #Javascript
JavaScript中跨域调用Flash的方法
Aug 11 #Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 #Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 #Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 #Javascript
You might like
基于PHP实现数据分页显示功能
2016/05/26 PHP
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python3.5绘制随机漫步图
2018/08/27 Python
python之消除前缀重命名的方法
2018/10/21 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Django app配置多个数据库代码实例
2019/12/17 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
中专自我鉴定
2014/02/05 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
大学生十八大感想
2015/08/11 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Python基础之元组与文件知识总结
2021/05/19 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS