Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 函數調用

JavaScript 函數有4 種調用方式。

每種方式的不同方式在於this的初始化。


this關鍵字

一般而言,在Javascript中,this指向函數執行時的當前對象。

Note 注意this是保留關鍵字,你不能修改this的值。

調用JavaScript 函數

在之前的章節中我們已經學會瞭如何創建函數。

函數中的代碼在函數被調用後執行。


作為一個函數調用

實例

function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回20

嘗試一下»

以上函數不屬於任何對象。 但是在JavaScript 中它始終是默認的全局對象。

在HTML 中默認的全局對像是HTML 頁面本身,所以函數是屬於HTML 頁面。

在瀏覽器中的頁面對像是瀏覽器窗口(window 對象)。 以上函數會自動變為window 對象的函數。

myFunction() 和window.myFunction() 是一樣的:

實例

function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回20

嘗試一下»

Note 這是調用JavaScript 函數常用的方法, 但不是良好的編程習慣全局變量,方法或函數容易造成命名衝突的bug。

全局對象

當函數沒有被自身的對象調用?時, this的值就會變成全局對象。

在web 瀏覽器中全局對像是瀏覽器窗口(window 對象)。

該實例返回this的值是window對象:

實例

function myFunction() {
return this;
}
myFunction(); // 返回window 對象

嘗試一下»

Note 函數作為全局對象調用,會使this的值成為全局對象。
使用window 對像作為一個變量容易造成程序崩潰。

函數作為方法調用

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

以下實例創建了一個對象( myObject ),對像有兩個屬性( firstNamelastName ),及一個方法( fullName ):

實例

var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回"John Doe"

嘗試一下»

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

this對象,擁有JavaScript代碼。 實例中this的值為myObject對象。

測試以下! 修改fullName方法並返回this值:

實例

var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 返回[object Object] (所有者對象)

嘗試一下»

Note 函數作為對象方法調用,會使得this的值成為對象本身。

使用構造函數調用函數

如果函數調用前使用了new關鍵字,則是調用了構造函數。

這看起來就像創建了新的函數,但實際上JavaScript 函數是重新創建的對象:

實例

// 構造函數:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回"John"

嘗試一下»

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

Note 構造函數中this關鍵字沒有任何的值。
this的值在函數調用時實例化對象(new object)時創建。

作為函數方法調用函數

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

call()apply()是預定義的函數方法。 兩個方法可用於調用函數,兩個方法的第一個參數必須是對象本身。

實例

function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回20

實例

function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 返回20

兩個方法都使用了對象本身作為第一個參數。 兩者的區別在於第二個參數: apply傳入的是一個參數數組,也就是將多個參數組合成為一個數組傳入,而call則作為call的參數傳入(從第二個參數開始)。

在JavaScript嚴格模式(strict mode)下,在調用函數時第一個參數會成為this的值,即使該參數不是一個對象。

在JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是null 或undefined, 它將使用全局對象替代。

Note 通過call()或apply()方法你可以設置this的值,且作為已存在對象的新方法調用。