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 相关文章推荐
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jQuery ajax应用总结
Jun 02 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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中的时间显示
2007/01/18 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
劳动竞赛活动方案
2014/02/20 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Python自动化爬取天眼查数据的实现
2021/06/15 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript