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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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
生成缩略图
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
PHP children()函数讲解
2019/02/03 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery事件详解
2017/02/23 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python操作excel的方法
2018/08/16 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
公司股权转让协议书
2014/04/12 职场文书
学生鉴定评语大全
2014/05/05 职场文书
积极向上的团队口号
2014/06/06 职场文书
加薪通知
2015/04/25 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
民事二审代理词
2015/05/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
情感电台广播稿
2015/08/18 职场文书
Python天气语音播报小助手
2021/09/25 Python
Python实现简单得递归下降Parser
2022/05/02 Python