Javascript玩转继承(二)


Posted in Javascript onMay 08, 2014

毋庸置疑,这种方式是比较容易理解的,在子类中调用父类的构造函数。另外,这种方法最大的一个优点就是说构造继承可以实现多继承,复习下这个代码:

function A()
{    }
function B()
{    }
function C()
{
    this.father=A;
    this.father();
    delete this.father;
    this.father=B;
    this.father();
    delete this.father;
}

但是这种方式也有着这样和那样的缺点:
熟悉面向对象的我们来看这样一段C#代码:

classProgram
{
staticvoid Main(string[] args)
{
B b=newB();
bool temp = (typeof(A)).IsInstanceOfType(b);
Console.WriteLine(temp);
}
}
classA
{
public A()
{ }
}
classB : A
{
public B()
{ 
}
}

结果呢?b当然是A的一个实例:

Javascript玩转继承(二)

然而我们对上面的那段使用构造继承的Javascript代码做这样的测试:

function A()
{    }
function B()
{    }
function C()
{
    this.father=A;
    this.father();
    delete this.father;
    this.father=B;
    this.father();
    delete this.father;
}
var c=new C();
alert(c instanceof A);

可是得到的结果却不是我们想象的那样:

Javascript玩转继承(二)

其实很容易解释:构造继承只是通过了调用父类的构造方法复制的父类的属性,其他的什么搜没有做,所以很多资料中并不把这种继承方式称做继承。

看到缺点的同时也记住优点:支持多继承。

我们看C# 的继承,发现与这个继承有两个最典型的不同:C#不支持多继承,以及我上面提到的构造继承的缺点。于是就产生了一种新的继承方式,我们成为原型继承。

看到名字,可以大致理解,原型继承就是使用原型(prototype)的特性来实现继承的。这是在Javascript最流行的一种继承方式。如果对原型有不理解,请关注我的另一篇文章:《玩转原型——prototype》。
我们先来看代码,在这里,我借鉴《Javascript王者归来》中的一段代码:

function Point(dimension)
{
        this.dimension=dimension;
        this.Test=function(){
            alert("Success");
}
}
function Point2D(x,y)
{
        this.x=x;
        this.y=y;
}
Point2D.prototype=new Point(2);
var p=new Point2D(3,4);
p.Test();

Javascript玩转继承(二)

测试通过。说明Point2D已经继承了父类的方法,再看看instance。

alert(p instanceof Point);

Javascript玩转继承(二)

成功!好,我们来分析下原型继承:

原型继承的优点我不再多说,结构简单,容易理解,而且可以instance。但是他的缺点同样显著,还记得我上一篇关于Animal,People,Girl的例子么?我们用原型继承来实现下:

function Animal() 
{ 
this.Run=function(){alert("I can run");}; 
} 
function People(name) 
{ 
this.Say=function(){alert("My name is "+this.name);} 
} 
People.prototype=new Animal();
function Girl(name,age) 
{ 
this.age=age; 
this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);}; 
}
Girl.prototype=new People(???);

大家注意看我红色加粗部分的那行代码,People是Girl的原型,那么我们在初始化People的时候就应该传入name参数,但是每个Girl的名字是不一样的,所以原型继承不使用的场合一:在原型继承阶段你不能确定用什么参数来初始化父类对象。场合二:很简单,每一个类只能有一个原型,那么也就是说,原型继承不能用于多继承。这是件好事,也是件坏事。因为:
在Java和C#等面向对象语言中,本来就不支持多继承,并且认为多继承是不符合面向对象的

无法实现多个接口了!

好了,今天就写到这,总结下,Prototype继承解决了构造继承的一些问题,又引入了一些新的问题。总体来说,原型继承是应用最广泛的继承方式,也是Javascript文法中真正意思上实现继承的方式!

Javascript 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
详解tween.js的使用教程
Sep 14 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
js的Prototype属性解释及常用方法
May 08 #Javascript
Javascript玩转继承(一)
May 08 #Javascript
玩转方法:call和apply
May 08 #Javascript
jQuery产品间断向下滚动效果核心代码
May 08 #Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 #Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 #Javascript
setInterval计时器不准的问题解决方法
May 08 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
详解Vue方法与事件
2017/03/09 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
python编写分类决策树的代码
2017/12/21 Python
Python实现代码统计工具
2019/09/19 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
个人简历自荐信
2013/12/05 职场文书
户外活动策划方案
2014/03/12 职场文书
党员岗位承诺书
2014/03/25 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android