คำอธิบายโดยละเอียดของตัวชี้นี้ใน JavaScript

JavaScript เป็นภาษาสคริปต์ที่รองรับฟังก์ชั่นขั้นสูงเช่นการเขียนโปรแกรมการทำงานการปิดมรดกตามต้นแบบ ฯลฯ JavaScript ดูเหมือนจะเริ่มต้นได้ง่ายในตอนแรก แต่เมื่อคุณใช้มันในเชิงลึก ในหมู่พวกเขาคำหลักนี้ใน JavaScript เป็นแนวคิดที่ค่อนข้างสับสน ในสถานการณ์ที่แตกต่างกันสิ่งนี้จะกลายเป็นวัตถุที่แตกต่างกัน มีมุมมองที่เฉพาะการเรียนรู้คำหลักนี้อย่างถูกต้องใน JavaScript คุณสามารถป้อนเกณฑ์ของภาษา JavaScript ได้ ในภาษาที่มุ่งเน้นวัตถุกระแสหลัก (เช่น Java, C#ฯลฯ ) ซึ่งหมายถึงชัดเจนและเฉพาะเจาะจงนั่นคือชี้ไปที่วัตถุปัจจุบัน โดยทั่วไปจะถูกผูกไว้ระหว่างระยะเวลาการรวบรวม สิ่งนี้ถูกผูกไว้ระหว่างรันไทม์ใน JavaScript ซึ่งเป็นเหตุผลสำคัญว่าทำไมคำหลักนี้มีความหมายหลายอย่างใน JavaScript

เนื่องจากคุณสมบัติการเชื่อมโยงในระหว่างการรันไทม์สิ่งนี้ใน JavaScript สามารถเป็นวัตถุส่วนกลางวัตถุปัจจุบันหรือวัตถุใด ๆ ซึ่งขึ้นอยู่กับวิธีการที่เรียกว่าฟังก์ชัน มีหลายวิธีในการเรียกฟังก์ชั่นใน JavaScript:

เรียกว่าเป็นวิธีวัตถุ

เป็นการเรียกใช้ฟังก์ชัน

เรียกว่าเป็นตัวสร้าง;

ใช้ใช้หรือโทรโทร

เมื่อคำพูดไปตัวละครไม่ดีเท่ารูปแบบและรูปแบบไม่ดีเท่ารูปภาพ เพื่อที่จะทำให้คนอื่นเข้าใจดีขึ้นว่าจาวาสคริปต์สิ่งนี้ชี้ไปที่อะไร? นี่คือภาพที่จะอธิบาย:

ในภาพด้านบนฉันเรียกมันว่า "JavaScript แผนผังการตัดสินใจนี้" (ในโหมดที่ไม่ใช่ Strict) ต่อไปนี้เป็นตัวอย่างเพื่อแสดงให้เห็นว่าตัวเลขนี้สามารถช่วยเราตัดสินสิ่งนี้ได้อย่างไร:

 var point = {x: 0, y: 0, moveto: function (x, y) {this.x = this.x + x; this.y = this.y + y; }}; // ต้นไม้การตัดสินใจคำอธิบาย: ฟังก์ชั่น point.moveto (1,1) ไม่ได้เรียกร้องให้ใหม่เข้าสู่การยับยั้ง // มันถูกเรียกด้วย dot (.) จากนั้นชี้ไปที่วัตถุโทรมาก่อน // สิ่งนี้ผูกพันกับวัตถุปัจจุบันนั่นคือวัตถุจุด

ฟังก์ชั่น point.moveto เรียกด้วยใหม่หรือไม่? เห็นได้ชัดว่าไม่ใช่ การเข้าไปในสาขา "ไม่" นั่นคือฟังก์ชั่นที่เรียกว่าด้วย dot (.) หรือไม่? -

ฟังก์ชั่น point.moveto ถูกเรียกด้วย dot (.) นั่นคือมันเข้าสู่สาขา "ใช่" นั่นคือนี่ชี้ไปที่จุดวัตถุก่อน Point.moveto

ไดอะแกรมการวิเคราะห์ของสิ่งที่จุดนี้ไปในจุดรูปฟังก์ชัน Moveto แสดงในรูปต่อไปนี้:

มายกตัวอย่างอีกตัวอย่างหนึ่งดูที่รหัสต่อไปนี้:

 ฟังก์ชั่น func (x) {this.x = x; } func (5); // นี่คือหน้าต่างวัตถุทั่วโลก X เป็นตัวแปรระดับโลก // การวิเคราะห์แผนผังทรี: ฟังก์ชั่น func () ที่เรียกว่าใหม่หรือไม่? ไม่ว่าจะเรียกด้วย DOT เมื่อเข้าสู่ฟังก์ชั่น func () หรือไม่? ถึงไม่สิ่งนี้ชี้ไปที่ Object Windowx // x => 5

กระบวนการกำหนดฟังก์ชั่น func () ใน "JavaScript แผนผังการตัดสินใจนี้" มีดังนี้:

ฟังก์ชั่น func (5) เรียกว่าเรียกด้วยใหม่หรือไม่? เห็นได้ชัดว่าไม่ใช่ การเข้าไปในสาขา "ไม่" นั่นคือฟังก์ชั่นที่เรียกว่าด้วย dot (.) หรือไม่? -

ฟังก์ชั่น func (5) ไม่ได้ถูกเรียกด้วย dot (.) นั่นคือมันเข้าสู่สาขา "ไม่" นั่นคือจุดนี้ไปยังหน้าต่างตัวแปรทั่วโลกจากนั้น this.x คือ Window.x

แผนภาพการวิเคราะห์ของสิ่งที่ฟังก์ชั่น func นี้ชี้ไปที่แสดงในรูปต่อไปนี้:

สำหรับวิธีการโทรโดยตรงเป็นฟังก์ชั่นให้ดูตัวอย่างที่ซับซ้อน:

 var point = {x: 0, y: 0, moveto: function (x, y) {// ฟังก์ชันภายใน var movex = function (x) {this.x = x; // จุดนี้ไปถึงอะไร? หน้าต่าง }; // ฟังก์ชั่นภายใน var movey = function (y) {this.y = y; // จุดนี้ไปถึงอะไร? หน้าต่าง }; Movex (x); Movey (y); - point.moveto (1,1); point.x; // => 0 point.y; // => 0 x; // => 1 y; // => 1

การโทรภายในจริงของฟังก์ชั่น movex () และ movey () กระบวนการของการพิจารณาสิ่งนี้ภายในฟังก์ชั่น Movex () ใน "JavaScript แผนผังการตัดสินใจนี้" มีดังนี้:

ฟังก์ชั่น movex (1) เรียกว่าเรียกด้วยใหม่หรือไม่? เห็นได้ชัดว่าไม่ใช่ การเข้าไปในสาขา "ไม่" นั่นคือฟังก์ชั่นที่เรียกว่าด้วย dot (.) หรือไม่? -

ฟังก์ชั่น Movex (1) ไม่ได้ถูกเรียกด้วย dot (.) นั่นคือมันเข้าสู่สาขา "ไม่" นั่นคือนี่ชี้ไปที่หน้าต่างตัวแปรทั่วโลกจากนั้นนี่คือ window.x

ลองดูตัวอย่างของการโทรคอนสตรัคเตอร์:

 จุดฟังก์ชัน (x, y) {this.x = x; // นี้ ? this.y = y; // นี่?} var np = จุดใหม่ (1,1); np.x; // 1VAR P = จุด (2,2); px; // ข้อผิดพลาด P เป็นวัตถุว่างเปล่า undefinedWindow.x; // 2

กระบวนการพิจารณาสิ่งนี้ใน "JavaScript แผนผังการตัดสินใจนี้" ในฟังก์ชัน (1,1) มีดังนี้:

var np = ใหม่คือจุด (1,1) โทรมาเรียกด้วยใหม่หรือไม่? เห็นได้ชัดว่านี่คือการเข้าสู่สาขา "ใช่" นั่นคือชี้ไปที่ NP;

จากนั้น this.x = 1 นั่นคือ np.x = 1;

กระบวนการของการพิจารณาสิ่งนี้ใน "JavaScript แผนผังการตัดสินใจนี้" ของฟังก์ชั่นจุด (2,2) ใน var p = จุด (2,2) มีดังนี้:

Var p = จุด (2,2) เรียกว่าเรียกด้วยใหม่หรือไม่? เห็นได้ชัดว่าไม่ใช่ การเข้าไปในสาขา "ไม่" นั่นคือฟังก์ชั่นที่เรียกว่าด้วย dot (.) หรือไม่? -

ฟังก์ชั่นจุด (2,2) ไม่ได้เรียกด้วย dot (.) หรือไม่? พิจารณาแล้วว่าไม่ใช่นั่นคือป้อนสาขา "ไม่" นั่นคือนี่ชี้ไปที่หน้าต่างตัวแปรทั่วโลกแล้ว this.x เป็น window.x จริง;

this.x = 2 หมายถึง window.x = 2

สุดท้ายมาดูตัวอย่างฟังก์ชั่นการโทรด้วยการโทรและสมัคร:

 จุดฟังก์ชัน (x, y) {this.x = x; this.y = y; this.moveto = function (x, y) {this.x = x; this.y = y; }} var p1 = จุดใหม่ (0, 0); var p2 = {x: 0, y: 0}; p1.moveto.apply (p2, [10, 10]); // ใช้เป็น P2.Moveto (10, 10) p2.x // 10

กระบวนการกำหนดฟังก์ชั่น p1.moveto.apply (P2, [10,10]) ใน "JavaScript แผนผังการตัดสินใจนี้" มีดังนี้:

เรารู้ว่าทั้งสองวิธีใช้และการโทรมีประสิทธิภาพอย่างมากและอนุญาตให้สลับบริบทของการดำเนินการฟังก์ชั่นนั่นคือวัตถุที่ถูกผูกไว้กับสิ่งนี้ P1.Moveto.Apply (P2, [10,10]) เป็น P2.MoveTo จริง (10,10) จากนั้น P2.Moveto (10,10) สามารถตีความได้ว่า:

ฟังก์ชั่นโทรมาพร้อมกับใหม่หรือไม่? เห็นได้ชัดว่าไม่ใช่ การเข้าไปในสาขา "ไม่" นั่นคือฟังก์ชั่นที่เรียกว่าด้วย dot (.) หรือไม่? -

ฟังก์ชั่น P2.Moveto (10,10) เรียกด้วย dot (.) นั่นคือมันเข้าสู่สาขา "ใช่" นั่นคือนี่ชี้ไปที่วัตถุ P2 ใน P2.Moveto (10,10) ก่อนหน้านี้ p2.x = 10

เกี่ยวกับกระบวนการของสภาพแวดล้อมการดำเนินการฟังก์ชั่น JavaScript คำอธิบายในไลบรารีเอกสาร IBM DeveloperWorks รู้สึกดีมากและข้อความที่ตัดตอนมามีดังนี้:

 "ฟังก์ชั่นในจาวาสคริปต์สามารถดำเนินการเป็นฟังก์ชั่นทั่วไปหรือเป็นวัตถุซึ่งเป็นเหตุผลหลักว่าทำไมสิ่งนี้จึงอุดมไปด้วยเมื่อมีการดำเนินการฟังก์ชั่นสภาพแวดล้อมการดำเนินการ (ExecutionContext) ถูกสร้างขึ้นและพฤติกรรมทั้งหมดของฟังก์ชั่นเกิดขึ้น ตัวแปรครั้งแรกที่กำหนดค่าพารามิเตอร์อย่างเป็นทางการของฟังก์ชันคือค่าที่สอดคล้องกันในตัวแปรอาร์กิวเมนต์ การดำเนินการที่ได้รับมอบหมายจะถูกดำเนินการเมื่อมีการสร้างฟังก์ชั่นหลังจากการดำเนินการ (ExecutionContext) ที่ประสบความสำเร็จ สร้างขึ้นสำเร็จและฟังก์ชั่นเริ่มดำเนินการทีละบรรทัดและตัวแปรที่ต้องการจะถูกอ่านจากสภาพแวดล้อมการดำเนินการ (ExecutionContext) ที่สร้างขึ้นมาก่อน

การทำความเข้าใจข้อความนี้จะเป็นประโยชน์อย่างมากในการทำความเข้าใจฟังก์ชั่น JavaScript