javascript继承之为什么要继承


Posted in Javascript onNovember 10, 2012

Quiz1
Javascript真的需要类(Class)么?
我们首先先看下其他有类(Class)的面向对象语言(如:Java)的一些特性。

父类与子类
父类(Superclass)和子类(Subclass),并不是为了解决父亲与儿子的问题,而是为了解决类的包含关系的,我们用Sub表示“子类”,用Sup表示“父类”,则有:

Sub Sup
这是有区别的,例如通常我们能够将子类当成父类来使用,但认人的时候我们并不能把儿子当成父亲。
或者可以这么说,父类和子类不是为了解决类间存在相同方法或者属性的。

举个例子
有人喜欢这样做:
我们需要一些动物的类,以便在屏幕上创建一些移动的动物,但移动的动物有些在空中飞行,有些在路上行走。
所以创建两个父类,一个是Fly,一个是Walk:

Class Fly{ 
Fly(){} 
} 
Class Walk{ 
Walk(){} 
}

然后狮子们(还可以再建些其他的在路上行走的动物)就属于Walk类,老鹰们(也还可以再建些其他在天上飞行的动物)就属于Fly类:
Class Lion extend Walk{ 
} 
Class Eagle extend Fly{ 
}

最后对Lion和Eagle类创建一些实例,调用相应的方法,屏幕上就会有一些狮子和老鹰在移动了。
但这可能并不是一个好的设计,比如明天老板突然一拍大脑,他要有一种叫天马(Pegasus)的动物,它们即会在天上飞,又会在路上走,时而要飞行,时候要行走。
在这种情况下,这个方案就全然无用了。

为什么这个设计失败了?
继承是有条件的,子类必须能严格的向上转型(变成父类)。
在上面这个例子中:
狮子(Lion)被假设等同于行走动物(Walk),老鹰(Eagle)被假设等同于飞行动物(Fly)。
这看起来很成功,因为子类能严格向上转型,但他有隐患。
当有一种天马(Pegasus)介入到里面的时候,我们才发现狮子其实只是“会行走的动物”,老鹰其实只是“会飞行的动物”,这不意味着动物一辈子只能飞行或者行走,所以即会飞行又会行走的天马就找不到自己的归属了。
这个例子很好的证明了,子类和父类不是为了解决类间具有相同的方法的:
一些动物都会行走,需要拥有行走(Walk)这个方法,但这不应该由子类和父类实现。

组合
我们可以这样解决这个问题:

Class Lion{ 
walker = new Walk(); 
walk(){ 
return walker.walk(); 
} 
} 
Class Eagle{ 
flyer = new Fly(); 
fly(){ 
return flyer.fly(); 
} 
} 
Class Pegasus{ 
walker = new Walk(); 
flyer = new Fly(); 
walk(){ 
return walker.walk(); 
} 
fly(){ 
return flyer.fly(); 
} 
}

组合是简单的在新类内部创建原有类对象。所以组合才是为了解决类间具有相同的方法的。在这个例子里面:
Walk被当成“会行走的动物应该拥有的方法集合”,同理Fly被当成“会行走的动物应该拥有的方法集合”,所以对于天马(Pegasus),我们只需要对Walk和Fly进行组合就行了。

继承的目的
继承并非代码复用的唯一方法,但继承有他的优势:
子类可以向上转型变成父类。
这样我们就可以忽略所有的子类差异,当成相同的类来操作,例如:
我们有方法fn(A),fn(B),这两个方法实际是相似的,我们想复用他们。
则我们可以通过设立一个父类C,其中A是C的子类,B是C的子类,那么fn(C)就可以复用在A和B身上了。

回到Javascript
但回到Javascript,我们发现上面的例子是不成立的。
因为Javascript本身是弱类型语言,它并不会在操作前(因为他不用编译)关注自己操作的对象类型是什么。他只会执行成功,或者发生错误。
这时候,继承显得并不必要了。那么类也就同样不是必要的了。
I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.
——Douglas Crockford
我写Javascript代码已经8年了,但我从来没有发现需要使用超类函数。超类的想法在古典设计模式是非常重要的,但这在以原型和函数为基调的模式中并不必要。我现在觉得,早期我试图让Javascript支持经典模式是一个错误的决定。

安全环境
当然,你可以手动去判断类型,控制参数的类型,进而提供一个较为安全的环境。
例如同样作为弱类型脚本语言的PHP,为了模拟强类型面向对象语言设置安全环境,不得不这么做:

class ShopProductWriter{ 
public function write( $shopProduct ){ 
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct instanceof BookProduct ) ){ 
die( "输入错误的类型" ); 
} 
//如果类型正确就执行一些代码 
} 
}

——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
但这只是一个非常丑陋的方案而已。

经典继承语法糖实现
不过经典继承依然是许多人喜欢的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的实现方案。
其中较为常见的方案中,语法大概是这样的:

var Person = Class.extend({ 
init: function(isDancing){ 
this.dancing = isDancing; 
} 
}); 
var Dancer = Person.extend({ 
init: function(){ 
this._super( true ); 
} 
}); 
var n = new Dancer(); 
alert(n.dancing); //true

最重要的实现是对this._super的实现,其实extend函数只是将传进来的对象重新组装了一下,变成一个原型对象,新构造函数的prototype里。
具体实现请查看参考文献1。

ECMAScript 6的经典继承语法糖
对于类库各自实现,导致经典继承语法众多,ECMA组织貌似不太满意,他们试图在ECMAScript 6中加入更加直观的经典继承语法糖:

class Animal { 
constructor(name) { 
this.name = name; 
} 
sayName() { 
console.log(this.name); 
} 
} 
class Dog extends Animal { 
constructor(name) { 
super(name); 
} 
bark() { 
console.log("Woof!"); 
} 
}

总结
实际上,Javascript中经典继承并不是必要的。
然而基于许多人喜欢经典继承模型,所以在新版的ECMAScript 6中提供了相关语法糖。
不过在中国,前端想广泛使用该语法糖应该是一个遥远的故事……

Quiz2
那Javascript特有的继承呢?

原型继承
原型继承不是解决经典继承中的集合包含关系的,实际上原型继承是解决从属关系的,用数学表达就是:

Sub.prototype ∈ Sup
子级构造函数(子类型)原型是一个父级构造函数(父类型)构建的实例对象。原型实际上是子类型实例中需要共享的东西:

function Being(){ 
this.living = true; 
} 
Being.prototype.walk = function(){ 
alert("I' m walking"); 
}; 
function Dancer(){ 
this.dancing = true; 
} 
Dancer.prototype = new Being(); 
Dancer.prototype.dance = function(){ 
alert("I'm dancing"); 
}; 
var one = new Dancer(); 
one.walk(); 
one.dance();

利用借用、寄生等技术可以产生很多不同的继承效果,但这些技术都只是为了解决原型继承中属性和方法一些公用与非公用的问题罢了。由于篇幅问题就不展开讨论了,有兴趣可以参考《Javascript高级程序设计》相关内容。

思考题
1.文章开头关于天马(Pegasus)的题目,如果在Javascript上,应该如何设计呢?例如我们有下列两个类型:

function Walk(){ 
this.walk = function(){ 
//walk 
}; 
} 
function Fly(){ 
this.fly = function(){ 
//fly 
}; 
}
Javascript 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
详解redux异步操作实践
Aug 15 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
jquery表单验证使用插件formValidator
Nov 10 #Javascript
js 判断checkbox是否选中的操作方法
Nov 09 #Javascript
JS的replace方法详细介绍
Nov 09 #Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 #Javascript
javascript模拟select,jselect的方法实现
Nov 08 #Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 #Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 #Javascript
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
js获取内联样式的方法
2015/01/27 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python简单商城购物车实例代码
2018/03/15 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
预备党员考察表党小组意见
2015/06/01 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS