最新的Web開發教程
 

JavaScript函數調用


JavaScript函數可以在4種不同的方式來調用。

每一種方法的不同之處是如何this被初始化。


this關鍵字

在JavaScript中,所謂的東西this是“擁有”當前代碼的對象。

的值this ,在一個功能中使用時,是“擁有”的功能的對象。

注意, this不是一個變量。 它是一個關鍵字。 你不能改變的值this


調用javascript函數

你已經知道,當“東西”調用它的JavaScript函數中的代碼將被執行。

定義的功能時,不執行在一個函數的代碼。 在調用函數時,它被執行。

有些人用術語“ 調用函數 ”而不是“ 調用函數 ”。

這也是很常見的說:“在一個函數調用”,“啟動功能”,或“執行功能”。

在本教程中,我們將使用調用 ,因為JavaScript函數可以不被稱為調用。


調用一個函數作為功能

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) will return 20
試一試»

上面的函數不屬於任何對象。 但在JavaScript中總有一個缺省全局對象。

在HTML中的默認全局對象是HTML網頁本身,所以上述的函數“屬於”HTML頁面。

在瀏覽器的頁面對象是瀏覽器窗口。 上面的函數自動成為一個窗口函數。

myFunction()window.myFunction()是相同的功能:

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) will also return 20
試一試»

這是調用一個JavaScript函數的一種常見方式,但不是一個很好的做法。
全局變量,方法或功能可以輕鬆地創建名稱衝突和錯誤在全局對象。


全局對象

當一個函數被稱為無主物,值this成為全局對象。

在網絡瀏覽器的全局對象是瀏覽器窗口。

此示例返回窗口對象的值, this

function myFunction() {
    return this;
}
myFunction();                // Will return the window object
試一試»

調用一個函數作為一個全球性的功能,使價值this是全局對象。
使用window對象作為變量可以很容易地你的程序崩潰。


調用函數作為方法

在JavaScript中,你可以定義函數作為對象的方法。

下面的示例創建一個對象( myObject ),具有兩個屬性( firstNamelastName )和方法( fullName ):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"
試一試»

fullName的方法是一個函數。 函數所屬的對象。 myObject是該函數的所有者。

所謂的事情this是“擁有”的JavaScript代碼的對象。 在這種情況下的價值thismyObject

測試一下吧! 更改fullName方法返回的值, this

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Will return [object Object] (the owner object)
試一試»

調用函數作為對象的方法,使價值this是對象本身。


調用函數與函數構造

如果一個函數調用前面加了new的關鍵字,這是一個構造函數調用。

它看起來像你創建一個新的功能,但由於JavaScript函數是對象實際上創建一個新的對象:

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // Will return "John"
試一試»

構造函數調用創建一個新對象。 新對象將繼承它的構造函數的屬性和方法。

this關鍵字在構造函數中不具有的價值。
this將是被調用函數時創建的新對象。


調用函數與函數法

在JavaScript中,函數是對象。 JavaScript函數具有屬性和方法。

call()apply()是預定義的JavaScript函數的方法。 這兩種方法都可以用來調用的功能,並且這兩種方法必須具有所有者對象作為第一參數。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // Will return 20
試一試»

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // Will also return 20
試一試»

這兩種方法都需要一個所有者對象作為第一個參數。 唯一的區別在於call()分別取函數參數和apply()取函數的參數在數組中。

在JavaScript嚴格模式,第一個參數就值this在調用的功能,即使參數不是一個對象。

在“非嚴格”模式下,如果第一個參數的值為null或undefined,它被替換成全局對象。

隨著call()apply()可以設置的值, this和調用一個函數作為現有對象的新方法。