js prototype、__proto__的區別及使用場景及原型鏈的說明

一：區別

__proto__是所有對象（包括函數都有的）；

prototype只有函數有；

二：原型鏈是什麼？

原型鏈是針對構造函數的。通過new 創建函數，new出來的函數就會繼承創建他的函數的屬性。如果訪問new函數的某個未在當前函數中定義的變量，他就會往上查找（像創建他的函數），這個查找的過程就教做原型鏈；

例：

var Person=function(){

Person.prototype.say=function(){

alert('hello word!')

}

 };

var p = new Person();

p.say(); //alert('hello word!')

三：說明 prototype與proto的關係

var Person=function(){   };

var p = new Person();

看看new 做了什麼？？

var p={ }； //第一步：創建一個對象

p.proto=Person.prototype；//第二步

Person.call( p );//第三步:構造p（初始化p）;

驗證下第二步

var Person=function(){   };

var p = new Person();

console.log(p.proto=Person.prototype) // true

例子：

var Person = function () {};
Person.prototype.alert= function () {
    alert("Person alert");
}
Person.prototype.time= 50000;
var Programmer = function () {};
Programmer.prototype = new Person();
//var p1=new Person();Programmer.prototype=p1
//p1.__proto__=Person.prototype;
//Programmer.prototype.__proto__=Person.prototype;
Programmer.prototype.prompt = function () {
    alert("programmer prompt something");
};
Programmer.prototype.time= 500;
var p = new Programmer();//p.__proto__=Programmer.prototype;
p.alert();// alert("Person alert");
p.prompt ();//     alert("programmer prompt something");
alert(p.time);//500

//根據上面得到p.__proto__=Programmer.prototype。
//得到p.__proto__.__proto__=Person.prototype。

//其實prototype只是一個假象，他在實現原型鏈中只是起到了一個輔助作用，原型鏈的本質，其實在於__proto__

例圖：引用至：（找不到了原作者，下回找到原作者給補上）

四：使用場景

prototype：寫一個js類，需要繼承的你都放這個屬性下

__proto__你基本不會去用，js引擎實現原型鏈用的，原型鏈看上面。

五：對象使用prototype的好處

  1）不使用prototype屬性定義的對象方法，是靜態方法，只能直接用類名進行調用！另外，此靜態方法中無法使用this變量來調用對象其他的屬性！
  2）使用prototype屬性定義的對象方法，是非靜態方法，只有在實例化後才能使用！其方法內部可以this來引用對象自身中的其他屬性！

參考文件：

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