js實現繼承的方法中為何總是要修正constructor方法的指向呢？

問題引入

最近看了許多關於js繼承實現的相關文章，許多實現方式中都會存在這么一行代碼：

A.prototype.constructor = A

於是感到好奇，這行代碼的實際意義是什么？如果沒有的話，還能達到繼承的目的嗎？

前置知識

為了熟悉javascript中與原型相關的幾個基本概念，可以參看這篇文章JavaScript深入之從原型到原型鏈，作者寫的十分簡明易懂。

 

 

讀了文章以后可以知道，在方法（構造函數）上存在一個叫做prototype的屬性，

這個屬性是一個對象；方法結合new關鍵字可以生成實例，生成的每一份實例上都會有一個叫做__proto__的屬性，

這個屬性也是指向生成該實例的方法上的prototype屬性；原型對象（即prototype這個對象）上也存在一個特別的屬性，即constructor，這個屬性指向的方法本身。

回到問題本身

我們先來回答第二個問題：如果沒有這行代碼，還能到達繼承的目的嗎？
看一個常見的組合繼承的實現方式，代碼如下：

function Animal(name) {
    this.name = name || '';
    console.log('Animal called.');
}
Animal.prototype.showName = function() {
    console.log('Name is: ', this.name);
}
function Cat(name, age) {
    Animal.call(this, name);
    this.age = age || 1;
    console.log('Cat called.');
}
Cat.prototype = new Animal();
// Cat.prototype.constructor = Cat;    // 注釋掉修正constructor方法的指向的這一行
Cat.prototype.showAge = function() {
    console.log('Age is: ', this.age);
}

var cat = new Cat('meow', 3);
console.log(cat.name);    // meow
cat.showName();          // Name is: meow
console.log(cat.age);    // 3
cat.showAge();           // Age is: 3

可以看到，繼承的效果依然是達到了。所以，我覺得答案應該是能。

我們再來看第一個問題，注釋掉的這行代碼的意義是什么呢？為什么大部分的實現方式中都建議我們修正這個constructor的指向呢？
網上搜索后找到這篇文章： 為什么要做A.prototype.constructor=A這樣的修正？，

並由此進一步的查看了Stack Overflow上的這篇問答： What it the significance of the Javascript constructor property?
所以，最重要的修正意義應該還是針對顯示調用的時候。
接着剛剛的代碼來看：

cat.__proto__.constructor 
 // 這個屬性指向的應該是 Animal 構造函數，如果我們之前修正了constructor的指向的話，那么這里才會真的指向到 Cat 的構造函數

// 假設我們想要構造一個新的實例cat2，並且我們不知道對應的構造函數的名稱是什么，不過好在我們剛剛已經有一個實例cat了（好吧，我知道這種假設比較2 -_-|||）
var cat2 = new cat.__proto__.constructor();  // Animal called （這里只有Animal的構造函數被調用了）
cat2.age;    // undefined  （因為在Animal構造函數中不存在age屬性）

好吧，我承認這種場景比較少見。但是，萬一有呢？所以我的建議是，我們應該保留這種修正constructor的寫法。

后記

在知乎的一篇問答中看到一種說法

constructor其實沒有什么用處，只是JavaScript語言設計的歷史遺留物。由於constructor屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。
不過，從編程習慣上，我們應該盡量讓對象的constructor指向其構造函數，以維持這個慣例。

轉載：https://www.ucloud.cn/yun/97020.html
侵權告刪