Javascript 建構函式詳解_基礎知識

來源:互聯網
上載者:User

一、什麼是建構函式

在一些物件導向的語言,如Java、C++、PHP中,建構函式是很常見的。在Javascript中建構函式首先是一個普通的函數,它可以使用new 操作符來調用,並產生一個特殊類型的對象。

複製代碼 代碼如下:

// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");

在上面這個執行個體中benjamin是一個Benjamin對象,那麼它是如何來執行個體化的呢?

複製代碼 代碼如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);

正如我們所看到的,“Benjamin”建構函式僅僅是接收傳遞過來的參數,並把它們賦值給this對象。這是因為當建構函式被new操作符調用時,建構函式的this對象賦值為new操作返回的對象。
這意味著上面的代碼等同於:

複製代碼 代碼如下:

benjamin = {
 "username": "zuojj",
 "sex": "male"
}

二、為什麼使用建構函式

為什麼使用建構函式,有以下幾個方面的原因:
1.使用建構函式,意味著所有的這些對象,都可以使用相同的基本結構建立
2.使用建構函式,意味著“benjamin”對象被明確的標記為“Benjamin”函數的執行個體

複製代碼 代碼如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
 "username": "zuojj",
 "sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);

3.使用建構函式,意味著我們可以在原型上定義公用方法,供多個執行個體共用

複製代碼 代碼如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
Benjamin.prototype.getName = function() {
 return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());

三、注意事項

1.new 關鍵字
在執行個體化建構函式的時候一定不要忘了使用new關鍵字,是否使用new關鍵字,對this對象的影響很大,不用new關鍵字的情況下,this對象會指向全域對象(window in browser and global in node)。因此定義建構函式時,建議函數名稱首字母大寫。
2.如果被調用的函數沒有顯式的 return 運算式,則隱式的會返回 this 對象 – 也就是新建立的對象,否則將會影響返回的結果,但僅限於返回的是一個對象

複製代碼 代碼如下:

function Bar() {
    return 2;
}
var bar = new Bar();
//返回新建立的對象
//Outputs: Bar {}
console.log(bar);
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//返回的對象
//Outputs: Object {foo: 1}
console.log(test);

我們需要注意的是:
a) new Bar() 返回的是新建立的對象,而不是數位字面值 2。 因此 new Bar().constructor === Bar,但是如果返回的是數字對象,結果就不同了;
b) 這裡得到的 new Test()是函數返回的對象,而不是通過new關鍵字新建立的對象,如下所示:

複製代碼 代碼如下:

function Bar() {
    return 2;
}
var bar = new Bar();
function BarN() {
 return new Number(2);
}
var barn = new BarN();
//Outputs: true
console.log(bar.constructor === Bar);
//Outputs: Number {}
console.log(barn);
//Ouputs: false
console.log(barn.constructor === BarN);
//Outputs: true
console.log(barn.constructor === Number);
/* -------------------------------------- */
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//Outputs: undefined
console.log(test.value);
//Ouputs: 1
console.log(test.foo);

以上就是對建構函式的總結,希望對初學者有所協助,文中不妥之處,望批評、斧正。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.