js 給p標籤賦值關於JS原型鏈的那點事

在講述原型鏈繼承之前，我建議大家能夠先去看看《詳解js中函式、函式原型和函式例項之間的關係》這篇文章，這樣有助於大家理解js原型鏈繼承的原理，因為這篇文章是基於上篇文章來講述的，如果你讀完了，那麼我們就來看看下面這張圖：

如上圖所示：personal物件想要繼承main物件，則通過將main的例項賦值給personal 的原型物件:

personal.prototype = new main () ;

如此personal原型物件就能通過main物件的例項中的[[prototype]]來訪問到main原型物件中的屬性和方法了，而此時大家注意，personal 原型物件則與personal 函式斷開了聯絡，因為personal 原型物件被重新賦值了，所以還需要重新將personal 函式和personal原型物件重新建立聯絡:

personal.prototype.constructor = personal ;

function main () {}main.prototype.*** = '男' ;main.prototype.eat = function () function personal () {}personal.prototype.name = 'hwk';personal.prototype.sayname = function () // 繼承personal.prototype = new main();personal.prototype.constructor = personal;var p = new personal();console.log(p.*** ) ; // 男console.log(p.name) ; // undefinedp.eat(); // main eat ...p.sayname (); // uncaught typeerror：p.sayname is not a function

執行如上**你會發現p.name為undefined,p.sayname這個方法沒找到，原因在於我們後面重新賦值了personal.prototype = new main();因此找不到一開始定義在personal.prototype上的name屬性和sayname方法，因此在使用原型鏈繼承的時候，要在繼承之後再去在原型物件上定義自己所需的屬性和方法。

// 先繼承personal.prototype = new main();personal.prototype.constructor = personal;// 後定義屬性和方法personal.prototype.name = 'hwk';personal.prototype.sayname = function () // 正確輸出console.log(p.*** ) ; // 男console.log(p.name) ; // hwkp.eat(); // main eat ...p.sayname (); // personal name

此時personal的例項已經可以訪問到父類main原型物件中的方法和屬性了，這也就是原型鏈繼承的方式，希望對大家有幫助！

ps:在原型物件上定義屬性和方法，其所有的建構函式例項都能共享原型上的屬性和方法，因此如果某乙個建構函式例項物件修改了原型物件上的屬性值和方法，則也會影響其他例項物件。

js 給p標籤賦值關於JS原型鏈的那點事

JS 物件 JS原型原型鏈

js 原型與原型鏈

JS原型物件，原型鏈

js 給p標籤賦值 關於JS原型鏈的那點事

JS 物件 JS原型 原型鏈

js 原型與原型鏈

JS原型物件，原型鏈

相關推薦

js 給p標籤賦值關於JS原型鏈的那點事

JS 物件 JS原型原型鏈