การกำหนดฟังก์ชัน JavaScript

ฟังก์ชัน JavaScript ถูกกำหนดด้วย function คำถามการกำหนดได้

คุณสามารถใช้ฟังก์ชัน聲明หรือฟังก์ชันการแสดงที่มีข้อความ。

การประกาศฟังก์ชัน

ในบทที่เรียนก่อนหน้านี้ คุณได้เรียนเกี่ยวกับการใช้聲明ฟังก์ชัน：

function functionName(parameters) {
   รหัสที่ต้องทำงาน
}

ฟังก์ชันที่ถูกประกาศจะไม่ทำงานทันที พวกเขาถูก“เก็บเอาไว้เพื่อใช้ในภายหลัง” และจะทำงานในภายหลัง ตอนที่พวกเขาถูกเรียกใช้

ตัวอย่าง

function myFunction(a, b) {
     return a * b;
}

ลองด้วยตัวเอง

สัญญาณจุดข้องใช้ในการแยกคำสั่งที่สามารถทำงานได้ใน JavaScript

เนื่องจากฟังก์ชัน聲明ไม่ใช่คำสั่งที่สามารถทำงานได้ และไม่มักจะปิดท้ายด้วยสัญญาณจุดข้อง

ฟังก์ชันใบ้ง่าย

ฟังก์ชัน JavaScript ก็สามารถใช้การแสดงที่มีข้อความเพื่อกำหนด

ฟังก์ชันใบ้ง่ายสามารถเก็บไว้ในตัวแปรได้

ตัวอย่าง

var x = function (a, b) {return a * b};

ลองด้วยตัวเอง

หลังจากเก็บฟังก์ชันในตัวแปร ตัวแปรนี้สามารถใช้เป็นฟังก์ชันได้

ตัวอย่าง

var x = function (a, b) {return a * b};
var z = x(4, 3);

ลองด้วยตัวเอง

上面的函數實際上是一個ฟังก์ชันที่ไม่มีชื่อ（沒有名稱的函數）。

ฟังก์ชันที่เก็บไว้ในตัวแปรไม่จำเป็นต้องมีชื่อ พวกเขาเสียงโดยทำการเรียกด้วยชื่อตัวแปรเสมอ

ฟังก์ชันดังกล่าวปิดท้ายด้วยสัญญาณจุดข้องได้เพราะมันเป็นส่วนหนึ่งของคำสั่งที่สามารถทำงานได้

Constructor Function()

เหมือนที่คุณเห็นในตัวอย่างก่อนหน้านี้，ฟังก์ชัน JavaScript ถูกกำหนดด้วย function ที่กำหนดโดยคำถาม

ฟังก์ชันก็สามารถผ่านทาง Function() 的內建 JavaScript 函數構造器來定義。

ตัวอย่าง

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

ลองด้วยตัวเอง

您實際上無需使用函數構造器。上面的例子這麼寫也是一樣的：

ตัวอย่าง

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);

ลองด้วยตัวเอง

大多數情況下，您可以避免在 JavaScript 中使用 new 關鍵詞。

函數提升

在本教程中稍早前，您已經學到了“提升”（hoisting）。

Hoisting 是 JavaScript 將聲明移動到當前作用域頂端的默認行為。

Hoisting 應用於變數聲明和函數聲明。

正因如此，JavaScript 函數能在聲明之前被調用：

myFunction(5);
 function myFunction(y) {
     return y * y;
}

使用表達式定義的函數不會被提升。

自調用函數

函數表達式可以作為“自調用”。

自調用表達式是自動被調用（開始）的，在不進行調用的情況下。

函數表達式會自動執行，假如表達式後面跟著 ()。

您無法對函數聲明進行自調用。

您需要在函數周圍添加括號，以指示它是一個函數表達式：

ตัวอย่าง

(function () {
    var x = "Hello!!";      // 我會調用我自己
}();

ลองด้วยตัวเอง

上面的函數實際上是一個匿名的自調用函數（沒有名稱的函數）。

函數可用作值

JavaScript 函數可被用作值：

ตัวอย่าง

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

ลองด้วยตัวเอง

JavaScript 函數可用在表達式中：

ตัวอย่าง

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;

ลองด้วยตัวเอง

函數是對象

JavaScript 中的 typeof 運算子會為函數返回 "function"。

但是最好是把 JavaScript 函数描述为对象。

JavaScript 函数都有属性和方法。

arguments.length 会返回函数被调用时收到的参数数目：

ตัวอย่าง

function myFunction(a, b) {
    return arguments.length;
}

ลองด้วยตัวเอง

toString() 方法以字符串返回函数：

ตัวอย่าง

function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();

ลองด้วยตัวเอง

ฟังก์ชันที่กำหนดเป็นของคุณของวัตถุ รู้จักว่าวิธีของวัตถุ

ฟังก์ชันที่ออกแบบมาเพื่อที่จะสร้างวัตถุใหม่ ก็รู้จักว่าวิธีวางแบบวัตถุ (วิธีสร้างวัตถุ)

ฟังก์ชันดาวน์ทาย์ฟังก์ชัน

ฟังก์ชันดาวน์ทาย์ฟังก์ชันอนุญาตให้ใช้สไตล์ที่สั้นๆ ในการเขียนฟังก์ชันเคล็ดลับ

คุณไม่จำเป็นต้องใช้คำว่า function และ return และวงเล็บเปิด-ปิด

ตัวอย่าง

// ES5
var x = function(x, y) {
  return x * y;
}
// ES6
const x = (x, y) => x * y;

ลองด้วยตัวเอง

ฟังก์ชันดาวน์ทาย์ฟังก์ชันไม่มี this ของตนเอง พวกเขาไม่เหมาะสมที่จะใช้ในการกำหนดวิธีของวัตถุ

ฟังก์ชันดาวน์ทาย์ฟังก์ชันไม่ได้ถูกเพิ่มขึ้น พวกเขาต้องถูกกำหนดก่อนการใช้

การใช้ const มีความปลอดภัยมากกว่า var เพราะฟังก์ชันเคล็ดลับเป็นค่าคงที่

ถ้าฟังก์ชันเป็นประโยคเดียว ก็สามารถละเลยคำว่า return และวงเล็บเปิด-ปิดได้ ดังนั้น การประกอบใช้มันอาจเป็นวิธีดีเช่นกัน:

ตัวอย่าง

const x = (x, y) => { return x * y };

ลองด้วยตัวเอง

IE11 หรือตัวเดิมไม่สนับสนุนฟังก์ชันดาวน์ทาย์ฟังก์ชัน