javascript-理解原型

1、prototype 與 [[Prototype]] 

原型 （prototype） 這個詞通常表示著兩個概念。首先，構造器具有一個公用的prototype屬性。

當構造器被用來建立新的對象時，建立對象會有一個[[Prototype]]屬性用來作為建立它的構造器的prototype屬性的引用。

其次，構造器又具有一個內部的[[Prototype]]屬性，用來作為其構造器的prototype屬性的引用，

再通常情況加引用了Function.prototype屬性。總之，所有的Javascript對象都具有一個內部的[[Prototype]]屬性，

而且僅當該對象時函數對象時，它同時還具有prototype屬性。

首先使用new 建立對象

function Circle(radius) {    this.radius = radius;}var circ = new Circle(6);var circ2 = {radius: 6};

按照上面原型的概念：

既 Circle 內部的[[Prototype]] 引用了 Object.prototype

circ內部的[[Prototype]] 引用了 Circle.prototype

circ2是直接繼承（亦即，它的[[Prototype]]屬性就是Object.prototype的引用）

2、  構造器原型

函數總是被分配一個prototype屬性,而此函數作為構造器建立的所有對象內部的[[Prototype]]屬性都被設定為該屬性。

而這個函數所分配的原型對象的原型就是Object.prototype，另外，它還定義了一個constructor屬性，

該屬性是構造器本身的引用。new操作符可以被用在任何錶達式中，並產生一個構造器，

這時我們就可以使用這個屬性動態地建立與已知對象同類型的對象。

var circ = new Circle(6);Circle.prototype.diameter = function() {    return this.radius * 2;}alert(circ.diameter()); // 12alert(Circle,circle.constructor);  // true

這裡為 Circle.prototype 添加了 diameter  方法 並測試通過。有一部分人習慣用下面的方法來添加函數

Circle.prototype = {    diameter: function() {        return this.radius * 2;    }}var circ = new Circle(6);  //聲明變數如果放在 prototype被賦值的前面會導致circ.diameter未聲明alert(circ.diameter()); // 12alert(Circle,circle.constructor);  // false

當我們為Circle.prototype賦以新值時，javascript將不再為該對象建立constructor

屬性。這就表示對constructor屬性的[[Get]] 會引發解譯器沿著原型鏈尋找，直至找到相應的值。

再我們的構造器中，constructor屬性尋找的結果是將Object.prototype,而後者的constructor屬性值是Object

解決方案就是手動為constructor屬性賦值

Circle.prototype = {    constructor: Circle,    diameter: function() {            return this.radius * 2;    }}

3、   instanceof 

a 的內部屬性[[Prototype]]或者它的原型鏈上的任一對象與 b.prototype 是同一對象，那麼運算式 a instanceof b 就將返回true。

alert(circ instanceof Object );alert(circ instanceof Circle);alert(circ2 instanceof Object);