Javascript中構造函數與new命令

 

典型的面向對象編程語言（比如C++和Java），存在“類”（class）這個概念。所謂“類”就是對象的模板，對象就是“類”的實例。但是，在JavaScript語言的對象體系，不是基於“類”的，而是基於構造函數（constructor）和原型鏈（prototype）。

 

以下的內容會分為如下細節：

1.對象的概念

2.構造函數

3.new 命令

　　3.1：基本原理

　　3.2：基本用法

 

 

1.對象的概念

　　“面向對象編程”（Object Oriented Programming，縮寫為OOP）是目前主流的編程范式。它的核心思想是將真實世界中各種復雜的關系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。

　　在Javascript的重要數據類型-對象這篇文章中，提到了js中對象的一些基本知識，比如說對象的創建，對象的引用，對象的屬性等等。如果沒有掌握對象的基礎知識，請移步Javascript的重要數據類型-對象。

　　在有了對象的基礎知識之后，對js中對象做一個簡單的總結。如下：

　　a：對象是單個實物的抽象。

　　b：對象是一個容器，封裝了‘屬性’和‘方法’。

　　一本書、一輛汽車、一個人都可以是“對象”。當實物被抽象成“對象”，實物之間的關系就變成了“對象”之間的關系，從而就可以模擬現實情況，針對“對象”進行編程。

　　所謂屬性，就是對象的一種狀態；所謂方法，就是對象的一種行為。

　　比如說，可以把動物抽象為animal對象，屬性記錄的就是哪一種動物，以及該動物的大小和顏色等。方法表示該動物的某種行為（奔跑，獵食，交配，休息等等）。

 

2.構造函數

　　‘面向對象編程’的第一步，就是要生成對象。而js中面向對象編程是基於構造函數（constructor）和原型鏈（prototype）的。

　　前面說過，“對象”是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特征，然后“對象”根據這個模板生成。

　　js語言中使用構造函數（constructor）作為對象的模板。所謂構造函數，就是提供一個生成對象的模板，並描述對象的基本結構的函數。一個構造函數，可以生成多個對象，每個對象都有相同的結構。

　　看一下構造函數的基本結構。

    var Keith = function() {
        this.height = 180;
    };
    //兩種寫法相同。
    function Keith() {
        this.height = 180;
    }

　　上面代碼中，Keith就是構造函數，它提供模板，用來生成對象實例。為了與普通函數區別，構造函數名字的第一個字母通常大寫。

　　構造函數的三大特點：

　　a：構造函數的函數名的第一個字母通常大寫。

　　b：函數體內使用this關鍵字，代表所要生成的對象實例。

　　c：生成對象的時候，必須使用new命令來調用構造函數。

 

 

3.new 命令

 

　　3.1：基本原理

　　new命令的作用，就是執行一個構造函數，並且返回一個對象實例。使用new命令時，它后面的函數調用就不是正常的調用，而是依次執行下面的步驟。

　　a：創建一個空對象，作為將要返回的對象實例。

　　b：將空對象的原型指向了構造函數的prototype屬性。

　　c：將空對象賦值給構造函數內部的this關鍵字。

　　d：開始執行構造函數內部的代碼。

　　也就是說，構造函數內部，this指向的是一個新生成的空對象，所有針對this的操作，都會發生在這個空對象上。構造函數之所謂構造函數，意思是這個函數的目的就是操作一個空對象（即this對象），將其構造為需要的樣子。

　　以上是new命令的基本原理，這個很重要。以下會用具體實例來驗證該原理的過程。

　　

　　3.2：基本用法

　　new命令的作用，就是調用一個構造函數，並且返回一個對象實例。

    function Keith() {
        this.height = 180;
    }

    var boy = new Keith();
    console.log(boy.height);　　//180

　　上面代碼中通過new命令，讓構造函數Keith生成一個對象實例，並賦值給全局變量boy。這個新生成的對象實例，從構造函數Keith中繼承了height屬性。也就說明了這個對象實例是沒有height屬性的。在new命令執行時，就代表了新生成的對象實例boy。this.height表示對象實例有一個height屬性，它的值是180。

　　使用new命令時，根據需要，構造函數也可以接受參數。

    function Person(name, height) {
        this.name = name;
        this.height = height;
    }

    var boy = new Person('Keith', 180);
    console.log(boy.name); //'Keith'
    console.log(boy.height); //180

    var girl = new Person('Samsara', 160);
    console.log(girl.name); //'Samsara'
    console.log(girl.height); //160

　　用以上的一個例子，來對構造函數的特點和new基本原理進行一個梳理。

　　上面代碼中，首先，我們創建了一個構造函數Person，傳入了兩個參數name和height。構造函數Person內部使用了this關鍵字來指向將要生成的對象實例。

　　然后，我們使用new命令來創建了兩個對象實例boy和girl。

　　當我們使用new來調用構造函數時，new命令會創建一個空對象boy，作為將要返回的實例對象。接着，這個空對象的原型會指向構造函數Person的prototype屬性。也就是boy.__proto__ prototype===Person.prototype的。要注意的是空對象指向構造函數Person的prototype屬性，而不是指向構造函數本身。然后，我們將這個空對象賦值給構造函數內部的this關鍵字。也就是說，讓構造函數內部的this關鍵字指向一個對象實例。最后，開始執行構造函數內部代碼。

　　因為對象實例boy和girl是沒有name和height屬性的，所以對象實例中的兩個屬性都是繼承自構造函數Person中的。這也就說明了構造函數是生成對象的函數，是給對象提供模板的函數。

　　

　　一個問題，如果我們忘記使用new命令來調用構造函數，直接調用構造函數了，會發生什么？

　　這種情況下，構造函數就變成了普通函數，並不會生成實例對象。而且由於后面會說到的原因，this這時代表全局對象，將造成一些意想不到的結果。

    function Keith() {
        this.height = 180;
    }

    var person = Keith();
    console.log(person.height); //TypeError: person is undefined
    console.log(window.height); //180

　　上面代碼中，當在調用構造函數Keith時，忘記加上new命令。結果是this指向了全局作用域，height也就變成了全局變量。而變量person變成了undefined。

　　因此，應該非常小心，避免出現不使用new命令、直接調用構造函數的情況。

　　為了保證構造函數必須與new命令一起使用，一個解決辦法是，在構造函數內部使用嚴格模式，即第一行加上use strict。

    function Person(name, height) {
        'use strict';
        this.name = name;
        this.height = height;
    }
    var boy = Person();
    console.log(boy) //TypeError: name is undefined

　　上面代碼的Person為構造函數，use strict命令保證了該函數在嚴格模式下運行。由於在嚴格模式中，函數內部的this不能指向全局對象。如果指向了全局，this默認等於undefined，導致不加new調用會報錯（JavaScript不允許對undefined添加屬性）。

　　另一個解決辦法，是在構造函數內部判斷是否使用new命令，如果發現沒有使用，則直接返回一個實例對象。

    function Person(name, height) {
    if (!(this instanceof Person)) {
            return new Person(name, height);
        }
        this.name = name;
        this.height = height;
    }
    var boy = Person('Keith');
    console.log(boy.name) //'Keith'

　　上面代碼中的構造函數，不管加不加new命令，都會得到同樣的結果。

　　如果構造函數內部有return語句，而且return后面跟着一個復雜數據類型（對象，數組等），new命令會返回return語句指定的對象；如果return語句后面跟着一個簡單數據類型（字符串，布爾值，數字等），則會忽略return語句，返回this對象。

    function Keith() {
        this.height = 180;
        return {
            height: 200
        };
    }
    var boy = new Keith();
    console.log(boy.height); //200

    function Keith() {
        this.height = 100;
        return 200;
    }
    var boy = new Keith();
    console.log(boy.height); //100

　　另一方面，如果對普通函數（內部沒有this關鍵字的函數）使用new命令，則會返回一個空對象。

    function Keith() {
        return 'this is a message';
    }
    var boy = new Keith();
    console.log(boy); // Keith {}

　　上面代碼中，對普通函數Keith使用new命令，會創建一個空對象。這是因為new命令總是返回一個對象，要么是實例對象，要么是return語句指定的對象或數組。本例中，return語句返回的是字符串，所以new命令就忽略了該語句。

　　

 

 

 

完。

 

感謝大家的閱讀。

轉載請注明出處：http://www.cnblogs.com/Uncle-Keith/p/5803551.html