Javascript 原型鏈與constructor

Javascript中的constructor與prototype

在學習javascript面向對象編程的過程當中， constructor和prototype一直讓我以爲理解不透，慢慢的學習過程當中記錄本身的理解，加深印象，故寫下此篇。
首先來看一個例子：

function Person(name) {
            this.name = name;
            this.showName = function() {
                console.log(this.name);
            }
        }
        var student = new Person("COCO");
        student.showName();//COCO
        console.log(student.prototype);//undefined
        console.log(Person.prototype);//Object {constructor: function}
        console.log(Person.prototype.constructor);//function Person(name){...}

在以前的文章中有提到：使用function定義的對象與使用new操做符生成的對象之間有一個重要的區別，就是function定義的對象有一個prototype屬性，使用new生成的對象就沒有這個prototype屬性，所以student對象並無prototype屬性。

咱們來分析student對象的建立過程：

1. 創建一個新的對象student


2. 對象建立時存在預約義的屬性，咱們稱之爲內置原型對象,即__proto__,用新建student的內置原型對象指向構造函數的原型對象，即student.__proto__==Person.prototype


3. 將新建對象student做爲this參數調用構造函數(Person),即Person.call(student); 也就是說構造student，也能夠稱之爲初始化student

經過student的內置原型對象，能夠訪問到Person的prototype對象中的任何屬性與方法了,由於prototype對象中存在一個constructor屬性，那麼student也能夠直接訪問constructor屬性。所以咱們能夠理解以下代碼：

console.log(student.constructor == Person.constructor)//false
console.log(student.constructor == Person.prototype.constructor)//true
console.log(Person.constructor==Function.prototype.constructor)//true
//Person對象的構造函數是Function,所以Person對象的constructor指向Function.prototype的constructor

根據以上的結論，咱們來分析如何經過原型鏈實現繼承：

function Father(name) {
            this.name = name;
            this.showName = function() {
                console.log(name);
            }
        }

        Father.prototype.home = function() {
            console.log("Shanghai");
        }

        function son() {}

        son.prototype = new Father();//繼承實現的關鍵，將子類的prototype設置爲父類的一個對象
        console.log(son.prototype.constructor); //function Father(name) {}

        var firstSon = new son();

        firstSon.home(); //Shanghai
        console.log(firstSon.constructor); //function Father(name) {}
        console.log(son.prototype.constructor); //function Father(name) {}
        console.log(firstSon.constructor == son.prototype.constructor); //true

根據以上代碼，咱們分析獲得以下鏈條：