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之五(取DOM元素)
Jun 20 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
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中filter_input函数用法分析
2014/11/15 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
定义select的边框颜色
2008/04/28 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
大专计算机个人求职的自我评价
2013/10/21 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
个人先进事迹材料
2014/12/29 职场文书
教师辞职书范文
2015/02/26 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL