1. ฟังก์ชั่นนิรนาม
ฟังก์ชั่นเป็นวัตถุที่ยืดหยุ่นที่สุดใน JavaScript ที่นี่เราเพิ่งอธิบายจุดประสงค์ของฟังก์ชั่นที่ไม่ระบุชื่อ ฟังก์ชั่นที่ไม่ระบุชื่อ: พวกเขาเป็นฟังก์ชั่นที่ไม่มีชื่อฟังก์ชั่น
1.1 คำจำกัดความของฟังก์ชั่น ก่อนอื่นมาแนะนำคำจำกัดความของฟังก์ชั่นสั้น ๆ มันสามารถแบ่งออกเป็นสามวิธี
คนแรก: นี่เป็นเรื่องธรรมดาที่สุด
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น double (x) {
กลับ 2 * x;
-
วิธีที่สอง: วิธีนี้ใช้ตัวสร้างฟังก์ชั่นซึ่งใช้ทั้งรายการพารามิเตอร์และฟังก์ชันตัวเป็นสตริงซึ่งไม่สะดวกมากและไม่แนะนำ
การคัดลอกรหัสมีดังนี้:
var double = ฟังก์ชันใหม่ ('x', 'return 2 * x;');
ประเภทที่สาม:
var double = function (x) {return 2* x; -
โปรดทราบว่าฟังก์ชั่นทางด้านขวาของ "=" เป็นฟังก์ชันที่ไม่ระบุชื่อ หลังจากสร้างฟังก์ชั่นฟังก์ชั่นจะถูกกำหนดให้กับสแควร์ตัวแปร
1.2 การสร้างฟังก์ชั่นที่ไม่ระบุชื่อ
วิธีแรก: กำหนดฟังก์ชั่นสแควร์ที่กล่าวถึงข้างต้นซึ่งเป็นหนึ่งในวิธีที่ใช้กันมากที่สุด
วิธีที่สอง:
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (x, y) {
การแจ้งเตือน (x + y);
}) (ยี่สิบสาม);
ที่นี่มีการสร้างฟังก์ชั่นที่ไม่ระบุชื่อ (ในวงเล็บแรก) และตัวยึดที่สองใช้เพื่อเรียกฟังก์ชันที่ไม่ระบุชื่อและส่งผ่านในพารามิเตอร์
2. ปิด
คำภาษาอังกฤษสำหรับการปิดคือการปิดซึ่งเป็นส่วนสำคัญของ JavaScript เนื่องจากการใช้การปิดสามารถลดจำนวนรหัสของเราได้อย่างมากทำให้รหัสของเราดูชัดเจนขึ้น ฯลฯ ในระยะสั้นฟังก์ชั่นมีประสิทธิภาพมาก
ความหมายของการปิด: เพื่อให้มันตรงไปตรงมาการปิดเป็นฟังก์ชั่นการทำรัง ฟังก์ชั่นด้านในสามารถใช้ตัวแปรทั้งหมดของฟังก์ชันด้านนอกได้แม้ว่าฟังก์ชั่นด้านนอกจะถูกดำเนินการ (ซึ่งเกี่ยวข้องกับโซ่ขอบเขต JavaScript)
ตัวอย่างที่ 1
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นการตรวจสอบ () {
var str = 'rain-man';
settimout (
ฟังก์ชัน () {แจ้งเตือน (str); } // นี่เป็นฟังก์ชันที่ไม่ระบุชื่อ
, 2000);
-
การตรวจสอบ ();
ตัวอย่างนี้ดูง่ายมาก หลังจากการวิเคราะห์อย่างรอบคอบเกี่ยวกับกระบวนการดำเนินการแล้วยังมีจุดความรู้มากมาย: การดำเนินการของฟังก์ชั่นการตรวจสอบนั้นทันที (อาจใช้เวลาเพียง 0.00001 มิลลิวินาที) ตัวแปร STR ถูกสร้างขึ้นในร่างกายของฟังก์ชั่นการตรวจสอบ หลังจากดำเนินการตรวจสอบแล้ว STR จะไม่ถูกปล่อยออกมา นี่เป็นเพราะฟังก์ชั่นที่ไม่ระบุชื่อใน Settimeout มีการอ้างอิงถึง Str STR ถูกปล่อยออกมาหลังจาก 2 วินาทีเท่านั้น
ตัวอย่างที่ 2 เพิ่มประสิทธิภาพรหัส
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น fortimeout (x, y) {
การแจ้งเตือน (x + y);
-
ฟังก์ชั่นการหน่วงเวลา (x, y, เวลา) {
settimeout ('fortimeout (' + x + ',' + y + ')', เวลา);
-
-
* ฟังก์ชั่นการหน่วงเวลาข้างต้นอ่านยากมากและไม่ใช่เรื่องง่ายที่จะเขียน แต่ถ้าคุณใช้การปิดรหัสอาจชัดเจนขึ้น
* ฟังก์ชั่นการหน่วงเวลา (x, y, เวลา) {
* settimout (
* การทำงาน(){
* fortimeout (x, y)
-
* , เวลา);
-
-
3. ยกตัวอย่าง
การใช้ฟังก์ชั่นที่ไม่ระบุชื่อที่ใหญ่ที่สุดคือการสร้างการปิด (หนึ่งในคุณสมบัติของภาษาจาวาสคริปต์) และเพื่อสร้างเนมสเปซเพื่อลดการใช้ตัวแปรทั่วโลก
ตัวอย่างที่ 3:
การคัดลอกรหัสมีดังนี้:
var oEvent = {};
(การทำงาน(){
var addevent = function () { / *การใช้งานรหัสถูกละเว้น * /};
ฟังก์ชั่น removeEvent () {}
OEVENT.ADDEVENT = ADDEVENT;
OEVENT.removeEvent = removeVent;
-
ในรหัสนี้ฟังก์ชั่น AddEvent และ RemoveEvent เป็นทั้งตัวแปรท้องถิ่น แต่เราสามารถใช้ผ่านตัวแปร Global Oevent ซึ่งช่วยลดการใช้ตัวแปรส่วนกลางอย่างมากและเพิ่มความปลอดภัยของเว็บเพจ เราต้องการใช้รหัสนี้: oeVent.addevent (document.getElementById ('box'), 'คลิก', function () {});
ตัวอย่างที่ 4:
การคัดลอกรหัสมีดังนี้:
var rainman = (ฟังก์ชั่น (x, y) {
ส่งคืน x + y;
}) (ยี่สิบสาม);
-
* สามารถเขียนได้ในรูปแบบต่อไปนี้เนื่องจากวงเล็บแรกช่วยให้เราอ่านได้ แต่ไม่แนะนำรูปแบบการเขียนต่อไปนี้
* var rainman = function (x, y) {
* return x + y;
*} (ยี่สิบสาม);
-
ที่นี่เราสร้าง Rainman ตัวแปรและเริ่มต้นเป็น 5 โดยเรียกฟังก์ชันที่ไม่ระบุชื่อโดยตรง เคล็ดลับนี้บางครั้งก็ใช้งานได้จริง
ตัวอย่างที่ 5:
การคัดลอกรหัสมีดังนี้:
var outer = null;
(การทำงาน(){
var one = 1;
ฟังก์ชั่น inner () {
หนึ่ง += 1;
การแจ้งเตือน (หนึ่ง);
-
ด้านนอก = ด้านใน;
-
ด้านนอก (); // 2
ด้านนอก (); // 3
ด้านนอก (); // 4
ตัวแปรหนึ่งในรหัสนี้เป็นตัวแปรท้องถิ่น (เพราะมันถูกกำหนดภายในฟังก์ชั่น) ดังนั้นภายนอกไม่สามารถเข้าถึงได้ แต่ที่นี่เราสร้างฟังก์ชั่นภายในซึ่งสามารถเข้าถึงตัวแปรหนึ่ง; และยังอ้างอิงตัวแปรส่วนกลางด้านนอกถึงด้านในดังนั้นการโทรไปยังด้านนอกสามครั้งจะปรากฏขึ้นผลลัพธ์ที่เพิ่มขึ้น
4. ให้ความสนใจ
4.1 การปิดช่วยให้ฟังก์ชั่นชั้นในสามารถอ้างถึงตัวแปรในฟังก์ชั่นหลัก แต่ตัวแปรคือค่าสุดท้าย
ตัวอย่างที่ 6:
การคัดลอกรหัสมีดังนี้:
-
* <body>
* <ul>
* <li> หนึ่ง </li>
* <li> สอง </li>
* <li> สาม </li>
* <li> หนึ่ง </li>
* </ul>
-
var lists = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = lists.length; i <len; i ++) {
รายการ [i] .onMouseOver = function () {
การแจ้งเตือน (i);
-
-
คุณจะพบว่าเมื่อเมาส์เคลื่อนที่ผ่านแต่ละ <li & rt; องค์ประกอบมันจะปรากฏขึ้นเสมอ 4 แทนที่จะเป็นตัวห้อยองค์ประกอบที่เราคาดหวัง ทำไมถึงเป็นเช่นนี้? ข้อควรระวังได้รับการหารือ (ค่าสุดท้าย) เห็นได้ชัดว่าคำอธิบายนี้ง่ายเกินไป เมื่อเหตุการณ์ MouseOver เรียกฟังก์ชั่นการฟังก่อนอื่นให้ดูว่าฉันถูกกำหนดไว้ในฟังก์ชันที่ไม่ระบุชื่อ (ฟังก์ชัน () {Alert (i);}) และผลลัพธ์คือมันไม่ได้กำหนดไว้ ดังนั้นมันจะมองขึ้นไปข้างบนและผลการค้นหาคือมันถูกกำหนดและค่าของฉันคือ 4 (ค่าของฉันหลังจากลูป); ดังนั้นในที่สุดป๊อปอัพแต่ละตัวก็คือ 4
วิธีแก้ปัญหา 1:
การคัดลอกรหัสมีดังนี้:
var lists = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = lists.length; i <len; i ++) {
(ฟังก์ชั่น (ดัชนี) {
รายการ [ดัชนี] .onMouseOver = function () {
การแจ้งเตือน (ดัชนี);
-
})(ฉัน);
-
วิธีแก้ปัญหา 2:
การคัดลอกรหัสมีดังนี้:
var lists = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = lists.length; i <len; i ++) {
รายการ [i]. $$ index = i; // บันทึกดัชนีโดยการผูกแอตทริบิวต์ดัชนี $$ บนองค์ประกอบ DOM
รายการ [i] .onMouseOver = function () {
การแจ้งเตือน (สิ่งนี้. $$ ดัชนี);
-
-
ทางออกที่สาม:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น EventListener (รายการ, ดัชนี) {
list.onMouseOver = function () {
การแจ้งเตือน (ดัชนี);
-
-
var lists = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = lists.length; i <len; i ++) {
EventListener (รายการ [i], i);
-
4.2 การรั่วไหลของหน่วยความจำ
การใช้การปิดนั้นง่ายมากที่จะทำให้เกิดการรั่วไหลของหน่วยความจำของเบราว์เซอร์ ในกรณีที่รุนแรงเบราว์เซอร์จะตาย หากคุณสนใจโปรดดูที่: http://www.vevb.com/article/57404.htm