ฟังก์ชั่นเป็นบล็อกของรหัสที่ใช้ซ้ำได้ซึ่งขับเคลื่อนโดยเหตุการณ์หรือดำเนินการเมื่อมีการเรียก
JScript รองรับสองฟังก์ชั่น: หนึ่งคือฟังก์ชั่นภายในภาษา (เช่น evaler ()) และอื่น ๆ ถูกสร้างขึ้นด้วยตัวเอง
ตัวแปรที่ประกาศภายในฟังก์ชัน JavaScript (โดยใช้ VAR) เป็นตัวแปรท้องถิ่นดังนั้นจึงสามารถเข้าถึงได้ภายในฟังก์ชั่นเท่านั้น (ขอบเขตของตัวแปรนี้คือท้องถิ่น)
คุณสามารถใช้ตัวแปรโลคัลที่มีชื่อเดียวกันในฟังก์ชั่นที่แตกต่างกันเพราะฟังก์ชั่นที่ประกาศตัวแปรเท่านั้นที่สามารถรับรู้ได้
วิธีเรียกฟังก์ชัน
1. การโทรปกติ: functionName (พารามิเตอร์จริง ... )
2. โทรผ่านตัวแปรที่ชี้ไปที่ฟังก์ชัน:
var myvar = ชื่อฟังก์ชัน;
MyVar (พารามิเตอร์จริง ... );
ส่งคืนฟังก์ชัน
1. เมื่อฟังก์ชั่นไม่มีค่าส่งคืนที่ชัดเจนค่าที่ส่งคืนคือ "ไม่ได้กำหนด"
2. เมื่อฟังก์ชั่นมีค่าส่งคืนมันจะส่งคืนค่าตอบแทนไม่ว่าจะเป็น
เราสามารถส่งคืนฟังก์ชั่นไปยังสถานที่ที่เรียกโดยใช้คำสั่ง Return
เมื่อใช้คำสั่ง Return ฟังก์ชันจะหยุดการดำเนินการและส่งคืนค่าที่ระบุ
ฟังก์ชั่นมักจะส่งคืนค่าที่ไม่ซ้ำดังนั้นค่านี้อาจเป็นฟังก์ชันอื่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var box = function () {
var a = 1;
return function () {
การแจ้งเตือน (A ++)
-
-
Alert (box ()); // "function () {Alert (A ++)}" ปรากฏขึ้น
</script>
ที่นี่เราเพิ่งกำหนดค่าส่งคืนให้กับตัวแปรจากนั้นเราสามารถเรียกได้ว่าใช้ฟังก์ชั่นปกติ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var box = function () {
var a = 1;
return function () {
การแจ้งเตือน (++ A)
-
-
var newfunc = box ();
newfunc (); // 2
</script>
หากคุณต้องการให้ฟังก์ชั่นที่ส่งคืนดำเนินการทันทีคุณยังสามารถใช้ Box () () เพื่อเรียกใช้งานรหัสนี้
ฟังก์ชัน ECMASCRIPT ทั้งหมดจะถูกส่งผ่านด้วยค่าซึ่งหมายความว่าพารามิเตอร์จะไม่ถูกส่งผ่านโดยการอ้างอิง
PS: หากมีการอ้างอิงแบบผ่านโดยการอ้างอิงตัวแปรในฟังก์ชั่นจะเป็นตัวแปรส่วนกลางและสามารถเข้าถึงได้จากภายนอก
(1) ประเภทค่า: ตัวเลข, บูลีน, โมฆะ, ไม่ได้กำหนด
(2) ประเภทการอ้างอิง: วัตถุ, อาร์เรย์, ฟังก์ชั่น
ค่าประเภทการอ้างอิง: หมายถึงวัตถุเหล่านั้นที่เก็บไว้ในหน่วยความจำฮีปซึ่งหมายความว่าตัวแปรเป็นเพียงตัวชี้ซึ่งดำเนินการตำแหน่งอื่นในหน่วยความจำและวัตถุจะถูกบันทึกโดยตำแหน่งนั้น
สร้างฟังก์ชั่นที่ไม่ระบุชื่อ
การคัดลอกรหัสมีดังนี้:
การทำงาน(){
กลับ 'ลี'; // ฟังก์ชั่นที่ไม่ระบุชื่อเดี่ยวไม่สามารถเรียกใช้ได้และแม้ว่าพวกเขาจะสามารถรันได้ แต่ก็ไม่สามารถเรียกได้เพราะไม่มีชื่อ
-
มีการใช้งานมากมายของฟังก์ชั่นที่ไม่ระบุชื่อนี้ใน jQuery ประกาศฟังก์ชั่นที่ไม่ระบุชื่อโดยตรงและใช้งานทันที ข้อได้เปรียบของการใช้ฟังก์ชั่นที่ไม่ระบุชื่อคือพวกเขาสามารถหลีกเลี่ยงการกำหนดฟังก์ชั่นที่ไม่ได้ใช้ครั้งเดียวและปราศจากปัญหาการตั้งชื่อความขัดแย้ง ไม่มีแนวคิดของเนมสเปซใน JS ดังนั้นจึงเป็นเรื่องง่ายที่จะมีชื่อฟังก์ชั่นความขัดแย้ง เมื่อความขัดแย้งการตั้งชื่อเกิดขึ้นแล้วคนสุดท้ายก็ประกาศว่าจะได้รับชัยชนะ
ดำเนินการฟังก์ชั่นที่ไม่ระบุชื่อโดยการตรวจสอบด้วยตนเอง:
การคัดลอกรหัสมีดังนี้:
// ดำเนินการฟังก์ชั่นที่ไม่ระบุชื่อผ่านการตรวจสอบด้วยตนเอง
<script type = "text/javascript">
(function () {// (ฟังก์ชั่นที่ไม่ระบุชื่อ) (); ใส่ฟังก์ชันนิรนามในวงเล็บแรกและดำเนินการในวงเล็บที่สอง
การแจ้งเตือน ('Lee');
-
</script>
กำหนดค่าส่งคืนของฟังก์ชันที่ไม่ระบุชื่อให้กับตัวแปร:
การคัดลอกรหัสมีดังนี้:
// กำหนดค่าการส่งคืนของฟังก์ชันที่ไม่ระบุชื่อด้วยตนเองที่ดำเนินการกับตัวแปร
<script type = "text/javascript">
var box = (function () {
การแจ้งเตือน ('Lee');
- // popt "Lee";
การแจ้งเตือน (กล่อง); // ที่ไม่ได้กำหนดปรากฏขึ้น ถ้าการแจ้งเตือน (box ()) เขียนแล้วจะมีเพียง "ลี" จะปรากฏขึ้น
</script>
พารามิเตอร์ผ่านสำหรับฟังก์ชั่นที่ไม่ระบุชื่อด้วยตนเอง:
การคัดลอกรหัสมีดังนี้:
// แสดงตัวเองการถ่ายโอนพารามิเตอร์ของฟังก์ชันที่ไม่ระบุชื่อ
<script type = "text/javascript">
(ฟังก์ชั่น (อายุ) {
การแจ้งเตือน (อายุ);
}) (100); // ป๊อป 100
</script>
JavaScript สร้างฟังก์ชั่นแบบไดนามิก:
JavaScript รองรับการสร้างฟังก์ชั่นแบบไดนามิก ฟังก์ชั่นแบบไดนามิกจะต้องถูกกำหนดโดยวัตถุฟังก์ชั่น (ฟังก์ชั่นเป็นวัตถุในจาวาสคริปต์ซึ่งได้รับการแก้ไขและไม่เปลี่ยนแปลงมันกำหนดว่า "F" ของวัตถุฟังก์ชันจะต้องเป็นตัวพิมพ์ใหญ่เมื่อมันเป็นฟังก์ชั่นเรารู้ว่ามันเป็นคำหลักที่ใช้เมื่อกำหนดฟังก์ชัน: ฟังก์ชัน funname (x, y)
รูปแบบพื้นฐานสำหรับการสร้างฟังก์ชั่นแบบไดนามิก: VAR ตัวแปรชื่อ = ฟังก์ชันใหม่ ("พารามิเตอร์ 1", "พารามิเตอร์ 2", "พารามิเตอร์ n", "คำสั่งดำเนินการ");
ดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var square = ฟังก์ชันใหม่ ("x", "y", "var sum; sum = x+y; return sum;");
ผลลัพธ์ของการแจ้งเตือน ("สแควร์ (2,3) คือ:"+สแควร์ (2,3)); // ผลลัพธ์ของสแควร์ (2,3) คือ: 5
</script>
สแควร์เป็นฟังก์ชั่นที่สร้างขึ้นแบบไดนามิก แต่ละส่วนของเนื้อหาในวงเล็บหลังจากวัตถุฟังก์ชันจะต้องอยู่ในรูปแบบของสตริงนั่นคือมันจะต้องอยู่ในคำพูด ("" หรือ '')
รหัสนี้:
var square = ฟังก์ชันใหม่ ("x", "y", "var sum; sum = x+y; return sum;");
และรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นสแควร์ (x, y) {
var sum;
sum = x+y;
ผลรวมกลับ;
-
มันเหมือนกันทุกประการยกเว้นว่าหนึ่งเป็นฟังก์ชั่นไดนามิกและอื่น ๆ เป็นฟังก์ชั่นคงที่
ทำไมเราถึงแบ่งรหัสออกเป็นรหัสชิ้นเล็ก ๆ ? ข้อได้เปรียบของการแบ่งสตริงเป็นหลายสายอิสระคือเราสามารถเปลี่ยนฟังก์ชั่นของฟังก์ชั่นได้ตลอดเวลาโดยการปรับเปลี่ยนบางส่วนของสตริง
ฟังก์ชั่นการโทรกลับ
การโทรกลับคือกระบวนการโทรของฟังก์ชั่น จากนั้นเริ่มต้นด้วยการทำความเข้าใจกระบวนการเรียกนี้ ฟังก์ชั่น A มีพารามิเตอร์ซึ่งเป็นฟังก์ชัน b เมื่อฟังก์ชั่น A ถูกดำเนินการฟังก์ชัน B จะถูกดำเนินการ จากนั้นกระบวนการนี้เรียกว่าการโทรกลับ
ในความเป็นจริงจีนยังเข้าใจง่ายเช่นการโทรกลับการโทรกลับหมายถึงการโทรกลับ หลังจากจบฟังก์ชั่น A แล้วฟังก์ชั่นการโทร B ในภายหลัง
มันจะต้องชัดเจนที่นี่: ฟังก์ชั่น B ถูกส่งไปยังฟังก์ชัน A ในรูปแบบของพารามิเตอร์ดังนั้นฟังก์ชัน B เรียกว่าฟังก์ชันการเรียกกลับ
ฟังก์ชั่นเอฟเฟกต์ส่วนใหญ่ใน jQuery เกี่ยวข้องกับฟังก์ชั่นการโทรกลับ ฟังก์ชันเอฟเฟกต์ jQuery
ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ ("div"). แสดง (1,000, function () {
// ฟังก์ชั่นการโทรกลับ
-
</script>
ที่นี่ฟังก์ชันการโทรกลับสามารถแทนที่ด้วยอินสแตนซ์:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ ("div"). แสดง (1,000, function () {
console.log ("Hello World")
-
</script>
การเรียกกลับเป็นจริงเมื่อมีการดำเนินการฟังก์ชั่นฟังก์ชั่นที่ดำเนินการในขณะนี้คือฟังก์ชั่นการโทรกลับที่เรียกว่า แล้วล่ะ? เข้าใจง่าย ...
ความแตกต่างระหว่างวิธีการและฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
var arr = [1,2,3,4,5]
var a = 12; // ตัวแปร: ฟรี
arr.a = 5; // แอตทริบิวต์: เป็นของวัตถุ
ฟังก์ชั่นแสดง () // ฟังก์ชั่น: ฟรี
-
การแจ้งเตือน ('A');
-
arr.fn = function () // วิธี: เป็นของวัตถุ
-
การแจ้งเตือน ('B');
-
ในความเป็นจริงวิธีการเป็นฟังก์ชัน แต่วิธีการมีวัตถุที่เป็นของมัน
อย่างที่เราทราบฟังก์ชั่นการเชื่อมโยงในการคลิกเหตุการณ์
ไวยากรณ์:
$ (selector) .click (ฟังก์ชั่น)
คำอธิบายพารามิเตอร์
ฟังก์ชั่นเป็นทางเลือก ระบุฟังก์ชั่นที่ทำงานเมื่อเหตุการณ์คลิกเกิดขึ้น
แบบฟอร์มนี้มักจะเห็นใน jQuery มันใช้ฟังก์ชั่นเป็นพารามิเตอร์เพื่อเพิ่มตัวจัดการเหตุการณ์ในวิธีการ
ฟังก์ชั่น JS Global
ฟังก์ชั่นทั่วโลกไม่ใช่แนวคิดที่มีคุณสมบัติหรือวิธีการของวัตถุในตัว ฟังก์ชั่นทั่วโลกไม่ได้เป็นของวัตถุในตัว
JavaScript มีฟังก์ชั่นทั่วโลก 7 ฟังก์ชั่นต่อไปนี้เพื่อให้ฟังก์ชั่นที่ใช้กันทั่วไปบางอย่าง:
Escape (), eval (), isfinite (), isnan (), parsefloat (),
parseint (), unescape ()
ฟังก์ชั่นหลายฟังก์ชั่น
ใช้เป็นตัวสร้างคลาส
การคัดลอกรหัสมีดังนี้:
คลาสฟังก์ชัน () {}
class.prototype = {};
var item = คลาสใหม่ ();
ใช้เป็นปิด
การคัดลอกรหัสมีดังนี้:
(การทำงาน(){
// ขอบเขตอิสระ
-
เรียกว่าเป็นตัวสร้าง
ตัวสร้างที่เรียกว่าคือการสร้างวัตถุใหม่ผ่านฟังก์ชั่นนี้
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นทดสอบ () {
this.x = 10;
-
var obj = การทดสอบใหม่ ();
การแจ้งเตือน (obj.x); // ป๊อป 10;
</script>
ตัวดำเนินการใหม่สามารถใช้เพื่อรวมตัวสร้างที่กำหนดไว้ล่วงหน้าเช่น Object (), วันที่ () และฟังก์ชัน () เพื่อสร้างและเริ่มต้นวัตถุ การเขียนโปรแกรมเชิงวัตถุเป็นคุณสมบัติที่ทรงพลังของความสามารถในการกำหนดตัวสร้างที่กำหนดเองเพื่อสร้างวัตถุที่กำหนดเองที่ใช้ในสคริปต์ ตัวสร้างที่กำหนดเองถูกสร้างขึ้นเพื่อให้วัตถุที่มีคุณสมบัติที่กำหนดสามารถสร้างได้ ด้านล่างเป็นตัวอย่างของฟังก์ชั่นที่กำหนดเอง (หมายเหตุการใช้คำหลักนี้)
การคัดลอกรหัสมีดังนี้:
วงกลมฟังก์ชัน (XPoint, Ypoint, Radius) {
this.x = xpoint; // x พิกัดของศูนย์กลางของวงกลม
this.y = ypoint; // พิกัด y ของศูนย์กลางของวงกลม
this.r = รัศมี; // รัศมีของวงกลม
-
เมื่อเรียกตัวสร้างวงกลมค่าของจุดกึ่งกลางและรัศมีของวงกลมจะได้รับ (องค์ประกอบทั้งหมดเหล่านี้จำเป็นต้องกำหนดวัตถุวงกลมที่ไม่ซ้ำกันอย่างสมบูรณ์) ในตอนท้ายวัตถุวงกลมมีคุณสมบัติสามประการ นี่คือวิธีแสดงวัตถุวงกลม
var acircle = วงกลมใหม่ (5, 11, 99);
ข้อดีของการใช้ฟังก์ชั่นคอนสตรัคเตอร์คือสามารถรับพารามิเตอร์บางอย่างเมื่อสร้างวัตถุ
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
การทดสอบฟังก์ชั่น (ชื่อ) {
this.oCcupation = "coder";
this.name = ชื่อ;
this.whoareyou = function () {
ส่งคืน "ฉัน" + this.name + "และฉันเป็น" + this.oCcupation;
-
-
var obj = การทดสอบใหม่ ('trigkit4'); // สร้างวัตถุต่าง ๆ โดยใช้ตัวสร้างเดียวกัน
var obj2 = การทดสอบใหม่ ('นักเรียน');
obj.whoareyou (); // "ฉันเป็นทริกเกอร์ 4 และฉันเป็นมุม"
obj2.whoareyou (); // "ฉันเป็นนักเรียนและฉันเป็นมุม"
</script>
โดยการประชุมเราควรใช้ประโยชน์จากตัวอักษรตัวแรกของฟังก์ชั่นคอนสตรัคเตอร์เพื่อแยกความแตกต่างอย่างมีนัยสำคัญจากฟังก์ชั่นทั่วไป
ฟังก์ชั่นการกำหนดสองรูปแบบต่อไปนี้เทียบเท่า
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
test var = function () {
การแจ้งเตือน ("Hello World");
-
การแจ้งเตือน (typeof (test)); // ฟังก์ชันเอาต์พุต
</script>
นี่คือการทดสอบตัวแปรซึ่งค่าเริ่มต้นถูกกำหนดให้กับเอนทิตีฟังก์ชัน
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน ("Hello World");
-
การแจ้งเตือน (typeof (test)); // ฟังก์ชันเอาต์พุต
</script>
ดูแบบฟอร์มฟังก์ชั่นที่กำหนดต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน ("Hello World");
-
test (); // มันส่งออกจริง ๆ สวัสดีใช่ไหม?
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน ("สวัสดี");
-
ทดสอบ (); // เท่านั้นสวัสดีคือเอาต์พุต
</script>
เห็นได้ชัดว่าฟังก์ชั่นแรกไม่ทำงานใช่มั้ย เรารู้ว่าเอ็นจิ้นการแยกวิเคราะห์ JavaScript ไม่ได้เรียกใช้งานรหัสทีละบรรทัด แต่ดำเนินการรหัสทีละชิ้น ในการวิเคราะห์และการดำเนินการของโปรแกรมเดียวกันงบฟังก์ชันของสูตรคำจำกัดความจะถูกดำเนินการก่อนดังนั้นตรรกะรหัสที่กำหนดครั้งแรกได้ถูกเขียนทับโดยที่สองดังนั้นฟังก์ชันเดียวกันจะถูกดำเนินการสองครั้งเท่านั้น
ทำหน้าที่เป็นค่า
ฟังก์ชั่นไม่เพียง แต่เป็นไวยากรณ์ แต่ยังเป็นค่าใน JS กล่าวคือฟังก์ชั่นสามารถกำหนดให้กับตัวแปรเก็บไว้ในแอตทริบิวต์ของวัตถุหรือองค์ประกอบของอาร์เรย์และส่งผ่านไปยังฟังก์ชั่นอื่นเป็นพารามิเตอร์
ชื่อของฟังก์ชั่นนั้นมองไม่เห็นจริง ๆ มันเป็นเพียงชื่อของตัวแปรซึ่งหมายถึงวัตถุฟังก์ชัน
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นสแควร์ (x, y) {
กลับ x*y;
-
var s = สี่เหลี่ยม; // s และสแควร์อ้างถึงฟังก์ชั่นเดียวกัน
สแควร์ (2,3); // 6
s (2,4); // 8
</script>
นอกเหนือจากการกำหนดฟังก์ชั่นให้กับตัวแปรแล้วฟังก์ชั่นยังสามารถกำหนดให้กับแอตทริบิวต์ของวัตถุ เมื่อฟังก์ชั่นถูกเรียกว่าเป็นแอตทริบิวต์ของวัตถุฟังก์ชั่นจะเรียกว่าวิธีการ
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var obj = {square: function (x, y) {// วัตถุถูกวัดโดยตรง
กลับ x*y;
-
var ect = obj.square (2,3);
</script>
คุณลักษณะต้นแบบ
แต่ละฟังก์ชั่นมีแอตทริบิวต์ต้นแบบซึ่งชี้ไปที่การอ้างอิงไปยังวัตถุซึ่งเรียกว่าวัตถุต้นแบบ
ดู: บันทึกการเรียนรู้ JavaScript (V) ต้นแบบและห่วงโซ่ต้นแบบ
ฟังก์ชั่นขั้นสูง
ฟังก์ชั่นการสั่งซื้อที่สูงขึ้นที่นี่ไม่ใช่ฟังก์ชั่นลำดับที่สูงกว่าในจำนวนสูง ฟังก์ชั่นลำดับที่สูงกว่าที่เรียกว่าเป็นฟังก์ชันที่ทำงานฟังก์ชั่น ได้รับฟังก์ชั่นหนึ่งฟังก์ชั่นหรือมากกว่าเป็นพารามิเตอร์และส่งคืนฟังก์ชั่นใหม่