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 相关文章推荐
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
js+canvas实现画板功能
Sep 13 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
聊聊JS ES6中的解构
Apr 29 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
python与pycharm有何区别
2020/07/01 Python
司机岗位职责
2013/11/15 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
公司管理建议书范文
2014/03/12 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
先进班集体申报材料
2014/12/26 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
承诺函格式模板
2015/01/21 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL