JavaScript prototype背后的工作原理

我所了解的prototype
服务器君一共花费了295.576 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

“prototype”字面翻译是“原型”,是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。

通过以此函数作为构造函数构造出来的对象都自动的拥有构造函数的prototype对象的成员属性和方法。

其中的要点是:

  1. prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
  2. prototype的值是一个对象
  3. 可以任意修改函数的prototype属性的值。
  4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。
//定义一个函数(构造函数),并定义一些属性和方法用来给另外一个构造函数构造出来的对象继承
var function1=function(){
    this.name="function1";
    this.saySomething=function(){alert("This's a method of "+this.name);}//定义一个方法
}

//定义另外一个构造函数
var function2=function(){
    
}

//将构造函数function2的prototype属性设置为一个由function1构造出来的对象,以便使由function2构造出来的对象(并且原本是没有任何属性和方法的对象)拥有function1的属性和方法
function2.prototype=new function1();
var obj1=new function1();
//obj1本来什么成员也没有,多得prototype机制,是它坐享其成地拥有了function1对象的属性和方法。
obj1.saySomething();

当然,上述例子离真正实际上使用的“继承”还相差甚远,但也体现出继承的意义:一个对象拥有了另一个对象的属性和方法。(如儿子拥有了老爸的血型和脾气,人类继承了动物的本能如进食和打斗等等)

以上部分大概阐述了prototype的概念和作用,但单凭这些还不够对prototype加深认识。现在来看看prototype背后是怎样工作的:

先来看看用new形式创建对象的过程:

//以func()作为构造函数创建一个对象obj
var obj=new func();

这个过程是这样的:javascript引擎首先遇到了关键字new后,马上开辟了一块内存,创建了一个空对象(并且将this指向这个对象),接着执行构造函数func()对这个空对象进行构造(构造函数里面有什么属性和方法都一一给这个空白对象装配上去,这也就是为什么构造函数叫“构造函数”的原因)。

其实,new和执行构造函数之间还有一件事引擎没有显式地告诉我们,而是偷偷地做了,这就是给这个空对象赋予prototype对象。

这里不得不提到一个跟prototype一样同样是系统保留而且同样重要的东西:__proto__

__proto__是一个对象自动拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性,但它们最终都指向同一个对象,就是那个用来被继承的对象),用chrome和FF都可以访问到一个对象的__proto__属性,IE就不可以。

正是一个对象的__proto__指向着这个对象的构造函数的prototype对象,才使这个对象认识了它的构造函数的prototype对象,并拥有了这个prototype对象的属性和方法。

所以var obj=new func()这个过程更具体是这样的:

  1. javascript解析引擎遇到new后,开辟一片内存并创建了一个空对象,并且将“this”指向这个空对象
  2. javascript解析引擎将这个空对象的__proto__指向后面紧跟着的构造函数默认的prototype对象(一指向到prototype对象后,解析引擎就知道了“噢,这个对象要拥有这个prototype对象的属性和方法了”)
  3. javascript解析引擎执行构造函数体内的代码,也就正式开始对这个空对象进行构造(或者说装配)的过程了(this.name="xxx",this.sayHello=function(){...}等等)
  4. 对象被构造装配好,并赋值到等号左边的变量。

本文地址:http://www.nowamagic.net/librarys/veda/detail/587,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/587

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《数据结构与算法分析:C++描述(第3版)》 维斯 (Mark Allen Weiss) (作者), 张怀勇 (译者), 等 (译者)

《数据结构与算法分析:C++描述(第3版)》是数据结构和算法分析的经典教材,书中使用主流的程序设计语言C++作为具体的实现语言。书的内容包括表、栈、队列、树、散列表、优先队列、排序、不相交集算法、图论算法、算法分析、算法设计、摊还分析、查找树算法、k-d树和配对堆等。《数据结构与算法分析:C++描述(第3版)》适合作为计算机相关专业本科生的数据结构课程和研究生算法分析课程的教材。本科生的数据结构课程可以使用《数据结构与算法分析:C++描述(第3版)》第1章~第9章,多学时课程还可以讲解第10章;研究生算法分析课程可以使用第6章~第12章。

更多计算机宝库...