关于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 相关文章推荐
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
Javascript中With语句用法实例
May 14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
用vue设计一个日历表
Dec 03 Vue.js
不用构造函数(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安全性问题中的:Null 字符问题
2013/06/21 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
react-router中的属性详解
2017/06/01 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
简单理解Python中的装饰器
2015/07/31 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
单位未婚证明范本
2014/01/18 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年财务科工作总结
2014/11/11 职场文书
委托公证书样本
2015/01/23 职场文书
创先争优活动个人总结
2015/03/04 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
教你怎么用Python操作MySql数据库
2021/05/31 Python
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python