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 html 静态页面传参数
Apr 10 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
瀑布流布局代码一例
2014/04/11 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
Python的pycurl包用法简介
2015/11/13 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python找出因数与质因数的方法
2019/07/25 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python通过len函数返回对象长度
2020/10/22 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
市场安全管理制度
2014/01/26 职场文书
部门2015年度工作总结
2015/04/29 职场文书
小兵张嘎观后感
2015/06/03 职场文书
小学班级标语口号大全
2015/12/26 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
团组织关系介绍信
2019/06/24 职场文书