卡卡網(wǎng)

JavaScript 函數(shù)調(diào)用用于執(zhí)行函數(shù)代碼，函數(shù)內(nèi)部的代碼在函數(shù)被調(diào)用時執(zhí)行。了解如何調(diào)用函數(shù)以及如何設置this關(guān)鍵字將使你編寫更具表現(xiàn)力的代碼。在本文中，我將提供一些關(guān)于如何調(diào)用函數(shù)以及如何為每個調(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)用未定義為對象成員的函數(shù)。這是定義函數(shù)的最基本方式，它包括兩個函數(shù)聲明：

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

和函數(shù)表達式：

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

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

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

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

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

相反，全局對象現(xiàn)在有一個 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值設為新變量

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

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; ，這條語法的作用是，將this（指obj對象）的值設置為變量that。然后把 this.sum 改為了 that.sum。

現(xiàn)在在內(nèi)部函數(shù)中，由于this關(guān)鍵字引用全局對象，我們想用它來引用obj對象?，F(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

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

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

在我看來，方法調(diào)用方式確實是最自然和預期的——它將this分配給調(diào)用它的對象。首先，我們來看一個方法調(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();

在這個例子中，我們可以使用add方法將單詞添加到句子中。該方法是使用方法調(diào)用方式調(diào)用的，因為它是句子對象的成員。如你所見，add方法使用this引用句子。所以在add和read方法中，使用this.words和使用sentence.words是一樣的。上面的代碼將記錄：

> The end.

這種方式特別好，因為它采用了后期綁定。這意味著this的值是在調(diào)用方法時確定的。這使得該方法具有高度可重用性?？纯聪旅娴暮瘮?shù)：

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

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

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

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

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

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

console.log(person.name);
> Joe

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

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

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

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

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

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

如果使用new前綴調(diào)用函數(shù)，則會創(chuàng)建一個新對象，其中包含指向原始函數(shù)原型成員值的隱藏鏈接，并且this將綁定到新創(chuàng)建的對象。為了將其付諸實踐，讓我們在我們的假類“實例化”時傳遞一個值。

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)建的任何對象。

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

不建議這樣做，因為 JavaScript 不是作為經(jīng)典語言設計的，而是作為原型語言設計的。但是當你閱讀更多代碼時，你肯定會遇到這種方式。

總結(jié)

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

相關(guān)文章

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

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