关于JavaScript的面向对象和继承有利新手学习


Posted in Javascript onJanuary 11, 2013

这是一篇关于JavaScript的面向对象和继承的文章,写于1年前,作者循序渐进,对想学习JavaScript中面向对象的同学来说是很有帮助的,因此试着翻译一下,不妥之处,请指正。原文链接Objects and Inheritance in Javascript

虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质,但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪。而不同的JS框架提供了各自的方法来编写类面向对象(class-like)的代码,这使得JS的面向对象更加的难以理解。这样带来的结果是:
1、没有一个标准的方法来实现面向对象。
2、JS面向对象的底层概念并没有得到人们的熟知

原型继承
原型继承是一个非常简单的概念,它的本质是:
1、对象a继承自对象b,就说b是a的原型(prototype)。
2、a继承了b的所有的属性,即如果b.x的值为1,那么a.x的值为1
3、a自身的属性会重写b中同名的属性

让我们在具体的代码中看看效果,假设有一个John Smith和一个继承自他的Jane。

var john = {firstName: 'John', lastName: 'Smith'}; 
var jane = {firstName: 'Jane'}; 
jane.__proto__ = john;

现在,我们称john是jane的原型(prototype),jane继承了john的所有的属性
jane.lastName 
"Smith"//该属性继承自john

jane自身的属性具有较高的优先级,如下
jane.firstName;//该属性覆写了john中的firstName属性 
"Jane"

如果在这之后给john添加一个属性,jane也会动态的继承该属性,如下所示
john.hair = 'brown'; //给john添加一个新属性 
jane.hair; 
"brown"//结果表明jane继承了新添加的属性

现在,我们假设jane结婚了,因此有了一个新的姓(last name)
jane.lastName = 'Doe'

该属性覆盖了john当中的同名的属性(lastName)
jane.lastName 
"Doe"

但是,如果我们现在删除jane的lastName
delete jane.lastName 
该属性的值就会恢复为john的值 
[code] 
jane.lastName 
"Smith"

现在,jane也可以继承自其它的对象。在这个链中可以有任意多个继承,我们将它称为原型链(prototype chain),实际上,john也有一个prototype属性
john.__proto__; 
Object { }

在Firebug的控制台中,john.__proto__的值设为了Object{},但是Object{}代表着Object.prototype这个对象——所有对象的父类。

这就是对原型继承的一个简要描述。看起来还不错,是吧?
但是,实际上,我们是不能用__proto__的。。。

告诉大家一个不好的消息......
IE不支持__proto__属性,实际上,__proto__并不是ECMAScript规范中的属性,而且,Mozilla也打算在火狐浏览器以后的的版本中去掉该属性。

但是,这并不意味着__proto__属性不存在。虽然在某些浏览器中无法直接访问到__proto__属性,但是它还是以某种形式存在,我们还得和他打交道,只不过没有那么直接了。

类和继承
因此,我们可以说,JavaScript没有类
请记住:JavaScript中没有类
那既然这样,方法和继承有事怎么实现的呢?
通过原型(prototype)。在传统的面向对象的语言中,方法是依赖于类的,而在JavaScript当中,方法是依赖于对象的原型的,并且,原型是和对象的构造器(constructor)绑定在一起的。

在JavaScript当中,函数起到了构造器(constructor)的作用。通过使用new运算符,你可以把一个函数当做构造函数(constructor)来用。下面的代码展示了我们创建了一个Cat函数:

function Cat(name){ // <-这是一个常规的函数 
this.name = name // this指向新建的对象 
}

以上代码会自动创建一个Cat.prototype对象
Cat.prototype 
Cat { }

我们可用new操作符来创建Cat的一个实例
var garfield = new Cat('Garfield') // 创建一个实例 - Cat函数充当了构造函数

现在,Cat.prototype对象成为了所有的通过new Cat()创建的对象的原型,例如:
garfield.__proto__ === Cat.prototype 
true //看到了吗? `Cat.prototype` 现在是garfield对象的原型

现在,我们给Cat.prototype添加一个方法,添加之后,该方法可以被garfield访问到
Cat.prototype.greet = function(){ 
console.log('Meow, I am ' + this.name) 
} 
garfield.greet() 
"Meow, I am Garfield"

其他的Cat的实例也可以访问到
var felix = new Cat('Felix') 
felix.greet() 
"Meow, I am Felix"

因此,在JavaScript中,方法是依赖于对象的原型(prototype)而存在的。

实际上,我们也可以为garfield添加方法,它会覆写Cat.prototype中的同名方法,如下所示:

garfield.greet = function(){ 
console.log("What's new?"); 
}; 
garfield.greet(); 
"What's new?"

但这并不会影响到其他的对象
felix.greet(); 
"Meow, I am Felix"

因此,JavaScript中,方法可以直接和一个对象关联,可以和对象的原型关联,也可以和对象的任意一个父辈对象关联,即,可以和原型链(prototype chain)的任意一环关联。继承也就是这样实现的。

要创建一个二级原型链(prototype chain),我们首先需要创建另一个构造函数(constructor),叫Animal如何?

function Animal(){ 
}

接下来,我们需要将Cat.prototype的原型指向一个Animal的对象,这样一来,Cat的实例就会继承所有的Animal的方法。因此,我们将Cat.prototype的值设置为Animal的实例,如下所示:
Cat.prototype = new Animal();

除此之外,我们还要告诉新的Cat.prototype,它实际上是Cat的一个实例:
Cat.prototype.constructor = Cat // 让`Cat.prototype` 知道它是Cat的一个实例

虽然这样做的目的主要是为了类之间的层次关系,但通常还是有必要这样做的。

现在,既然继承自Animal.prototype和Cat.prototype的对象是属于动物类,那么所有Cat的实例也间接的继承自Animal.prototype。如果我们给Animal.prototype添加一个新方法,那么,所有的Cat的实例也能够访问到该方法。

Animal.prototype.breed = function(){ 
console.log('Making a new animal!'); 
return new this.constructor(); 
}; 
var kitty = garfield.breed(); 
Making a new animal!

通过上面的代码我们就实现了继承,简单吧。

结语
虽然JavaScript中基于原型的继承很怪并且需要花一些时间才能习惯,但是他的核心思想是很简单的。只要你真正理解了这些本质上的概念,你就会有信心在这些良莠不齐的代码中驾驭JavaScript的OO。(完)^_^

Javascript 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 #Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 #Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 #Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 #Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 #Javascript
防止文件缓存的js代码
Jan 10 #Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 #Javascript
You might like
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
asp.net和php的区别点总结
2019/10/10 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python str与repr的区别
2013/03/23 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python之import机制详解
2014/07/03 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python实现简单字典树的方法
2016/04/29 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python实现批量命名照片
2020/06/18 Python
Pycharm Git 设置方法
2020/09/15 Python
爱晚亭导游词
2015/02/09 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang