รับตัวอย่างอธิบายการโทรใช้และการผูกใน JavaScript สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript"> function man (ชื่อ, เพศ, อายุ) {this.name = name; this.sex = เพศ; this.age = อายุ; this.say = function (โรงเรียน, zhuanye) {console.log (this.name + "," + this.sex + ", ปีนี้" + this.age + "ปี! เรียนรู้ที่" + โรงเรียน + " + zhuanye); San "," Male ", 26); Var Woman = New Woman (" Xiaohong "," Female ", 18); Man.say ('Tsinghua University', 'Excavator'); man.say.call (ผู้หญิง," โรงเรียนเทคนิค Lanxiang "," การเชื่อมไฟฟ้า "); man.say.bind (ผู้หญิง) ("Deyun Club", "เพลงป๊อป");ทำไม การโทร, สมัคร, ผูกทำอะไร? ทำไมต้องเรียนรู้สิ่งนี้?
โดยทั่วไปจะใช้เพื่อระบุสภาพแวดล้อมนี้และปัญหาเหล่านี้มักจะเกิดขึ้นก่อนการเรียนรู้
var a = {ผู้ใช้: "การไล่ล่าในฝัน", fn: function () {console.log (this.user); }} var b = a.fn; b (); // ไม่ได้กำหนดมีอะไรผิดปกติกับผู้ใช้ใน Object A แต่ไม่ได้กำหนด? มันก็โอเคถ้าเราดำเนินการโดยตรง a.fn ()
var a = {user: "Chasing Dreams", fn: function () {console.log (this.user); }} a.fn (); // ไล่ตามความฝันเหตุผลที่สามารถพิมพ์ได้ที่นี่เป็นเพราะนี่ชี้ไปที่ฟังก์ชัน A ดังนั้นทำไมไม่ชี้ไปที่ A? หากเราจำเป็นต้องเข้าใจปัญหาการชี้นี้โปรดดูความเข้าใจอย่างถ่องแท้เกี่ยวกับการชี้นี้ใน JS และไม่จำเป็นต้องจดจำบทความนี้
แม้ว่าวิธีนี้จะสามารถบรรลุวัตถุประสงค์ของเราได้ แต่บางครั้งเราต้องบันทึกวัตถุนี้ไปยังตัวแปรอื่นดังนั้นเราจึงสามารถใช้วิธีการต่อไปนี้
1. โทร ()
var a = {ผู้ใช้: "การจับความฝัน", fn: function () {console.log (this.user); // การจับความฝัน}} var b = a.fn; b.call (a);โดยการเพิ่มพารามิเตอร์แรกที่สภาพแวดล้อมที่จะเพิ่ม B เพียงแค่ใส่จุดนี้ลงในวัตถุนั้น
นอกเหนือจากพารามิเตอร์แรกวิธีการโทรยังสามารถเพิ่มพารามิเตอร์หลายตัวดังนี้:
var a = {ผู้ใช้: "การจับความฝัน", fn: ฟังก์ชั่น (e, ee) {console.log (this.user); // จับความฝันคอนโซลล็อก (e+ee); // 3}} var b = a.fn; b.call (a, 1,2);2. ใช้ ()
วิธีการสมัครค่อนข้างคล้ายกับวิธีการโทร แต่ยังสามารถเปลี่ยนการชี้ของสิ่งนี้ได้
var a = {ผู้ใช้: "การจับความฝัน", fn: function () {console.log (this.user); // การจับความฝัน}} var b = a.fn; b.apply (a);ในทำนองเดียวกันการใช้อาจมีพารามิเตอร์หลายตัว แต่ความแตกต่างคือพารามิเตอร์ที่สองจะต้องเป็นอาร์เรย์ดังนี้:
var a = {ผู้ใช้: "การจับความฝัน", fn: ฟังก์ชั่น (e, ee) {console.log (this.user); // จับความฝันคอนโซลล็อก (e+ee); // 11}} var b = a.fn; b.apply (a, [10,1]);หรือ
var a = {ผู้ใช้: "การจับความฝัน", fn: ฟังก์ชั่น (e, ee) {console.log (this.user); // จับความฝันคอนโซลล็อก (e+ee); // 520}} var b = a.fn; var arr = [500,20]; b.apply (a, arr); // โปรดทราบว่าหากพารามิเตอร์แรกของการโทรและใช้เป็น null แล้วชี้ไปที่วัตถุหน้าต่าง var a = {ผู้ใช้: "การไล่ล่าในฝัน", fn: function () {console.log (นี่); // window {ภายนอก: วัตถุ, Chrome: วัตถุ, เอกสาร: เอกสาร, A: Object, SpeechSynthesis: PeechSynthesis …}}} var b = a.fn; b.apply (null);3. ผูก ()
วิธีการผูกนั้นค่อนข้างแตกต่างจากวิธีการโทรและใช้ แต่สามารถใช้ในการเปลี่ยนทิศทางของสิ่งนี้
มาพูดถึงความแตกต่างของพวกเขาก่อน
var a = {ผู้ใช้: "การไล่ล่าในฝัน", fn: function () {console.log (this.user); }} var b = a.fn; b.bind (a);เราพบว่ารหัสไม่ได้พิมพ์ ใช่นี่คือความแตกต่างระหว่างการผูกและการโทรและวิธีการใช้ ในความเป็นจริงวิธีการผูกจะส่งคืนฟังก์ชันที่แก้ไข
var a = {ผู้ใช้: "การไล่ล่าในฝัน", fn: function () {console.log (this.user); }} var b = a.fn; var c = b.bind (a); console.log (c); // function () {[รหัสดั้งเดิม]}ลองใช้ฟังก์ชัน C เพื่อดูว่าเราสามารถพิมพ์ผู้ใช้ใน Object A ได้หรือไม่
var a = {ผู้ใช้: "การจับความฝัน", fn: function () {console.log (this.user); // การจับความฝัน}} var b = a.fn; var c = b.bind (a); c ();ตกลงการผูกยังสามารถมีพารามิเตอร์หลายตัวและพารามิเตอร์สามารถเพิ่มอีกครั้งเมื่อดำเนินการ แต่ควรสังเกตว่าพารามิเตอร์จะดำเนินการตามลำดับของพารามิเตอร์ที่เป็นทางการ
var a = {ผู้ใช้: "การจับความฝัน", fn: ฟังก์ชั่น (e, d, f) {console.log (this.user); // การจับความฝันคอนโซลล็อก (e, d, f); // 10 1 2}} var b = a.fn; var c = b.bind (a, 10); c (1,2);สรุป: การโทรและใช้การเปลี่ยนแปลงทั้งสองสิ่งนี้ในบริบทและดำเนินการฟังก์ชั่นนี้ทันที วิธีการผูกช่วยให้ฟังก์ชันที่สอดคล้องกันถูกเรียกเมื่อใดก็ตามที่ต้องการและเพิ่มพารามิเตอร์เมื่อดำเนินการ นี่คือความแตกต่างของพวกเขาและเลือกที่จะใช้ตามสถานการณ์จริงของคุณ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น