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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
jquery datatable服务端分页
Aug 31 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Python list和str互转的实现示例
2020/11/16 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
企业挂职心得体会
2014/09/10 职场文书
文案策划岗位职责
2015/02/11 职场文书
驳回起诉裁定书
2015/05/19 职场文书
迎新生晚会主持词
2015/06/30 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Python+DeOldify实现老照片上色功能
2022/06/21 Python