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.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JQuery学习总结【二】
Dec 01 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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安装问题
2006/10/09 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
初学JavaScript第二章
2008/09/30 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python cumsum函数的具体使用
2019/07/29 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
电子商务专业实习生自我鉴定
2013/09/24 职场文书
师范生自荐信
2013/10/27 职场文书
数据员岗位职责
2013/11/19 职场文书
教师对学生的寄语
2014/04/03 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
档案接收函格式
2015/01/30 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
杨善洲观后感
2015/06/04 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android