深入理解：全面掌握JavaScript 函數定義方式

入理解：全面掌握JavaScript 函數定義方式

1.函數的定義

通俗的來講，函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼快。它是 JavaScript 語言一個即重要又復雜的組成部分，任何一個 JavaScript 框架，如 Dojo、jQuery 等都是有成百上千個函數組成的。函數的使用不僅提高了代碼本身的可讀性，也為它的擴展提供了可能，同時還降低了維護成本，加快 web 項目的開放進度；尤其是在多人參與的敏捷開發中。

通常函數的定義是通過 function 語句實現的:

清單 1.函數定義

funcname 是要定義的函數名，是一個標識符，而不是字符串或者表達式；緊跟函數名后面的是用括號括起來的參數列表，參數之間用逗號隔開；最后，也是這個函數的核心部分：函數體，它是由一行或者多行代碼組成并且是用大括號括起來的。

函數定義描述的是一個靜態的程序結構，當 JavaScript 解析器遇到一個函數定義時，它就被解析并存儲構成函數體的語句，然后定義一個和該函數名同名的全局或者某個對象屬性來保存。當該函數被調用時，里面的函數體才真正的被執行。如：

清單 2

2. Function()構造函數

定義一個函數，最為普遍的是直接使用 function 關鍵字來定義，又稱函數聲明式(function declaration),如上面定義的 f 函數，但是 function 語句并非是定義函數的惟一方法。在 ECMAScript v1 和 JavaScript v1.1 中，還可以使用 Function () 構造函數和 new 運算符動態地定義函數，如下：

var myfunc=new Function ('x', 'y', 'alert(x+y)');

這行代碼創建了一個新函數，該函數和下面使用 function 方法定義的函數是等價的:

清單 3.

Function () 定義中，前面兩個是參數，參數可以是任意多個字符串；第三個是函數體，可以包含任何 JavaScript 語句，語句之間用分號隔開。如果沒有參數，傳一個函數體即可。由于傳遞給 Function () 函數中，沒有一個字符串是用來聲明函數名的，所以它是一個匿名函數。

使用 Function()構造函數來定義函數允許我們動態的來定義和編譯一個函數，而不是限定在 function 預編譯的函數體中。但同時也會帶來負面影響，因為每次調用這個函數都要對它進行編譯，對性能有一定的影響，尤其是在循環體中。

3. 函數直接量

函數定義的第三種方式是函數直接量，ECMAScript v3 定義了函數直接量，JavaScript 1.2 實現了它。函數直接量是一個表達式，它即可以定義一個匿名函數，也可以定義一個帶函數名的函數:

清單 4.

注意：調用時得用定義的變量名，如f(4),而不能fact(4).

函數直接量和使用 Function()構造函數來創建函數的方法非常相似，因為兩種方法都是通過 JavaScript 的表達式創建的，而不是由語句創建的；所以使用他們的方式也更靈活，尤其是那些只使用一次，而且不需要命名的函數。比如把它傳遞給其他的函數:

清單 5.

4.區別

三種方式的區別，可以從作用域、效率以及加載順序來區分。首先，從作用域上來說，函數聲明式和函數直接量使用的是局部變量，而 Function()構造函數卻是全局變量:

清單 6.

其次是執行效率上來說，Function()構造函數的效率要低于其他兩種方式，尤其是在循環體中，因為構造函數每執行一次都要重新編譯，并且生成新的函數對象:

清單 7.

由此可見，在循環體中，函數直接量的執行效率是 Function()構造函數的 0.6 倍。所以在 Web 開發中，為了加快網頁加載速度，提高用戶體驗，我們不建議選擇 Function ()構造函數方式來定義函數。

最后是加載順序，function 方式(即函數聲明式)是在 JavaScript 編譯的時候就加載到作用域中,而其他兩種方式則是在代碼執行的時候加載，如果在定義之前調用它，則會返回 undefined：

清單 8.

言

當深入 JavaScript 編程世界時，您將遇到的基本概念之一是方法和函數之間的區別。雖然方法和函數在 JavaScript 中都起著至關重要的作用，但它們具有不同的目的并以不同的方式使用。在這篇博文中，我們將揭開這兩個概念的神秘面紗，讓您清楚地了解它們的差異。

讓我們深入了解有關 function 和 method 的更多詳細信息：

了解 JavaScript 中的函數

function 的核心是執行特定任務或一組任務的可重用代碼塊。將其視為一組預定義的指令，您可以在需要時調用或調用它們。函數就像 JavaScript 代碼的構建塊，允許您將復雜的任務分解為更小的、可管理的部分。

這是一個函數的基本示例：

function greet(name) {
  return "Hello, " + name + "!";
}

在此代碼段中， greet 是一個函數，它采用單個參數 name ，并返回問候語字符串。 JavaScript 中的函數用途廣泛，可以在各種上下文中使用，從像這樣的簡單操作到復雜的邏輯。

JavaScript 中的方法是什么？

現在，我們來談談方法。 JavaScript 中的方法本質上是一個函數，但有一個關鍵的區別——它與一個對象關聯。方法是存儲為對象屬性的函數，用于定義該對象的行為。下面舉個例子來說明：

let person={
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

在此示例中， fullName 是 person 對象的方法。它使用 this 關鍵字來訪問對象的屬性。

主要區別

讓我們重點介紹 JavaScript 中函數和方法之間的主要區別：

所有權：

函數是獨立的代碼塊。
方法是綁定到對象的函數。

調用

函數直接通過名稱調用，例如 functionName() 。
方法是通過使用點表示法的對象調用的，例如 object.method() 。

目的

功能多種多樣，可以執行多種任務。
方法專門用于與特定對象相關的操作。

結論

理解 JavaScript 中 methods 和 functions 之間的區別對于編寫清晰高效的代碼至關重要。函數提供了模塊化和可重用性，而方法則為我們提供了一種遵循面向對象編程原則將行為封裝在對象內的方法。

總之，雖然所有方法都是函數，但并非所有函數都是方法。區別在于它們與對象的關聯以及它們如何在這些對象的上下文中使用。

JavaScript 函數有 4 種調用方式。

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

this 關鍵字

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

	注意 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

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

全局對象

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

在 web 瀏覽器中全局對象是瀏覽器窗口（window 對象）。

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

實例

function myFunction() {

return this;

}

myFunction(); // 返回 window 對象

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

函數作為方法調用

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

以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName 和 lastName), 及一個方法 (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] (所有者對象)

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

使用構造函數調用函數

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

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

實例

// 構造函數:

function myFunction(arg1, arg2) {

this.firstName=arg1;

this.lastName=arg2;

}

// Thiscreates a new object

var x=new myFunction("John","Doe");

x.firstName; // 返回 "John"

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

	構造函數中 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, 它將使用全局對象替代。

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

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：談談對delphi的感受
下一篇：外貿營銷網站該如何準備素材？6000字總結告訴你

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

深入理解：全面掌握JavaScript 函數定義方式

入理解：全面掌握JavaScript 函數定義方式

1.函數的定義

2. Function()構造函數

3. 函數直接量

4.區別

言

了解 JavaScript 中的函數

JavaScript 中的方法是什么？

主要區別

結論

您的項目需求