本篇文章給大家詳細分析了javascript原型及原型鏈的相關知識點以及用法分享，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

我們建立的每個函式都有一個 prototype （原型）屬性，這個屬性是一個指標，指向一個原型物件，而這個原型物件中擁有的屬性和方法可以被所以例項共享

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 

一、理解原型物件

無論什麼時候，只要建立了一個新函式，就會根據一組特定的規則為該函式建立一個 prototype屬性，這個屬性指向函式的原型物件。 在預設情況下，所有原型物件都會自動獲得一個 constructor（建構函式）屬性，這個屬性包含一個指向 prototype 屬性所在函式的指標。 當呼叫建構函式建立一個新例項後，該例項的內部將包含一個指標（內部屬性），指向建構函式的原型物件。ECMA-262 第 5 版中管這個指標叫 [[Prototype]] 。 雖然在指令碼中沒有標準的方式訪問 [[Prototype]] ，但 Firefox、Safari 和 Chrome 在每個物件上都支援一個屬性__proto__ ；而在其他實現中，這個屬性對指令碼則是完全不可見的。 不過，要明確的真正重要的一點就是，這個連線存在於例項與建構函式的原型物件之間，而不是存在於例項與建構函式之間。 以前面使用 Person 建構函式和 Person.prototype 建立例項的程式碼為例，圖 6-1 展示了各個物件之間的關係。

在此， Person.prototype 指向了原型物件，而 Person.prototype.constructor 又指回了 Person 。 person1 和 person2 都包含一個內部屬性，該屬性僅僅指向了 Person.prototype ；換句話說，它們與建構函式沒有直接的關係。 可以呼叫 person1.sayName() 。這是通過查詢物件屬性的過程來實現的。（會先在例項上搜索，如果搜尋不到就會繼續搜尋原型。）

用isPrototypeOf()方法判斷例項與原型物件之間的關係<br>alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)) //true
<br><br>用Object.getPrototypeOf() 方法返回例項的原型物件
<br>alert(Object.getPrototypeOf(person1) == Person.prototype); 
//true<br><br>使用 hasOwnProperty() 
方法可以檢測一個屬性是存在於例項中，還是存在於原型中。<br>alert(person1.hasOwnProperty("name")); //false　　
來著原型<br>person1.name = "Greg";
<br>alert(person1.name);
 //"Greg"——來自例項<br>alert(person1.hasOwnProperty("name")); 
/true<br>//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 

二、更簡單的原型語法

前面例子中每新增一個屬性和方法就要敲一遍 Person.prototype 。為減少不必要的輸入，也為了從視覺上更好地封裝原型的功能，更常見的做法是用一個包含所有屬性和方法的物件字面量來重寫整個原型物件。

function Person(){
}
Person.prototype = {
　　name : "Nicholas",
　　age : 29,
　　job: "Software Engineer",
　　sayName : function () {
　　　　alert(this.name);
　　}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
};

在上面的程式碼中，我們將 Person.prototype 設定為等於一個以物件字面量形式建立的新物件。最終結果相同，但有一個例外： constructor 屬性不再指向 Person 了。 前面曾經介紹過，每建立一個函式，就會同時建立它的 prototype 物件，這個物件也會自動獲得 constructor 屬性。

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true
//歡迎加入前端全棧開發交流圈一起學習交流：864305860

在此，用 instanceof 操作符測試 Object 和 Person 仍然返回 true ，但 constructor 屬性則等於 Object 而不等於 Person 了。 如果 constructor 的值真的很重要，可以像下面這樣特意將它設定回適當的值。

function Person(){
}
Person.prototype = {
  constructor : Person,
  name : "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName : function () {
    alert(this.name);
  }//歡迎加入前端全棧開發交流圈一起學習交流：864305860
};

三、原生物件的原型

所有原生引用型別（ Object 、 Array 、 String ，等等）都在其建構函式的原型上定義了方法。 例如，在 Array.prototype 中可以找到 sort() 方法，而在 String.prototype 中可以找到substring() 方法。儘管可以這樣做，但不推薦修改原生物件的原型。

四、原型物件的問題

原型模式的最大問題是由其共享的本性所導致的。 修改其中的一個，另一個也會受影響。

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

五、原型鏈

其基本思想是利用原型讓一個引用型別繼承另一個引用型別的屬性和方法。然後層層遞進，就構成了例項與原型的鏈條，這就是所謂原型鏈的基本概念。

function SuperType(){
　　this.property = true;
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
SuperType.prototype.getSuperValue = function(){
　　return this.property;
};
function SubType(){
　　this.subproperty = false;
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
//繼承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
　　return this.subproperty;
};//歡迎加入前端全棧開發交流圈一起學習交流：864305860
var instance = new SubType();
alert(instance.getSuperValue()); //true

property 則位於 SubType.prototype 中。這是因為 property 是一個例項屬性，而 getSuperValue() 則是一個原型方法。既然 SubType.prototype 現在是 SuperType的例項，那麼 property 當然就位於該例項中了

結語

感謝您的觀看，如有不足之處，歡迎批評指正。