原文:http://rockyuse.iteye.com/blog/1426510

说到prototype,就不得不先说下new的过程。

我们先看看这样一段代码:

1 <script type="text/javascript">
2 var Person = function ()
{ };
3 var p = new Person();
4 </script>

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

<1> var p={}; 也就是说,初始化一个对象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是说构造p,也可以称之为初始化p。

关键在于第二步,我们来证明一下:

1 <script type="text/javascript">
2 var Person = function ()
{ };
3 var p = new Person();
4 alert(p.__proto__ === Person.prototype);
5 </script>

这段代码会返回true。说明我们步骤2的正确。

那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

好,概念说清了,让我们看一下下面这些代码:

1 <script type="text/javascript">
2 var Person = function ()
{ };
3 Person.prototype.Say = function ()
{
4 alert("Person say");
5 }
6 var p = new Person();
7 p.Say();
8 </script>

这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了 Person.prototype.Say=function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。

01 <script type="text/javascript">
02 var Person = function ()
{ };
03 Person.prototype.Say = function ()
{
04 alert("Person say");
05 }
06 Person.prototype.Salary = 50000;
07 var Programmer = function ()
{ };
08 Programmer.prototype = new Person();
09 Programmer.prototype.WriteCode = function ()
{
10 alert("programmer writes code");
11 };
12 Programmer.prototype.Salary = 500;
13 var p = new Programmer();
14 p.Say();
15 p.WriteCode();
16 alert(p.Salary);
17 </script>

我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!

prototype 与 __proto__的更多相关文章

  1. js中的prototype和__proto__

    var Person = function(name){ this.name = name; this.say = function(){ return "I am " + thi ...

  2. JS的prototype和__proto__ Constructor

    一.prototype和__proto__的概念 prototype是 注意是 只有函数的一个属性才有的(每个函数都有一个prototype属性),这个属性是一个指针,指向一个普通对象并且不是原型对象 ...

  3. prototype和__proto__

    一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. __p ...

  4. Js中Prototype、__proto__、Constructor、Object、Function关系介绍

    一. Prototype.__proto__与Object.Function关系介绍 Function.Object:都是Js自带的函数对象.prototype,每一个函数对象都有一个显式的proto ...

  5. 面向对象的程序设计(二)理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty

    //理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...

  6. 【原创】javascript——prototype与__proto__

    一定要注意这个概念:javascript世界里,万物皆对象, function是对象,prototyp也是对象.   新建构造函数,并实例 var Person = function(){} var ...

  7. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  8. 原型及原型链,以及prototype和__proto__属性(笔记便于以后复习)

    首先,js的数据结构有 原始类型(5种):Boolean.Number.String.Null.Underfined, 然后是引用类型:Array.Date.Error.RegExp.Function ...

  9. 04面向对象编程-01-创建对象 和 原型理解(prototype、__proto__)

    1.JS中对象的"不同":原型概念 从Java中我们可以很好地去理解 "类" 和 "实例" 两个概念,可是在JavaScript中,这个概念 ...

  10. 【前端】JavaScript中prototype和__proto__的区别

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/prototype.html 经常有小伙伴问我关于prototype和__proto__的问题,觉得有必要写一篇博客 ...

随机推荐

  1. 安装svn测试环境

    centos 6.5 web service模式 安装svn测试服务器 1 下载subversion shell>yum install subversion 2 查看安装的版本 [root@c ...

  2. opencv2 直方图之calchist函数使用(转)

    OpenCV提供了calcHist函数来计算图像直方图. 其中C++的函数原型如下:void calcHist(const Mat* arrays, int narrays, const int* c ...

  3. javaWeb中,文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  4. 简单shell 编程

    简单shell编程  by  dreamboy #!/bin/bash while true do echo clear echo echo " 系统维护菜单 " echo &qu ...

  5. 洛谷P1106 删数问题

    题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N和k,寻找一种方案使得剩下的数字组成的新数最小. 输出应包括所去掉的数字的位置和 ...

  6. 【题解】Points, Lines and Ready-made Titles Codeforces 871C 图论

    Prelude 真是一道好题,然而比赛的时候花了太多时间在B题上,没时间想这个了QAQ. 题目链接:萌萌哒传送门(.^▽^) Solution 观察样例和样例解释,我们发现,假如有四个点,恰好占据在某 ...

  7. HDU 6199 DP

    gems gems gems Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  8. 数据压缩算法之哈夫曼编码(HUFFMAN)的实现

    HUFFMAN编码可以很有效的压缩数据,通常可以压缩20%到90%的空间(算法导论).具体的压缩率取决于数据的特性(词频).如果采取标准的语料库进行编码,一般可以得到比较满意的编码结果(对不同文件产生 ...

  9. linux python3获取ip地址

    一.不带参数 #!/usr/bin/python # -*- coding: UTF-8 -*- import os def get_ip(): #注意外围使用双引号而非单引号,并且假设默认是第一个网 ...

  10. java io-1基本概念

    java io-1基本概念 2015-07-03 15:17 648人阅读 评论(0) 收藏 举报  分类: [JavaSE](37)    目录(?)[+]   ------------------ ...