Javascript學習筆記之函數篇（五） : 構造函數

2019-11-20 13:53:36

字體：大中小

來源：轉載

供稿：網友

Javascript 中的構造函數與其他語言相比也是不同的。任何通過關鍵字 new 調用的函數都可以當做構造函數。
在構造函數體內，this 指向新創建的對象。如果構造函數體內沒有顯示的 return 表達式，那么我們就默認返回 this，也就是新建的對象。

復制代碼代碼如下:

function Foo() {
    this.bla = 1;
}
Foo.prototype.test = function() {
    console.log(this.bla);
};
var test = new Foo();

上面的代碼將 Foo 作為構造函數進行調用，并將新建對象的原型（__proto__）指向了 Foo.prototype。
如果我們在構造函數內定義返回的 return 表達式，構造函數就會返回整個表達式，但這個返回表達式必須為一個對象。

復制代碼代碼如下:

function Bar() {
    return 2;
}
new Bar(); // a new object
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
new Test(); // the returned object

如果 new 被省略，那么函數將不能返回一個新的對象。

復制代碼代碼如下:

function Foo() {
    this.bla = 1; // gets set on the global object
}
Foo(); // undefined

上面的例子可能在某些場景下也可以運行，但由于 Javascript 中 this 的工作機制，這里 this 將指向全局對象。

工廠模式

為了能夠不使用關鍵字 new，構造函數將不得不顯示返回一個值。

復制代碼代碼如下:

function Bar() {
    var value = 1;
    return {
        method: function() {
            return value;
        }
    }
}
Bar.prototype = {
    foo: function() {}
};
new Bar();
Bar();

上例中使不使用 new 來調用函數 Bar 達到的效果是一樣的，將會返回一個新建的包含 method 方法的對象，這里實際上就是一個閉包。
這里需要注意一點，new Bar() 將不會返回 Bar.prototype，而是在 return 表達式內函數 method 的原型對象。
上例中，使用 new 與否在功能上是無差異的。

通過工廠模式創建新的對象

我們經常被提醒不要使用 new，因為一旦忘記了它的使用將導致錯誤。
為了創建一個對象，我們更愿意使用工廠模式并在工廠模式內構造一個新的對象。

復制代碼代碼如下:

function Foo() {
var obj = {};
obj.value = 'blub';

    var private = 2;
    obj.someMethod = function(value) {
        this.value = value;
    }

    obj.getPrivate = function() {
        return private;
    }
    return obj;
}

盡管上例代碼比使用 new 時更不容易出錯，而且在使用私有變量時將更加方便，但同時也有一些不好的地方：

因為不能共享原型對象，所以需要更多的內存。
為了實現繼承，工廠模式需要拷貝另一個對象的所有方法或者將其作為新對象的原型。
放棄原型鏈只是為了避免使用 new，這似乎與 Javascript 語言的精神相悖。

總結

盡管使用 new 可能比較容易產生錯誤，但這并不能成為放棄使用原型鏈的原因。至于最后采取哪種方式，這需要根據應用的需求而定。最好的方式就是選擇一種風格并堅持下去。

簡單的說構造函數就是初始化一個實例對象，對象的prototype屬性是繼承一個實例對象。

上一篇：Javascript學習筆記之函數篇（六） : 作用域與命名空間