สำรวจตัวชี้ตัวชี้นี้ใน JavaScript
ก่อนอื่นต้องบอกว่าไม่สามารถกำหนดจุดนี้ได้เมื่อกำหนดฟังก์ชั่น เฉพาะเมื่อฟังก์ชั่นถูกดำเนินการเท่านั้นที่จะเป็นจุดนี้ว่าใครคือจุดนี้ ในความเป็นจริงในที่สุดสิ่งนี้ชี้ไปที่วัตถุที่เรียกมันว่า (มีปัญหาบางอย่างในประโยคนี้และเราจะอธิบายว่าทำไมมีปัญหาในภายหลังแม้ว่าบทความส่วนใหญ่บนอินเทอร์เน็ตจะพูดแบบนี้แม้ว่าจะไม่มีปัญหาในการทำความเข้าใจเช่นนี้ในหลาย ๆ กรณี จากนั้นฉันจะหารือเกี่ยวกับปัญหานี้ในเชิงลึกต่อไป
ทำไมต้องเรียนรู้สิ่งนี้? หากคุณได้เรียนรู้การเขียนโปรแกรมที่ใช้งานได้และการเขียนโปรแกรมเชิงวัตถุคุณต้องรู้ว่าต้องทำอะไร หากคุณยังไม่ได้เรียนรู้คุณไม่ต้องอ่านบทความนี้ในขณะนี้ แน่นอนถ้าคุณสนใจคุณสามารถอ่านได้ ท้ายที่สุดนี่คือสิ่งที่ต้องเชี่ยวชาญใน JS
ตัวอย่างที่ 1:
ฟังก์ชั่น A () {var user = "การไล่ล่าในฝัน"; console.log (this.user); // console.log ที่ไม่ได้กำหนด (นี่); // window} a ();ตามสิ่งที่เราพูดไว้ข้างต้นในที่สุดสิ่งนี้ชี้ไปที่วัตถุที่เรียกมัน ฟังก์ชั่น A ที่นี่ถูกชี้ให้เห็นโดยวัตถุหน้าต่างและรหัสต่อไปนี้สามารถพิสูจน์ได้
ฟังก์ชั่น A () {var user = "การไล่ล่าในฝัน"; console.log (this.user); // console.log ที่ไม่ได้กำหนด (นี่); // window} window.a ();เช่นเดียวกับรหัสด้านบนการแจ้งเตือนเป็นคุณสมบัติของหน้าต่างและชี้ให้เห็นทางหน้าต่าง
ตัวอย่างที่ 2:
var o = {ผู้ใช้: "Chasing Dreams", fn: function () {console.log (this.user); // ไล่ตามความฝัน}} o.fn ();ที่นี่ชี้ไปที่วัตถุ o เพราะคุณเรียกว่า fn นี้และดำเนินการผ่าน o.fn () ดังนั้นการชี้ตามธรรมชาติคือวัตถุ o ฉันอยากจะเน้นอีกครั้งที่นี่ว่าการชี้นี้ไม่สามารถตัดสินใจได้เมื่อสร้างฟังก์ชั่นและสามารถตัดสินใจได้เมื่อมีการเรียก ใครก็ตามที่เรียกมันว่าจะชี้ไปที่ใครคุณต้องคิดออก
ในความเป็นจริงตัวอย่างที่ 1 และตัวอย่าง 2 ไม่ถูกต้องเพียงพอ ตัวอย่างต่อไปนี้สามารถคว่ำทฤษฎีข้างต้นได้
หากคุณต้องการเข้าใจสิ่งนี้อย่างละเอียดคุณต้องดูตัวอย่างสองสามตัวอย่างต่อไป
ตัวอย่างที่ 3:
var o = {ผู้ใช้: "การจับความฝัน", fn: function () {console.log (this.user); // จับความฝัน}} window.o.fn ();รหัสนี้เกือบจะเหมือนกับรหัสข้างต้น แต่ทำไมถึงชี้ไปที่หน้าต่าง? หากคุณทำตามทฤษฎีข้างต้นจุดนี้ไปยังวัตถุที่เรียกมัน ให้ฉันพูดอย่างอื่นที่นี่ Windows เป็นวัตถุระดับโลกใน JS ตัวแปรที่เราสร้างจริงจะเพิ่มแอตทริบิวต์ลงในหน้าต่างเพื่อให้คุณสามารถใช้หน้าต่างเพื่อชี้วัตถุ O ที่นี่
ฉันจะไม่อธิบายว่าทำไมรหัสข้างต้นนี้ไม่ได้ชี้ไปที่หน้าต่าง ลองดูรหัสอื่น
var o = {a: 10, b: {a: 12, fn: function () {console.log (this.a); // 12}}} obfn ();สิ่งนี้ยังชี้ให้เห็นโดย Object O แต่สิ่งนี้ไม่ได้ดำเนินการดังนั้นคุณจะบอกว่าสิ่งที่ฉันพูดในตอนแรกนั้นผิดทั้งหมดหรือไม่? ที่จริงแล้วมันไม่ได้เป็นเพียงว่ามันไม่ถูกต้องในตอนแรก ต่อไปฉันจะเพิ่มหนึ่งประโยค ฉันเชื่อว่าคุณสามารถเข้าใจปัญหาที่ชี้ไปที่สิ่งนี้ได้อย่างละเอียด
กรณีที่ 1: หากมีสิ่งนี้ในฟังก์ชั่น แต่มันไม่ได้ถูกเรียกโดยวัตถุในระดับก่อนหน้าคุณจะชี้ไปที่หน้าต่าง สิ่งที่ต้องอธิบายที่นี่คือในรุ่นที่เข้มงวดของ JS ชี้ไปที่หน้าต่าง แต่เราจะไม่พูดถึงปัญหาของเวอร์ชันที่เข้มงวดที่นี่ หากคุณต้องการทราบคุณสามารถค้นหาออนไลน์ได้ด้วยตัวเอง
กรณีที่ 2: หากมีสิ่งนี้ในฟังก์ชั่นและฟังก์ชั่นนี้เรียกโดยวัตถุในระดับก่อนหน้าคุณจะชี้ไปที่วัตถุในระดับก่อนหน้า
กรณีที่ 3: หากมีสิ่งนี้ในฟังก์ชั่นฟังก์ชั่นนี้มีหลายวัตถุ แม้ว่าฟังก์ชั่นนี้จะถูกเรียกโดยวัตถุนอกสุด แต่สิ่งนี้ชี้ไปที่วัตถุในระดับถัดไปเท่านั้น ตัวอย่างที่ 3 สามารถพิสูจน์ได้ว่าถ้าคุณไม่เชื่อแล้วลองดูตัวอย่างต่อไปต่อไป
var o = {a: 10, b: {// a: 12, fn: function () {console.log (this.a); // undefined}}} obfn ();แม้ว่าจะไม่มีแอตทริบิวต์ A ในวัตถุ B แต่ก็ชี้ไปที่ Object B เนื่องจากสิ่งนี้จะชี้ไปที่วัตถุก่อนหน้าของมันโดยไม่คำนึงว่ามีสิ่งใดที่ต้องการในวัตถุนี้หรือไม่
มีอีกกรณีพิเศษตัวอย่าง 4:
var o = {a: 10, b: {a: 12, fn: function () {console.log (this.a); // console.log ที่ไม่ได้กำหนด (นี่); // window}}} var j = obfn; j ();ชี้ไปที่หน้าต่างที่นี่มันไม่สับสนเล็กน้อยเหรอ? ในความเป็นจริงเป็นเพราะคุณไม่เข้าใจประโยคซึ่งก็สำคัญเช่นกัน
สิ่งนี้ชี้ไปที่วัตถุที่เรียกมันว่าสุดท้ายซึ่งหมายความว่าใครเรียกมันว่าเมื่อมีการดำเนินการ ในตัวอย่างที่ 4 แม้ว่าฟังก์ชั่น FN จะถูกอ้างอิงโดยวัตถุ B แต่ก็ไม่ได้ดำเนินการเมื่อกำหนด FN ให้กับตัวแปร J ดังนั้นในที่สุดมันก็ชี้ไปที่หน้าต่างซึ่งแตกต่างจากตัวอย่าง 3 ตัวอย่าง 3 โดยตรงเรียกใช้ FN โดยตรง
นี่เป็นเพียงแค่นั้น แต่การชี้จะแตกต่างกันภายใต้สถานการณ์ที่แตกต่างกัน บทสรุปข้างต้นเป็นความผิดพลาดเล็กน้อยในแต่ละสถานที่และไม่สามารถกล่าวได้ว่าเป็นความผิดพลาด แต่สถานการณ์จะแตกต่างกันในสภาพแวดล้อมที่แตกต่างกันดังนั้นฉันจึงไม่สามารถอธิบายได้อย่างชัดเจนในครั้งเดียวดังนั้นคุณจึงสามารถสัมผัสได้อย่างช้าๆ
ตัวสร้างเวอร์ชันนี้:
ฟังก์ชั่น fn () {this.user = "Chasing Dreams";} var a = new fn (); console.log (a.user); // ไล่ตามความฝันเหตุผลที่ Object A สามารถชี้ให้เห็นผู้ใช้ในฟังก์ชั่น FN ที่นี่เป็นเพราะคำหลักใหม่สามารถเปลี่ยนทิศทางของสิ่งนี้และชี้ไปที่วัตถุ A ทำไมฉันถึงบอกว่าเป็นวัตถุ? เพราะการใช้คำหลักใหม่คือการสร้างอินสแตนซ์วัตถุ การทำความเข้าใจประโยคนี้คุณสามารถนึกถึงตัวอย่างของเรา 3 เราใช้ตัวแปร A เพื่อสร้างอินสแตนซ์ของ FN (เทียบเท่ากับการคัดลอก FN ลงในวัตถุ A) ในเวลานี้มันถูกสร้างขึ้นและไม่ได้ดำเนินการ การเรียกใช้ฟังก์ชั่นนี้ FN เป็นวัตถุ A ดังนั้นนี่คือวัตถุโดยธรรมชาติ เหตุใดจึงมีผู้ใช้ใน Object FN? เพราะคุณได้คัดลอกฟังก์ชั่น FN ลงในวัตถุ A และการใช้คำหลักใหม่นั้นเทียบเท่ากับการคัดลอกสำเนา
นอกเหนือจากข้างต้นเรายังสามารถเปลี่ยนทิศทางของสิ่งนี้ด้วยตัวเอง สำหรับการเปลี่ยนทิศทางของสิ่งนี้ด้วยตัวเราเองโปรดดูบทสรุปของการโทรใช้และผูกเมธอดใน JavaScript ซึ่งอธิบายรายละเอียดว่าเราเปลี่ยนทิศทางของสิ่งนี้ด้วยตนเอง
อัปเดตปัญหาเล็ก ๆ น้อย ๆ เมื่อการเผชิญหน้ากลับมา
ฟังก์ชั่น fn () {this.user = 'Dream Chaser'; กลับ {}; } var a = new fn; console.log (a.user); // ไม่ได้กำหนดดูอีกอัน
ฟังก์ชั่น fn () {this.user = 'Dream Chaser'; return function () {};} var a = new fn; console.log (a.user); // ไม่ได้กำหนดกลับมาอีกครั้ง
ฟังก์ชั่น fn () {this.user = 'จับความฝัน'; return 1;} var a = new fn; console.log (a.user); // การจับความฝัน 'ฟังก์ชั่น fn () {this.user =' จับความฝัน '; return undefined;} var a = new fn; console.log (a.user); // จับความฝัน 'หมายความว่าอย่างไร?
หากค่าส่งคืนเป็นวัตถุสิ่งนี้จะชี้ไปที่วัตถุที่ส่งคืน หากค่าส่งคืนไม่ใช่วัตถุสิ่งนี้ยังคงชี้ไปที่อินสแตนซ์ของฟังก์ชัน
ฟังก์ชั่น fn () {this.user = 'caught'; return undefined;} var a = new fn; console.log (a); // fn {ผู้ใช้: "caught '}อีกประเด็นหนึ่งคือแม้ว่า Null จะเป็นวัตถุ แต่สิ่งนี้ยังชี้ไปที่อินสแตนซ์ของฟังก์ชั่นนั้นที่นี่เพราะ NULL นั้นพิเศษกว่า
ฟังก์ชั่น fn () {this.user = 'Zhunting Dreams'; return null;} var a = new fn; console.log (a.user); // Zhunting Dreamsอาหารเสริมของจุดความรู้:
1. ค่าเริ่มต้นนี้ในเวอร์ชันที่เข้มงวดไม่ใช่หน้าต่างอีกต่อไป แต่ไม่ได้กำหนด
2. ผู้ให้บริการใหม่จะเปลี่ยนปัญหาการชี้ของฟังก์ชั่นนี้ แม้ว่าเราได้อธิบายไว้ข้างต้น แต่เรายังไม่ได้พูดถึงปัญหานี้ในเชิงลึก มันไม่ค่อยมีการกล่าวถึงบนอินเทอร์เน็ตดังนั้นจึงจำเป็นต้องพูดคุยเกี่ยวกับที่นี่
ฟังก์ชั่น fn () {this.num = 1;} var a = new fn (); console.log (a.num); // 1ทำไมจุดนี้ถึง A? ขั้นแรกคำหลักใหม่จะสร้างวัตถุที่ว่างเปล่าจากนั้นวิธีการใช้ฟังก์ชันจะถูกเรียกโดยอัตโนมัติเพื่อชี้ไปที่วัตถุที่ว่างเปล่านี้ ด้วยวิธีนี้ภายในฟังก์ชั่นนี้จะถูกแทนที่ด้วยวัตถุที่ว่างเปล่านี้