剖析JavaScript中的原型(Prototype)

缺乏、安全感 2022-06-12 09:54 179阅读 0赞

转载请注明出处:http://blog.csdn.net/horkychen

[上篇][Link 1]提到构造函数包含一个prototype是实现继承的关键，就是原型链的概念。在JavaScript中当使用构造函数创建一个对象时，如下面的图示(来自<<JavaScript高级程序设计>>):

![1336835718_9414.png][]

JavaScript为建构函数生成一个原型(Prototype)指向原型对象，包含了所有实例共享的对象。而原型中也有一个constructor指向建构函数，以起到标识的作用，说明”我是谁”.建构函数本身也是一个普通函数，只是首字母大写了。

当通过访问实例的属性和方法时:

a.如果实例定义了同名的属性或方法，使用之。

b.否则，尝试调用原型的同名属性或方法。

这里有一个关键的准则：

***     所有在建构函数中定义的属性和方法，各个实例各自拥有一份。***

***     所有在原型中定义的引用类型属性(基本类型除外)和方法，各个实例将共享使用。***

下面是一个包含建构和原型两种方式的对象创建示例:

function Person(name)

\{

this.name = name;

\}

Person.prototype =

\{

**friends:\["A","B"\],**

introduceSelf : function()

\{

document.write("<p /> My name is "+this.name);

document.write("<p /> My friends are "+this.friends);

\}

\};

var horky = new Person("Horky");

**horky.friends.push("C");**

var arthas = new Person("Arthas");

horky.introduceSelf(); //My friends are A,B,C

arthas.introduceSelf(); //My friends are A,B,C

输出的结果是:

My name is Horky

My friends are A,B,C

My name is Arthas

My friends are A,B,C

认识这个特性很重要。一般我们希望类的方法可以重用，而不是各个实例再拥有一份实现，就可以放到原型的定义里面去。而对于子类需要自己定义的属性就可以放到建构函数中去。

既然原型也是一个对象，就可以按需要修改，比如扩展一下类的功能，随时加一个定义就可以了。

在上面代码后加入类似下面的代码:

……

horky.introduceSelf(); //My friends are A,B,C

arthas.introduceSelf(); //My friends are A,B,C

Person.prototype.saySomething = function(text)

\{

document.write("<p /> "+this.name+" says:"+text);

\}

horky.saySomething("Hello, everyone!");

输出结果就会多一行:

Horky says:Hello, everyone!

理解了原型，我们再看一下继承。继承的要素是继承父类的属性和方法定义，而且属性可以自行更改。本身实例和原型之间就是继承关系的影子，因为访问是从下至上的。所以继承无非是要将子类的prototype变成一个指向父类原型的对象就可以了，如下图:

![1336835991_1979.png][]

这就是<<JavaScript高级程序设计>>中所讲的较常用的寄生组合式继承。寄生指的是调用建构函数，组合则指的原型的运用。下面是示例代码:

***function inheritPrototype(subType,superType)\{***

***var prototype=object(superType.prototype);  //创建对象***

***prototype.constructor=subType;                       //增强对象***

***subType.prototype=prototype;                          //指定对象***

***\}***

* *

*function SuperType(name)\{*

*this.name=name;*

*this.color=\["red","blue","greed"\];*

*\}*

* *

*SuperType.prototype.sayName=function()\{*

*alert(this.name);*

*\}*

* *

*function SubType(name,age)\{*

*SuperType.call(this,name); //呼叫父类的建构函数*

*this.age=age;*

*\}*

* *

***inheritPrototype(SubType,SuperType);** //将子类设定为继承自父类*

* *

*SubType.prototype.sayAge=function()\{ //增加一个子类方法*

*alert(this.age);*

*\};*

只要掌握前面所提原型的概念，JavaScript中使用很多OO的实现就很好理解了。比如所谓的模块(单件)模式之类的。

\*<<JavaScript高级程序设计>>第3版在这段代码下(P173)附的图6-6是属于前段代码的解释，放在这段代码下实在容易让人误解。

[Link 1]: http://blog.csdn.net/horkychen/article/details/7559134
[1336835718_9414.png]: https://img-my.csdn.net/uploads/201205/12/1336835718_9414.png
[1336835991_1979.png]: https://img-my.csdn.net/uploads/201205/12/1336835991_1979.png

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中的原型链（prototype chain）

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ JavaScript中的原型链 ⭐ 写在最后 -------------------- ⭐ 专栏简介

骑猪看日落/ 2023年10月15日 16:44/ 0 赞/ 45 阅读

相关深度剖析前端JavaScript中的原型(JS的对象原型)

　　　　　 ![format_png][] 　　　　　　　　　　　　　　这张图片有点劝退了，哈哈哈~ ![format_png 1][] 通过原型机制，JavaScrip

末蓝、/ 2023年03月12日 10:54/ 0 赞/ 86 阅读

相关 java prototype_js中的原型对象/prototype

前置任务在说原型对象是什么之前,我们先讨论一下对象是什么东西在说对象是什么之前,我们又得讨论一下引用类型引用类型 ![15dbc36793416be342488b

太过爱你忘了你带给我的痛/ 2022年11月05日 10:53/ 0 赞/ 239 阅读

相关 javascript（三）原型原型链 Object.prototype

原型链 JavaScript 中有两个特殊的对象： Object 与 Function，它们都是构造函数，用于生成对象。 Object.prototype 是所有对象的祖

以你之姓@/ 2022年08月09日 13:56/ 0 赞/ 219 阅读

相关 JavaScript引用类型之原型prototype

什么是原型 Javascript对象中的原型属性可以返回对象类型的原型引用，原型prototype归构造方法所有。 Jav

末蓝、/ 2022年08月07日 08:43/ 0 赞/ 159 阅读

相关剖析JavaScript中的原型(Prototype)

转载请注明出处:http://blog.csdn.net/horkychen [上篇][Link 1]提到构造函数包含一个prototype是实现继承的关键，就是原型链的概念

缺乏、安全感/ 2022年06月12日 09:54/ 0 赞/ 180 阅读

相关 JavaScript之原型链 Prototype chain

原型对象也是普通的对象，并且也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链（prototype chain）。 > A prototype

ゝ一世哀愁。/ 2022年05月28日 01:42/ 0 赞/ 170 阅读

相关 JavaScript原型Prototypes和构造函数 Constructor

前言 `JavaScript` 不包含传统的类继承模型，而是使用 `prototypal` 原型模型。虽然这经常被当作是 `JavaScript` 的缺点被提及，其实

ゝ一纸荒年。/ 2022年05月28日 01:42/ 0 赞/ 245 阅读

相关 javascript prototype原型详解(比较基础)

一.基本概念: 二.代码实例: 实例一: 实例二: 实例三:

分手后的思念是犯贱/ 2022年05月16日 00:39/ 0 赞/ 214 阅读

相关 javascript之原型prototype

prototype:原型:每一个构造函数都有一个prototype属性,指向另一个对象,称之为原型对象,可以通过原型向已有的构造函数添加新的属性和方法,后面通过此构造函数创建的

Dear 丶/ 2021年09月16日 02:44/ 0 赞/ 363 阅读