图解Javascript原型(prototype)链

   <p>本文尝试阐述Js中原型（prototype）、原型链（prototype chain）等概念及其作用机制。上一篇文章（ 图解Javascript上下文与作用域 ）介绍了Js中变量作用域的相关概念，实际上关注的一个核心问题是：“在执行当前这行代码时Js解释器可以获取哪些变量”，而原型与原型链实际上还是关于这一问题。</p>    <p>我们知道，在Js中一切皆为对象（Object），但是Js中并没有类（class）；Js是基于原型（prototype-based）来实现的面向对象（OOP）的编程范式的，但并不是所有的对象都拥有 prototype 这一属性：</p>    <pre>  <code class="language-javascript">var a = {};    console.log(a.prototype);  //=> undefined    var b = function(){};    console.log(b.prototype);  //=> {}    var c = 'Hello';    console.log(c.prototype);  //=> undefined    </code></pre>    <p>prototype 是每个 function 定义时自带的属性，但是Js中 function 本身也是对象，我们先来看一下下面几个概念的差别：</p>    <h2>1. function 、 Function 、 Object 和 {}</h2>    <p>function 是Js的一个关键词，用于定义函数类型的变量，有两种语法形式：</p>    <pre>  <code class="language-javascript">function f1(){      console.log('This is function f1!');  }  typeof(f1);  //=> 'function'    var f2 = function(){      console.log('This is function f2!');  }  typeof(f2);  //=> 'function'    </code></pre>    <p>如果用更加面向对象的方法来定义函数，可以用 Function ：</p>    <pre>  <code class="language-javascript">var f3 = new Function("console.log('This is function f3!');");    f3();        //=> 'This is function f3!'    typeof(f3);  //=> 'function'    typeof(Function); //=> 'function'    </code></pre>    <p>实际上 Function 就是一个用于构造函数类型变量的类，或者说是函数类型实例的构造函数（constructor）；与之相似有的 Object 或 String 、 Number 等，都是Js内置类型实例的构造函数。比较特殊的是 Object ，它用于生成对象类型，其简写形式为 {} ：</p>    <pre>  <code class="language-javascript">var o1 = new Object();    typeof(o1);      //=> 'object'    var o2 = {};    typeof(o2);     //=> 'object'    typeof(Object); //=> 'function'    </code></pre>    <h2>2. prototype VS __proto__</h2>    <p>清楚了上面的概念之后再来看 prototype ：</p>    <p>Each function has two properties: length and prototype</p>    <p>prototype 和 length 是每一个函数类型自带的两个属性，而其它非函数类型并没有（开头的例子已经说明），这一点之所以比较容易被忽略或误解，是因为所有类型的构造函数本身也是函数，所以它们自带了 prototype 属性：</p>    <pre>  <code class="language-javascript">// Node  console.log(Object.prototype);  //=> {}    console.log(Function.prototype);//=> [Function: Empty]    console.log(String.prototype);  //=> [String: '']    </code></pre>    <p>除了 prototype 之外，Js中的所有对象（ undefined 、 null 等特殊情况除外）都有一个内置的 [[Prototype]] 属性，指向它“父类”的 prototype ，这个内置属性在ECMA标准中并没有给出明确的获取方式，但是许多Js的实现（如Node、大部分浏览器等）都提供了一个 __proto__ 属性来指代这一 [[Prototype]] ，我们通过下面的例子来说明实例中的 __proto__ 是如何指向构造函数的 prototype 的：</p>    <pre>  <code class="language-javascript">var Person = function(){};    Person.prototype.type = 'Person';    Person.prototype.maxAge = 100;    var p = new Person();    console.log(p.maxAge);    p.name = 'rainy';    Person.prototype.constructor === Person;  //=> true    p.__proto__ === Person.prototype;         //=> true    console.log(p.prototype);                 //=> undefined    </code></pre>    <p>上面的代码示例可以用下图解释：</p>    <p>Person 是一个函数类型的变量，因此自带了 prototype 属性， prototype 属性中的 constructor 又指向 Person 本身；通过 new 关键字生成的 Person 类的实例 p1 ，通过 __proto__ 属性指向了 Person 的原型。这里的 __proto__ 只是为了说明实例 p1 在内部实现的时候与父类之间存在的关联（指向父类的原型），在实际操作过程中实例可以直接通过 . 获取父类原型中的属性，从而实现了继承的功能。</p>    <h2>3. 原型链</h2>    <p>清楚了 prototype 与 __proto__ 的概念与关系之后我们会对“Js中一切皆为对象”这句话有更加深刻的理解。进而我们会想到，既然 __proto__ 是（几乎）所有对象都内置的属性，而且指向父类的原型，那是不是意味着我们可以“逆流而上”一直找到源头呢？我们来看下面的例子：</p>    <pre>  <code class="language-javascript">// Node  var Obj = function(){};    var o = new Obj();    o.__proto__ === Obj.prototype;  //=> true    o.__proto__.constructor === Obj; //=> true    Obj.__proto__ === Function.prototype; //=> true    Obj.__proto__.constructor === Function; //=> true    Function.__proto__ === Function.prototype; //=> true    Object.__proto__ === Object.prototype;     //=> false    Object.__proto__ === Function.prototype;   //=> true    Function.__proto__.constructor === Function;//=> true    Function.__proto__.__proto__;               //=> {}    Function.__proto__.__proto__ === o.__proto__.__proto__; //=> true    o.__proto__.__proto__.__proto__ === null;   //=> true    </code></pre>    <p>从上面的例子和图解可以看出， prototype 对象也有 __proto__ 属性，向上追溯一直到 null 。</p>    <p>new 关键词的作用就是完成上图所示实例与父类原型之间关系的串接，并创建一个新的对象； instanceof 关键词的作用也可以从上图中看出，实际上就是判断 __proto__ （以及 __proto__.__proto__ …）所指向是否父类的原型：</p>    <pre>  <code class="language-javascript">var Obj = function(){};    var o = new Obj();    o instanceof Obj; //=> true    o instanceof Object; //=> true    o instanceof Function; //=> false    o.__proto__ === Obj.prototype; //=> true    o.__proto__.__proto__ === Object.prototype; //=> true    o.__proto__.__proto__ === Function;  //=> false    </code></pre>    <h2>参考</h2>    <ol>     <li><a href="/misc/goto?guid=4959639790917474606" rel="nofollow,noindex">JavaScript constructors, prototypes, and the new keyword </a></li>     <li><a href="/misc/goto?guid=4959541431567869045" rel="nofollow,noindex">Javascript 面向对象编程</a></li>     <li><a href="/misc/goto?guid=4959674257755500500" rel="nofollow,noindex">Professional JavaScript for Web Developers</a></li>    </ol>    <p>– END –</p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959674257849208837" rel="nofollow">http://www.techug.com/prototype-chain-in-javascript</a></p>    <p> </p>