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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
C++中的string类的用法小结
Aug 07 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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
基于mysql的bbs设计(一)
2006/10/09 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
浅谈php和.net的区别
2014/09/28 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python3使用matplotlib绘制条形图
2020/03/25 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python求最大值最小值方法总结
2019/06/25 Python
django中的图片验证码功能
2019/09/18 Python
Python编写打字训练小程序
2019/09/26 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
详解Python3中的 input() 函数
2020/03/18 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python jieba库分词模式实例用法
2021/01/13 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
php实例化对象的实例方法
2021/11/17 PHP
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python