ดำเนินการต่อกับบทความก่อนหน้านี้ "วิธีการเขียนรหัส JS คุณภาพสูง" คราวนี้ฉันจะจัดเรียงจุดความรู้ของฟังก์ชั่น JavaScript
2. ใช้ฟังก์ชั่น
ฟังก์ชั่นให้โปรแกรมเมอร์ที่มีฟังก์ชั่นนามธรรมหลักและกลไกการใช้งาน ฟังก์ชั่นสามารถใช้คุณสมบัติที่แตกต่างกันหลายอย่างในภาษาอื่น ๆ เช่นขั้นตอนวิธีการสร้างและแม้แต่คลาสหรือโมดูล
2.1 ทำความเข้าใจความแตกต่างระหว่างการเรียกใช้ฟังก์ชันการโทรวิธีและการโทรคอนสตรัคเตอร์
สำหรับการเขียนโปรแกรมเชิงวัตถุตัวสร้างของฟังก์ชั่นวิธีการและคลาสเป็นแนวคิดที่แตกต่างกันสามแนวคิด
โหมดการใช้งาน:
1. การโทรฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นสวัสดี (ชื่อผู้ใช้) {
กลับ "สวัสดี" + ชื่อผู้ใช้;
-
2. วิธีการโทร
การคัดลอกรหัสมีดังนี้:
var obj = {
สวัสดี: ฟังก์ชัน () {
กลับ "สวัสดี" + สิ่งนี้ชื่อผู้ใช้;
-
ชื่อผู้ใช้: "Floralam"
-
ohj.hello (); // "สวัสดี, Floralam"
ตัวแปรนี้ถูกผูกไว้กับวัตถุเนื่องจากวิธีการ hello ถูกกำหนดไว้ในวัตถุ OBJ นอกจากนี้เรายังสามารถกำหนดสำเนาของการอ้างอิงฟังก์ชั่นเดียวกันในวัตถุอื่นและรับคำตอบเดียวกัน
การคัดลอกรหัสมีดังนี้:
var obj2 = {
สวัสดี: obj.hello ()
ชื่อผู้ใช้: "Floralam"
-
3. ใช้ตัวสร้าง
การคัดลอกรหัสมีดังนี้:
ฟังก์ชันผู้ใช้ (ชื่อ, รหัสผ่าน hash) {
this.name = ชื่อ;
this.passwordHash = passwordHash;
-
การโทรผู้ใช้โดยใช้ตัวดำเนินการใหม่ถือเป็นตัวสร้าง
การคัดลอกรหัสมีดังนี้:
var u = ผู้ใช้ใหม่ ("Floralam", "123");
ซึ่งแตกต่างจากการเรียกใช้ฟังก์ชันและการเรียกเมธอดการเรียกคอนสตรัคเตอร์ใช้วัตถุใหม่อย่างสมบูรณ์เป็นค่าของตัวแปรนี้และส่งคืนวัตถุใหม่นี้โดยปริยายเป็นผลการโทร ความรับผิดชอบหลักของตัวสร้างคือการเริ่มต้นวัตถุใหม่
2.2 มีความเชี่ยวชาญในฟังก์ชั่นขั้นสูง
ฟังก์ชั่นลำดับที่สูงกว่าไม่มีอะไรมากไปกว่าฟังก์ชั่นที่ใช้ฟังก์ชันเป็นพารามิเตอร์หรือค่าส่งคืนและใช้ฟังก์ชั่นเป็นพารามิเตอร์ (โดยปกติเรียกว่าฟังก์ชั่นการโทรกลับเนื่องจากฟังก์ชั่นการสั่งซื้อที่สูงขึ้น "ต่อมาเรียกว่า" มัน) เป็นสำนวนที่ทรงพลังและแสดงออกโดยเฉพาะและยังใช้กันอย่างแพร่หลายในโปรแกรม JS
พิจารณาวิธีการเรียงลำดับมาตรฐานของอาร์เรย์ ในการทำงานสำหรับอาร์เรย์ทั้งหมดวิธีการเรียงลำดับต้องให้ผู้โทรตัดสินใจวิธีเปรียบเทียบองค์ประกอบสององค์ประกอบใด ๆ ในอาร์เรย์
การคัดลอกรหัสมีดังนี้:
ฟังก์ชันเปรียบเทียบ (x, y) {
ถ้า (x <y) {
กลับ -1;
-
ถ้า (x> y) {
กลับ 1;
-
กลับ 0;
-
[3,1,4,1,5,9] .sort (เปรียบเทียบ); // [1,1,3,4,5,9]
การคัดลอกรหัสมีดังนี้:
[3,1,4,1,5,9] .sort (ฟังก์ชั่น (x, y) {
ถ้า (x <y) {
กลับ -1;
-
ถ้า (x> y) {
กลับ 1;
-
กลับ 0;
}); // [1,1,3,4,5,9]
ตัวอย่างข้างต้นใช้ฟังก์ชั่นที่ไม่ระบุชื่อเพื่อทำให้ง่ายขึ้น
การเรียนรู้ที่จะใช้ฟังก์ชั่นการสั่งซื้อที่สูงขึ้นมักจะทำให้รหัสง่ายขึ้นและกำจัดรหัสหม้อต้มที่น่าเบื่อ สำหรับการแปลงสตริงอาร์เรย์อย่างง่ายเราสามารถใช้ลูปเพื่อใช้งานได้เช่นนี้:
การคัดลอกรหัสมีดังนี้:
ชื่อ var = ["Fred", "Wilma", "Pebbles"];
var updual = [];
สำหรับ (var i = 0, n = names.length; i <n; i ++) {
บน [i] = ชื่อ [i] .touppercase ();
-
Upper; // ["Fred", "Wilma", "Pebbles"];
การใช้วิธีการแผนที่ที่สะดวกของอาร์เรย์คุณสามารถกำจัดลูปและแปลงองค์ประกอบทีละรายการโดยใช้ฟังก์ชั่นท้องถิ่นเพียงหนึ่งเดียว
การคัดลอกรหัสมีดังนี้:
ชื่อ var = ["Fred", "Wilma", "Pebbles"];
var updpon = names.map (ฟังก์ชั่น (ชื่อ) {
return name.touppercase ();
-
Upper; // ["Fred", "Wilma", "Pebbles"];
นอกจากนี้เราต้องการสร้างวิธีการหลายวิธีเพื่อสร้างสตริงที่แตกต่างกันด้วยตรรกะการใช้งานทั่วไปและแต่ละลูปสร้างสตริงโดยเชื่อมต่อผลการคำนวณของแต่ละส่วนอิสระ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น bulidstring (n, callback) {
var result = "";
สำหรับ (var i = 0; i <n; i ++) {
ผลลัพธ์ += การโทรกลับ (i);
-
ผลการกลับมา;
-
var alphabet = bulidString (26, function (i) {
return String.FromCharcode (aindex + i);
-
ตัวอักษร; // "ABCDEFGHIJKLMNOPQRXTUVWXYZ";
digits var = buildString (10, function (i) {return i;})
ตัวเลข; // "0123456789"
var random = buildString (9, function () {
Random += String.FromCharcode (Math.Floor (Math.random ()*26) +Aindex
-
สุ่ม; // "yefjmcef" (สุ่ม)
สิ่งนี้จะทำให้ผู้อ่านเข้าใจอย่างชัดเจนว่ารหัสสามารถทำได้โดยไม่ต้องใช้รายละเอียดการใช้งานเชิงลึก
คำพูด
JavaScript ส่งคืนสูตรสำหรับหมายเลขสุ่ม (ระหว่าง MNS) ของช่วงที่ระบุ: Math.random ()*(nm)+m
ในเวลาเดียวกันให้ความสนใจกับข้อกำหนดของคำถามและไม่ว่าจะต้องส่งคืนจำนวนเต็มบวกหรือไม่
2.3 โหมดการโทร
การเรียกฟังก์ชั่นจะหยุดการดำเนินการของฟังก์ชันปัจจุบันและผ่านสิทธิ์การควบคุมและพารามิเตอร์ไปยังฟังก์ชั่นใหม่ นอกเหนือจากพารามิเตอร์ที่เป็นทางการที่กำหนดไว้ในเวลาที่ประกาศแต่ละฟังก์ชั่นจะได้รับพารามิเตอร์เพิ่มเติมสองตัวใหม่: สิ่งนี้และอาร์กิวเมนต์
นี่เป็นพารามิเตอร์ที่สำคัญมากและค่าของมันถูกกำหนดโดยรูปแบบการโทร
นี่คือ 4 รูปแบบการโทรที่สำคัญมากใน JavaScript:
. รูปแบบการเรียกใช้วิธีการ
ข. รูปแบบการเรียกใช้ฟังก์ชัน
ค. รูปแบบการเรียกใช้คอนสตรัคเตอร์
d. ใช้รูปแบบการโทรใช้รูปแบบการเรียกใช้
มีความแตกต่างในวิธีที่รูปแบบเหล่านี้เริ่มต้นพารามิเตอร์คีย์นี้
1. วิธีการเรียกใช้วิธีการ
เมื่อฟังก์ชั่นเป็นวิธีการของวัตถุเราเรียกมันว่าวิธีการ เมื่อมีการเรียกวิธีการสิ่งนี้จะถูกผูกไว้กับวัตถุที่เรียกว่า
การคัดลอกรหัสมีดังนี้:
var myobj = {
วาล: 0,
เพิ่มขึ้น: ฟังก์ชั่น (inc) {
this.val+= typeof inc === "number"? Inc: 1;
-
get_val: function () {return this.val;}
-
myobj.increment (); // 1
myobj ["เพิ่ม"] (2); // 3
สรุป:
1. วิธีการที่บริบทของวัตถุที่พวกเขาอยู่สามารถรับได้ผ่านสิ่งนี้เรียกว่าวิธีการสาธารณะ
2. เมื่อใช้ฟังก์ชั่นกับ หรือนิพจน์ตัวห้อยมันเป็นโหมดการเรียกวิธีการและวัตถุนี้ถูกผูกไว้กับวัตถุก่อนหน้า
3. ฟังก์ชั่นสามารถใช้สิ่งนี้เพื่อเข้าถึงวัตถุดังนั้นจึงสามารถดึงค่าของวัตถุหรือเปลี่ยนค่าของวัตถุ ผูกสิ่งนี้กับวัตถุที่เกิดขึ้นเมื่อเรียก
2. รูปแบบการเรียกใช้ฟังก์ชัน
เมื่อฟังก์ชั่นไม่ใช่คุณสมบัติของวัตถุมันจะถูกเรียกว่าเป็นฟังก์ชัน เมื่อฟังก์ชั่นถูกเรียกว่าเป็นรูปแบบการเรียกใช้ฟังก์ชันสิ่งนี้จะถูกผูกไว้กับวัตถุทั่วโลก นี่คือข้อผิดพลาดในการออกแบบ JavaScript และดำเนินต่อไป
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นเพิ่ม (x, y) {
ส่งคืน x+y;
-
myobj.double = function () {
var that = this;
var helper = function () {
that.val = add (that.value, that.value);
// วิธีการเขียนที่ผิดอาจเป็นเช่นนี้ทำไมมันผิด? เพราะเมื่อฟังก์ชั่นถูกเรียกว่าเป็นฟังก์ชันภายในสิ่งนี้ถูกผูกไว้กับวัตถุที่ไม่ถูกต้องและวัตถุส่วนกลางไม่มีคุณสมบัติ VAL ดังนั้นค่าที่ไม่ถูกต้องจะถูกส่งคืน
//this.val = this.val+this.val;
-
ผู้ช่วย ();
-
myobj.double (); // 6
3. รูปแบบการเรียกใช้คอนสตรัคเตอร์
JavaScript เป็นภาษาที่ใช้การสืบทอดต้นแบบซึ่งหมายความว่าวัตถุสามารถสืบทอดแอตทริบิวต์โดยตรงจากวัตถุอื่น ๆ และภาษาไม่มีคลาส
หากคุณเรียกฟังก์ชั่นที่มีใหม่คุณจะได้รับวัตถุใหม่ที่ซ่อนสมาชิกต้นแบบที่เชื่อมต่อกับฟังก์ชั่นและสิ่งนี้จะถูกผูกไว้กับวัตถุใหม่
คำนำหน้าใหม่ยังเปลี่ยนพฤติกรรมของคำสั่ง Return นี่ไม่ใช่วิธีการเขียนโปรแกรมที่แนะนำเช่นกัน
การคัดลอกรหัสมีดังนี้:
var foo = function (สถานะ) {
this.status = สถานะ;
-
foo.prototype.get_status = function () {
คืนสิ่งนี้ Status;
-
// สร้างอินสแตนซ์ foo
var myfoo = new foo ("bar");
myfoo.get_status (); // "bar"
4. ใช้รูปแบบการเรียกใช้รูปแบบการเรียกใช้
เนื่องจาก JavaScript เป็นภาษาเชิงวัตถุที่ใช้งานได้ฟังก์ชั่นจึงมีวิธีการ
วิธีการใช้มีพารามิเตอร์สองตัว อย่างแรกคือการผูกค่ากับสิ่งนี้และที่สองคืออาร์เรย์พารามิเตอร์ กล่าวคือวิธีการใช้ช่วยให้เราสามารถสร้างอาร์เรย์และใช้เพื่อเรียกใช้ฟังก์ชันซึ่งช่วยให้เราสามารถเลือกค่าของสิ่งนี้และยังช่วยให้เราสามารถเลือกค่าของอาร์เรย์
การคัดลอกรหัสมีดังนี้:
var array = [3,4];
var sum = add.apply (null, array); // 7
var statusObj = {สถานะ: "abcdefg"};
foo.prototype.pro_get_status = ฟังก์ชั่น (คำนำหน้า) {
ส่งคืนคำนำหน้า +"-" +this.status;
-
สถานะ var = foo.prototype.get_status.apply (statusobj); // "abcdefg"
var pro_status = foo.prototype.get_status.apply (statusobj, ["คำนำหน้า"]); // "คำนำหน้า -aBcdefg"
โดยทั่วไปตัวรับสัญญาณของฟังก์ชั่นหรือวิธีการ (ระดับที่ผูกกับค่าของคำหลักพิเศษนี้) จะถูกกำหนดโดยไวยากรณ์ของผู้โทร โดยเฉพาะอย่างยิ่งวิธีการเรียกใช้วิธีการเรียกใช้วิธีการกับตัวแปรนี้โดยวัตถุการค้นหา อย่างไรก็ตามบางครั้งจำเป็นต้องเรียกใช้ฟังก์ชั่นโดยใช้ตัวรับสัญญาณที่กำหนดเอง ในเวลานี้คุณต้องใช้วิธีการโทรหรือวิธีการผูกเพื่อปรับแต่งตัวรับสัญญาณเพื่อเรียกวิธีการ
2.4 วิธีการแยกด้วยการกำหนดผู้รับโดยใช้วิธีการผูก
เนื่องจากวิธีการไม่แตกต่างจากแอตทริบิวต์ที่มีค่าฟังก์ชันจึงเป็นเรื่องง่ายที่จะแยกวิธีการของวัตถุและแยกฟังก์ชันเป็นฟังก์ชันการเรียกกลับและส่งผ่านโดยตรงไปยังฟังก์ชันลำดับสูงกว่า
แต่มันก็เป็นเรื่องง่ายที่จะลืมผูกฟังก์ชันสกัดกับวัตถุที่สกัด
การคัดลอกรหัสมีดังนี้:
var buffer = {
รายการ: [],
เพิ่ม: ฟังก์ชั่น {
this.entries.push (s);
-
-
var source = ["867", "-", "5309"];
source.foreach (butter.add); // ข้อผิดพลาด: รายการไม่ได้กำหนด
ในเวลานี้ผู้รับ Butter.add ไม่ใช่วัตถุเนย ตัวรับสัญญาณของฟังก์ชั่นขึ้นอยู่กับวิธีการเรียกและวิธีการ foreach ถูกเรียกในขอบเขตทั่วโลกดังนั้นการใช้วิธี foreach ใช้วัตถุส่วนกลางเป็นตัวรับสัญญาณเริ่มต้น เนื่องจากไม่มีแอตทริบิวต์รายการในวัตถุโกลบอลรหัสนี้จึงเกิดข้อผิดพลาด
วิธีการ foreach ช่วยให้ผู้โทรสามารถให้พารามิเตอร์เสริมเป็นตัวรับสัญญาณของฟังก์ชันการโทรกลับ
การคัดลอกรหัสมีดังนี้:
var source = ["867", "-", "5309"];
source.foreach (butter.add, butter);
แต่ฟังก์ชั่นการสั่งซื้อที่สูงขึ้นทั้งหมดนั้นมีความระมัดระวังและรอบคอบเพื่อให้ผู้ใช้ได้รับฟังก์ชั่นการโทรกลับ
มีสองวิธีแก้ปัญหา:
1) สร้างเมธอดบัฟเฟอร์ที่ชัดเจนเพื่อเรียกใช้ฟังก์ชันการห่อหุ้ม โดยไม่คำนึงถึงวิธีการเรียกใช้ฟังก์ชันการห่อหุ้มมันจะช่วยให้มั่นใจได้ว่าพารามิเตอร์ของมันจะถูกผลักเข้าไปในอาร์เรย์เป้าหมาย
การคัดลอกรหัสมีดังนี้:
var source = ["867", "-", "5309"];
source.foreach (ฟังก์ชั่น {
Butter.add (S);
-
2) วิธีการผูกของวัตถุฟังก์ชั่นต้องการวัตถุตัวรับสัญญาณและสร้างฟังก์ชันการห่อหุ้มที่เรียกฟังก์ชั่นดั้งเดิมด้วยวิธีที่เรียกโดยวัตถุตัวรับสัญญาณ
การคัดลอกรหัสมีดังนี้:
var source = ["867", "-", "5309"];
source.foreach (butter.add.bind (บัฟเฟอร์));
คำพูด
buffer.add.bind (บัฟเฟอร์) สร้างฟังก์ชั่นใหม่แทนที่จะแก้ไขฟังก์ชัน buffer.add:
buffer.add === buffer.add.bind (บัฟเฟอร์); //เท็จ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน