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

这是一篇关于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()创建的对象的原型,例如:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wddgxj.html