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 相关文章推荐
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
原生js实现随机点名
Jul 05 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php cli换行示例
2014/04/22 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
使用js画图之圆、弧、扇形
2015/01/12 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
dataframe设置两个条件取值的实例
2018/04/12 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python输出带颜色字体实例方法
2019/09/01 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
数控技术专业推荐信
2013/11/01 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
酒店宣传语大全
2015/07/13 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android