JavaScript高级之prototype原型

一、前言

在深入学习JavaScript过程中,有一个概念是不能不提及的,这个概念就是“原型”-prototype,这个概念本身是非常重要的但是恰恰又是最不好理解的,这个概念的理解会对以后的学习产生很大的帮助,本篇文章就来初步去学习这个原型。

二、功能

返回对象类型原型的引用。

这句话猛的看一下貌似不太理解,那么聪明的你就在心里慢慢地默念10遍,如果还不理解,那么请接下来跟着我的思路一步一步的走,不用怕啰嗦,花半个小时把知识慢慢吃透,我相信对你会有收获的。

三、格式

class.prototype

tips:有的小伙伴可能会问我,这个"class"是什么东东呢?在这里,我先暂且把函数对象的名称叫做类。如果大家有Java知识的话,都知道Java中有“”的概念,可是事实上JavaScript中是没有“”的概念的,只有“对象”的概念,在这里为了说明清楚,我分别写一段JavaScript和Java代码,来对比一下。

<script type="text/javascript">

// 定义一个函数对象

function Person(){

var p1 = new Person();

}

</script>

// 定义一个类

class Person{

}

聪明的你肯定一经对比就明白了,那么原型的格式就是:Person.prototype,这也就是我为什么把prototype的格式定义为:class.prototype的原因了。

好了,说了这么多,下面正式进入正题。

四、作用

在说明prototype作用之前,先来看一个例子并思考问题。

<script type="text/javascript">

function Person(username){

this.username = username;

}

var p1 = new Person('zhansan');

alert(p1.username);

</script>

这个打印结果很简单,就是“zhangsan” 。如果程序写到这里,如果发现我们要创建的Person对象发现少定义了一个“age”属性,那么一般我们常用的做法是这样的,一种是直接改写Person构造函数,即“function Person(username,age)”,这样做的好处是确实方便了,但是会导致“new Person('zhangsan')”这种创建对象的代码又要重新修改,否则我们创建的对象age的值总是“undefined”;另一种做法是可以动态的为创建好的Person对象(本例子是p1所指向的对象)添加一个age属性,这样做确实也挺方便,但是又会发生另外一个问题,就是,如果我要再去创建一个p2对象的时候(var p2 = new Person()),实际上这个p2对象里面仍然是没有这个age属性的。那么现在能不能想一种办法,或者是现在就想实现这么一种功能,当我把这个功能实现了之后,“Person函数对象下面的所有创建的实例都有这么一个age属性?”答案是肯定的,那么实现的方式就是使用的是:“原型”。

五、问题解决

现在我们来看下使用“原型”的方式如何去解决上面的例子问题。

<script type="text/javascript">

function Person(username){

this.username = username;

}

var p1 = new Person('zhangsan');

alert(p1.username);

Person.prototype.age = 30; // 使用原型方式为函数对象添加age属性

alert(p1.age);

var p2 = new Person('lisi');

alert(p2.age); // 结果是:30

</script>

咦,真奇怪!为什么就添加了“Person.prototype.age = 30”此句代码就可以实现所有的Person的实例对象都拥有了age属性呢?好了,开始划重点,下面的这段话要好好琢磨:

当程序去加载Person函数对象的时候,JS引擎就会为Person构造器去创建Person的原型对象,它们之间是相互独立存在的,这个Person构造器里面就有一个prototype属性指向了此原型对象,同时原型对象里面也有一个叫做constructor属性指向了构造器,当Person的一个实例对象去使用一个不存在的属性时,会自动到Person构造器的原型对象中去找。参考图1。

JavaScript高级之prototype原型

图1:prototype原型图解

从图上就很直观了,Person构造器有一个prototype属性指向了Person原型对象,而Person原型对象有一个constructor属性指向Person构造器,当我们去实例化一个Person对象的时候,生成的对象内部也会有一个叫做prototype的属性指向了这个Person构造器所对应的原型对象。当我们写Person.prototype.age = 30
这句代码的时候,“实际上是将这个age属性添加到了这个Person构造器所指向的Person原型对象”,
那聪明的你现在应该有点茅塞顿开了吧,当我们去访问p1.age的属性的时候,其实这个p1的实例对象里面并没有age属性,只有username属性,那么为什么仍然可以访问呢?原因就在于当实例对象去使用一个不存在的属性时,会自动到Person构造器的原型对象中去找,那么这样的话,也就解决了当我们无论创建多少个实例对象,都会自动到Person构造器的原型对象里面去找属性了。

tips:插播一条额外话,看一个代码:

<script type="text/javascript">

function Person(username){

this.username = username;

}

var p1 = new Person('zhangsan');

alert(p1.constructor);

</script>

现在再来分析这个程序,我们知道,constructor的作用是:返回对象的构造器。那么仔细分析一下为什么是这样的?我们的p1对象里面明明压根都没有constructor属性呀,为什么没有打印undefined,反而是打印了Person构造器呢?原因是这样的:还是如上面所说,当我们的一个实例对象去访问一个不存在的属性的时候,那么这个时候就会自动去Person构造器的原型对象里面去找,通过上面图可以看出来,Person原型对象里面有一个constructor属性又指向了Person构造器。哦哦,天哪,原来是这样,这个时候就应该很清晰了吧。

聪明的你,冥冥之中是不是又发现了一个很问题呢?前面说到:通过原型的方式添加属性的时候,所有的实例对象都是可以访问到这个属性的?就以上面的例子为例,我们说,p1、p2对象的age属性本身是没有的,但是是可以访问的,原因就在于访问不存在的属性的时候,实际上是可以自动去找Person构造器所对应的Person原型对象,那么现在的问题是:当p1对象把age属性的值修改之后,会影响到p2对象的age的值吗?来,看代码

<script type="text/javascript">

function Person(username){

this.username = username;

}

Person.prototype.age = 30;

var p1 = new Person('zhangsan');

alert(p1.age); // 30

var p2 = new Person('lisi');

alert(p2.age); // 30

p1.age = 90;

alert(p1.age); // 90

alert(p2.age); // 30

</script>

天哪,神奇呢,怎么会这样呢?p1对象和p2对象中去访问age属性,实际上都是访问的是Person构造器所指向的Person原型对象,那么既然p1对象把age的值修改为90,那么理论上说p2对象再去访问age属性,值应该也是90才对嘛,你可能会说,他们指的是同一份age属性嘛。哈哈,解释的貌似是合情合理,可是结果又不是自己的预期,其实这样解释应该更好理解一点,就是:p1.age = 90,相当于是为p1对象动态的添加了一个age属性,这个仅仅是对p1对象动态添加的,并没有真正的去访问修改Person原型对象中的age属性的值,而p2对象仍然是没有age属性的,所以p2.age = 30,仍然是相当于是从Person原型对象里面获取的值,所以是30,而p1对象自动添加了一个age属性,其值是90,所以p1.age的值当然是90喽。

猜你喜欢

转载自blog.csdn.net/smile_lg/article/details/79650115