卡卡網(wǎng)

JavaScript 函數(shù)調(diào)用用于執(zhí)行函數(shù)代碼，函數(shù)內(nèi)部的代碼在函數(shù)被調(diào)用時(shí)執(zhí)行。了解如何調(diào)用函數(shù)以及如何設(shè)置this關(guān)鍵字將使你編寫更具表現(xiàn)力的代碼。在本文中，我將提供一些關(guān)于如何調(diào)用函數(shù)以及如何為每個(gè)調(diào)用方式確定this關(guān)鍵字的示例。

• 將函數(shù)作為函數(shù)調(diào)用
• 將函數(shù)作為方法調(diào)用
• 使用函數(shù)構(gòu)造函數(shù)調(diào)用函數(shù)

1、將函數(shù)作為函數(shù)調(diào)用

此方式指的是調(diào)用未定義為對(duì)象成員的函數(shù)。這是定義函數(shù)的最基本方式，它包括兩個(gè)函數(shù)聲明：

function hello() {
    alert('hello');
}

和函數(shù)表達(dá)式：

var hello = function() {
    alert('hello');
}

以這種方式調(diào)用的函數(shù)可以訪問this關(guān)鍵字，它的值是全局對(duì)象。這可能不是你希望看到的。你可能期望this引用父函數(shù)的作用域，但事實(shí)并非如此。這是一個(gè)例子。

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);

你可能期望obj.sum等于 6，但事實(shí)并非如此！

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(obj.sum); // undefined

相反，全局對(duì)象現(xiàn)在有一個(gè) sum 屬性?？匆豢矗?/p>

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(sum); // 6

在父函數(shù)將this值設(shè)為新變量

上例中，我們?nèi)粝?obj.sum=6 成立，那么可以在父函數(shù)將this值設(shè)為新變量，再在內(nèi)部函數(shù)中使用這個(gè)新變量。上面示例代碼改為：

var obj = {};
obj.add = function(val1, val2) {
    var that = this;
    var inner = function() {
        that.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);

代碼多了一行 var that = this; ，這條語(yǔ)法的作用是，將this（指obj對(duì)象）的值設(shè)置為變量that。然后把 this.sum 改為了 that.sum。

現(xiàn)在在內(nèi)部函數(shù)中，由于this關(guān)鍵字引用全局對(duì)象，我們想用它來引用obj對(duì)象。現(xiàn)在你可以記錄obj.sum并獲得你可能期望的結(jié)果：

var obj = {};
obj.add = function(val1, val2) {
    var that = this;
    var inner = function() {
        that.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(obj.sum); // 6

應(yīng)該記住，在單獨(dú)調(diào)用函數(shù)時(shí)（而不是作為對(duì)象的成員），this將引用全局對(duì)象。

2、將函數(shù)作為方法調(diào)用

在我看來，方法調(diào)用方式確實(shí)是最自然和預(yù)期的——它將this分配給調(diào)用它的對(duì)象。首先，我們來看一個(gè)方法調(diào)用的例子：

var sentence = {
    words: [],
    add: function(word) {
        this.words.push(word);
    },
    read: function() {
        var text = this.words.join(' ') + '.';
        console.log(text);
    }
};
sentence.add('The');
sentence.add('end');
sentence.read();

在這個(gè)例子中，我們可以使用add方法將單詞添加到句子中。該方法是使用方法調(diào)用方式調(diào)用的，因?yàn)樗蔷渥訉?duì)象的成員。如你所見，add方法使用this引用句子。所以在add和read方法中，使用this.words和使用sentence.words是一樣的。上面的代碼將記錄：

> The end.

這種方式特別好，因?yàn)樗捎昧撕笃诮壎?。這意味著this的值是在調(diào)用方法時(shí)確定的。這使得該方法具有高度可重用性?？纯聪旅娴暮瘮?shù)：

var set = function(key, val) {
    this[key] = val;
};

如果你使用基本函數(shù)調(diào)用直接調(diào)用此函數(shù)，你將把你的鍵和值添加到全局對(duì)象中。

set('name', 'Tyler');
console.log(name);
> Tyler

但是，由于 this 的值是在調(diào)用時(shí)確定的，因此你可以將此函數(shù)分配給對(duì)象，以便在對(duì)象上設(shè)置屬性。

var person = {};
person.set = set;
person.set('name', 'Joe');

同樣的set函數(shù)被添加為person對(duì)象的屬性。正如上面的示例中所看到的，將set方法作為person對(duì)象的成員調(diào)用可確保this引用person而不是全局對(duì)象。

console.log(person.name);
> Joe

3、使用函數(shù)構(gòu)造函數(shù)調(diào)用函數(shù)

在談?wù)摌?gòu)造函數(shù)調(diào)用之前，你應(yīng)該了解 JavaScript 是一種原型繼承語(yǔ)言。一切都是對(duì)象，每個(gè)對(duì)象都是使用其他對(duì)象作為原型創(chuàng)建的。這意味著不存在 JavaScript 類之類的東西。但是，由于許多程序員都熟悉并喜歡經(jīng)典語(yǔ)言，因此 JavaScript 提供了一種創(chuàng)建看起來非常像經(jīng)典語(yǔ)言的對(duì)象的方法。下面是一個(gè) JavaScript 類對(duì)象創(chuàng)建的簡(jiǎn)短示例：

function base() {
}
var child = new base();

這個(gè)例子，基本函數(shù)什么都不做，但我想演示如何從現(xiàn)有函數(shù)創(chuàng)建一個(gè)新對(duì)象。有關(guān)此過程的一些重要細(xì)節(jié)超出了本文的范圍，但出于此目的，你可以看到子對(duì)象是使用new base()創(chuàng)建的。

這將創(chuàng)建一個(gè)名為child的新對(duì)象，其構(gòu)造方法是base。意思是：

console.log(child.constructor)
> [Function: base]

如果使用new前綴調(diào)用函數(shù)，則會(huì)創(chuàng)建一個(gè)新對(duì)象，其中包含指向原始函數(shù)原型成員值的隱藏鏈接，并且this將綁定到新創(chuàng)建的對(duì)象。為了將其付諸實(shí)踐，讓我們?cè)谖覀兊募兕?ldquo;實(shí)例化”時(shí)傳遞一個(gè)值。

function base(number) {
    this.number = number;
}
var child = new base(100);

希望現(xiàn)在你可以猜到this在基本函數(shù)中指的是什么。

console.log(child.number);
> 100

由于base用作構(gòu)造函數(shù)，因此 this指的是從它創(chuàng)建的任何對(duì)象。

打算與新前綴一起使用的函數(shù)稱為構(gòu)造函數(shù)。

不建議這樣做，因?yàn)?JavaScript 不是作為經(jīng)典語(yǔ)言設(shè)計(jì)的，而是作為原型語(yǔ)言設(shè)計(jì)的。但是當(dāng)你閱讀更多代碼時(shí)，你肯定會(huì)遇到這種方式。

總結(jié)

本文通過示例，介紹了JavaScript函數(shù)調(diào)用的三種方式，以及this的使用。通過三種方式的了解，我們更傾向推薦使用方法調(diào)用函數(shù)這種方法，因?yàn)檫@種方法是最自然和預(yù)期的。

相關(guān)文章

• 【示例】講解JavaScript IIFE 與函數(shù)調(diào)用

標(biāo)簽: 函數(shù)調(diào)用