关于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 全选效果实现代码
Mar 23 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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遍历数组的方法汇总分析
2013/06/08 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
分享PHP header函数使用教程
2013/09/05 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php随机抽奖实例分析
2015/03/04 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
如何写一个自定义标签
2012/12/28 面试题
酒店总经理欢迎词
2014/01/08 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
如何写通讯稿
2015/07/22 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Java存储没有重复元素的数组
2022/04/29 Java/Android