เมื่อใช้ JavaScript ผู้คนมักจะสับสนกับผู้ชายคนนี้ สำหรับนักพัฒนาส่วนใหญ่ที่มีประสบการณ์การพัฒนา OOP นี่เป็นตัวระบุที่อ้างอิงองค์ประกอบสามัญในขอบเขตปัจจุบัน แต่ใน JavaScript ดูเหมือนว่าแปลกเพราะมันไม่ได้รับการแก้ไข แต่การเปลี่ยนแปลงเมื่อสภาพแวดล้อมการดำเนินการเปลี่ยนแปลง ใน JavaScript สิ่งนี้จะชี้ไปที่วัตถุที่เรียกวิธีการที่มันอยู่
ยกตัวอย่างง่ายๆ:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน (นี้);
-
var obj = function () {
var name = 'testobj';
-
obj.objtest = ทดสอบ;
ทดสอบ();
obj.objtest ();
ใส่รหัสนี้ลงใน HTML และเรียกใช้หน้านี้คุณจะเห็นคำเตือน [หน้าต่างวัตถุ] ก่อนแล้วคำเตือน
การคัดลอกรหัสมีดังนี้:
var obj = function () {
var name = 'testobj';
-
ก่อนอื่นเรากำหนดวิธีการทดสอบ () เรียกใช้วิธีการแจ้งเตือน () ภายในวิธีการแสดงสิ่งนี้จากนั้นกำหนดวัตถุฟังก์ชัน OBJ เพิ่มชื่อฟิลด์ส่วนตัวลงไปและเพิ่มวิธีการคงที่ OBJTest () และฟังก์ชั่นนี้ชี้ไปที่ฟังก์ชันการทดสอบ () โดยตรง
วิธีการทดสอบ () และ obj.objtest () เรียกว่าตามลำดับ กล่องคำเตือนแรกจะแจ้งวัตถุหน้าต่างและพรอมต์ที่สองคือรหัสของฟังก์ชัน OBJ ที่เรากำหนดไว้ นี่แสดงให้เห็นว่าค่าของสิ่งนี้แตกต่างกันเมื่อฟังก์ชั่นการทดสอบถูกดำเนินการสองครั้ง!
สิ่งนี้แสดงให้เห็นว่าเมื่อวัตถุที่เรียกว่าฟังก์ชันนั้นแตกต่างกันวัตถุที่อ้างถึงโดยคำหลักนี้ภายในจะแตกต่างกัน ควรสังเกตที่นี่ว่า JavaScript เป็นภาษาที่ใช้วัตถุ เมื่อคำจำกัดความตัวแปรหรือฟังก์ชั่นของเราอยู่ที่รูทของแท็ก <script> </script> มันจะเทียบเท่ากับการเพิ่มคุณสมบัติหรือวิธีการที่สอดคล้องกันไปยังวัตถุหน้าต่าง ดังนั้นเมื่อเราใช้การทดสอบฟังก์ชั่น () {} รหัสเพื่อกำหนดฟังก์ชั่นมันก็เทียบเท่ากับการเพิ่มฟังก์ชั่นใหม่ลงในวัตถุหน้าต่างนั่นคือฟังก์ชั่น window.test ()
เราสามารถทำการทดลอง:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน (นี้);
-
การแจ้งเตือน (ทดสอบ === window.test);
กล่องคำเตือนแจ้งเป็นจริงซึ่งหมายความว่าเมื่อเราเรียกฟังก์ชั่นการทดสอบ () มันจะเทียบเท่ากับการโทร window.test () ดังนั้นเมื่อเราเรียกฟังก์ชั่นการทดสอบ () วัตถุที่เรียกว่าฟังก์ชั่นนี้เป็นวัตถุหน้าต่างสิ่งนี้หมายถึงวัตถุหน้าต่างดังนั้นเนื้อหาของหน้าต่างเตือนเราจะปรากฏขึ้นเมื่อแจ้งเตือน (นี่) คือ [หน้าต่างวัตถุ] เราชี้ obj.objtest = ทดสอบไปยังจุด obj.objtest () เพื่อทดสอบ () ดังนั้นเมื่อเราเรียก obj.objtest () ฟังก์ชันมันเทียบเท่ากับการเรียกฟังก์ชั่นการทดสอบ () ใน obj ดังนั้นตอนนี้นี่หมายถึงวัตถุ OBJ และพรอมต์เป็นฟังก์ชัน OBJ ซึ่งเป็นรหัสที่เราเห็น
เมื่อพูดถึงเรื่องนี้มันควรจะเหมือนกัน บางทีตัวอย่างข้างต้นอาจเป็นนามธรรมเกินไปและฉันไม่สามารถจินตนาการได้ว่ามันสามารถใช้สถานการณ์ใดได้บ้าง ดังนั้นสมมติว่าข้อกำหนดและทำตัวอย่างที่ใกล้เคียงกับการปฏิบัติมากขึ้น
สมมติว่าการเชื่อมโยงหลายมิติทั้งหมดในหน้าของเราตอนนี้จำเป็นต้องเปลี่ยนเป็นสีแดงหลังจากคลิกและนำไปใช้ใน JavaScript แนวคิดทั่วไปควรได้รับแท็ก <a> ทั้งหมดในหน้าจากนั้นวนซ้ำแท็ก <a> ทั้งหมดลงทะเบียนเหตุการณ์คลิกสำหรับแต่ละรายการและหลังจากเหตุการณ์ถูกเรียกใช้เราจะตั้งค่าสีเป็นสีแดง
รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// เปลี่ยนสี
ฟังก์ชั่น changecolor () {
this.style.color = '#f00';
-
// เริ่มต้น, ลงทะเบียนกิจกรรมสำหรับแท็กทั้งหมด
ฟังก์ชัน init () {
var customLinks = document.getElementsByTagname ('a');
สำหรับ (i ใน customlinks) {
// คุณสามารถใช้ผู้ฟังกิจกรรมเพื่อลงทะเบียนกิจกรรม
// เนื่องจากอาจต้องใช้รหัสเพิ่มเติมที่เข้ากันได้กับ IE, FF และเบราว์เซอร์อื่น ๆ คุณสามารถเขียนได้ด้วยตัวเอง
customlinks [i] .onclick = changecolor;
-
-
window.onload = init;
เพิ่มรหัสนี้ลงในเอกสาร HTML และเพิ่มไฮเปอร์ลิงก์ลงในเอกสาร เมื่อคลิกไฮเปอร์ลิงก์สีจะเปลี่ยนเป็นสีแดง ฟังก์ชั่น Changecolor () ที่เรากำหนดไว้ที่นี่หมายถึงไฮเปอร์ลิงก์ปัจจุบันเมื่อคลิกที่ไฮเปอร์ลิงก์ หากคุณเรียกฟังก์ชั่น changecolor () โดยตรงเบราว์เซอร์จะรายงานข้อผิดพลาดและข้อผิดพลาดจะได้รับแจ้ง: 'this.style' เป็นโมฆะหรือไม่ใช่วัตถุหรือไม่ได้กำหนด
ฉันสงสัยว่าสิ่งนี้สามารถทำให้คุณกำลังอ่านบทความมีความเข้าใจเกี่ยวกับคำหลักนี้ใน JavaScript หรือไม่? หรือคุณเป็นคนใจร้อนอยู่แล้ว? (: P)
ในความเป็นจริงเพื่อที่จะมีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับปัญหานี้คุณต้องมีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับขอบเขตและขอบเขตของโซ่ของจาวาสคริปต์
ขอบเขตตามชื่อแนะนำหมายถึงพื้นที่รหัสที่แอตทริบิวต์หรือวิธีการบางอย่างมีสิทธิ์ในการเข้าถึง พูดง่ายๆคือขอบเขตของการใช้งานของตัวแปรหรือวิธีการนี้ในรหัส ในบรรดาอุ๊ปส์ส่วนใหญ่มีสามขอบเขต: สาธารณะส่วนตัวและปกป้อง ฉันจะไม่อธิบายรายละเอียดที่นี่ หากคุณมีประสบการณ์ใน OOP คุณควรมีความเข้าใจอย่างลึกซึ้ง สิ่งที่ฉันต้องการจะพูดที่นี่คือประเภทขอบเขตทั้งสามนี้เกือบจะไม่มีความหมายกับ JavaScript เพราะมีขอบเขตสาธารณะเพียงหนึ่งเดียวใน JavaScript ซึ่งขอบเขตนั้นได้รับการดูแลในฟังก์ชั่น ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var test1 = 'glable variable';
ฟังก์ชันตัวอย่าง () {
var test2 = 'ตัวอย่างตัวแปร';
การแจ้งเตือน (test1);
การแจ้งเตือน (test2);
-
ตัวอย่าง();
การแจ้งเตือน (test1);
การแจ้งเตือน (test2);
ตามสิ่งที่เราอธิบายไว้ก่อนหน้านี้ตัวแปร test1 ที่นี่เทียบเท่ากับคุณสมบัติของหน้าต่างดังนั้นมันจะทำงานภายในขอบเขตหน้าต่างทั้งหมดในขณะที่ test2 จะถูกประกาศภายในในฟังก์ชันตัวอย่าง () ดังนั้นขอบเขตของมันจะถูกเก็บรักษาไว้ในตัวอย่าง () หากเบราว์เซอร์ test2 ถูกเรียกออกไปนอกฟังก์ชั่นข้อผิดพลาดจะได้รับแจ้ง และการโทร Test1 Inside ตัวอย่าง () ไม่เป็นไร
ขึ้นอยู่กับสิ่งนี้ลองยกตัวอย่างอีกตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
test var = 'Glable Variable';
ฟังก์ชันตัวอย่าง () {
var test = 'ตัวอย่างตัวแปร';
-
ตัวอย่าง();
การแจ้งเตือน (ทดสอบ);
จะเกิดอะไรขึ้นถ้าตัวอย่างนี้ทำงาน? ใช่กล่องคำเตือนจะแจ้งให้ "ตัวแปร glable" เนื่องจากขอบเขตของตัวแปรทดสอบภายในฟังก์ชั่นตัวอย่าง () จะได้รับการดูแลภายในภายในและจะไม่ส่งผลกระทบต่อตัวแปรทดสอบภายนอก ถ้าเราลบคำหลัก VAR ของตัวแปรทดสอบภายในตัวอย่าง () คุณสามารถลองด้วยตัวเอง
การพูดถึงสิ่งนี้มีแนวคิดอื่นที่เกี่ยวข้องนั่นคือแนวคิดของโซ่ขอบเขต ห่วงโซ่ขอบเขตคือเส้นทางที่สามารถกำหนดค่าของตัวแปร ดังที่เห็นได้จากตัวอย่างข้างต้นคำหลัก VAR ใช้เพื่อรักษาโซ่ขอบเขต หากตัวแปรใช้การประกาศคำหลัก VAR ก็ถือได้ว่าเป็นจุดสิ้นสุดของห่วงโซ่ขอบเขต คำจำกัดความของพารามิเตอร์อย่างเป็นทางการของฟังก์ชั่นเดียวกันจะมีบทบาทคล้ายกัน
เมื่อพูดถึงเรื่องนี้คุณมีความเข้าใจที่ชัดเจนเกี่ยวกับผู้ชายแปลก ๆ คนนี้ใช่ไหม? จากการตีความอย่างง่าย ๆ สิ่งนี้ชี้ไปที่วัตถุที่เรียกฟังก์ชั่นที่ตั้งอยู่เสมอ ตามขอบเขตและขอบเขตห่วงโซ่เราจะกำหนดใบหน้าที่แท้จริงของสิ่งนี้อย่างชัดเจน ในตอนท้ายเรามาเปลี่ยนแปลงอย่างง่าย ๆ จากจุดเริ่มต้นของตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นทดสอบ () {
การแจ้งเตือน (นี้);
-
var obj = function () {
var name = 'testobj';
-
obj.objtest = ทดสอบ;
obj.objtest2 = function () {
ทดสอบ();
-
ทดสอบ();
obj.objtest ();
obj.objtest2 ();
คุณเดาว่าจะแจ้งอะไร? คุณสามารถลองทำงาน (: p);
เนื่องจากสิ่งนี้เปลี่ยนไปตามการเปลี่ยนแปลงของวัตถุที่เรียกฟังก์ชั่นที่อยู่ในเราสามารถบังคับให้เปลี่ยนวัตถุที่เรียกได้หรือไม่? คำตอบคือใช่ ในบทความในอนาคตเราจะแนะนำส่วนนี้ของเนื้อหารวมถึงวิธีการใช้งานของสมาชิกข้อมูลประเภทต่าง ๆ ใน JavaScript การปิดและแนวคิดอื่น ๆ
ฉันได้เขียนประสบการณ์และประสบการณ์บางอย่างระหว่างกระบวนการเรียนรู้ ก่อนอื่นฉันสามารถแบ่งปันกับคุณและตรวจสอบข้อบกพร่องของตัวเอง หากฉันมีคำถามใด ๆ เกี่ยวกับการเขียนโปรดวิจารณ์และให้คำแนะนำ ขอบคุณมาก!