ความเข้าใจของฉันเกี่ยวกับเรื่องนี้เป็นเพียงแค่ความสามารถในการใช้งานและรู้ แต่ฉันไม่ได้เจาะลึกลงไปในสาระสำคัญของมัน ครั้งนี้ฉันมีความเข้าใจอย่างลึกซึ้งกับ "JavaScript the Good Parts" (การดีบักทั้งหมดสามารถดูได้ในคอนโซลคีย์เบราว์เซอร์ F12)
มาดูกันเถอะ
เมื่อเราประกาศฟังก์ชั่นแต่ละฟังก์ชั่นจะมีพารามิเตอร์เพิ่มเติมสองพารามิเตอร์ (พารามิเตอร์อย่างเป็นทางการ) ที่กำหนดไว้หนึ่งคือสิ่งนี้และอีกอย่างหนึ่งคืออาร์กิวเมนต์ อาร์กิวเมนต์เป็นพารามิเตอร์ที่ได้รับการยอมรับจากฟังก์ชั่นจริงและเป็นอาร์เรย์ของคลาส ฉันจะให้คำแนะนำสั้น ๆ เกี่ยวกับข้อโต้แย้งและเราจะมุ่งเน้นไปที่ตัวชี้นี้
ในการเปลี่ยนแปลงเชิงวัตถุสิ่งนี้สำคัญมากและค่าของมันขึ้นอยู่กับรูปแบบของการโทร ใน JavaScript มีรูปแบบการโทร 4 รูปแบบ: รูปแบบการเรียกใช้วิธี, รูปแบบการเรียกใช้ฟังก์ชัน, รูปแบบการเรียกตัวสร้างและใช้รูปแบบการโทร
โหมดการโทรวิธี
เมื่อฟังก์ชั่นเป็นแอตทริบิวต์เป็นวัตถุเรามักจะเรียกฟังก์ชั่นนี้ว่าวิธีการของวัตถุนี้ เมื่อวิธีการนี้ถูกเรียกว่าสิ่งนี้ชี้ไปที่วัตถุที่วิธีการเป็นของ
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var people = {
ชื่อ: "Yika",
sayname: function () {
console.log (this.name); // "yika"
// สิ่งนี้ผูกพันกับวัตถุของผู้คน
-
-
PEOPLE.SAYNAME ();
</script>
ดังที่แสดงโดย Chestnut ชี้ไปที่วัตถุ Sayname วิธีการรับบริบทของวัตถุนี้ผ่านสิ่งนี้เป็นวิธีการสาธารณะ (วิธีการเผยแพร่)
โหมดการโทรฟังก์ชัน
เมื่อฟังก์ชั่นเรียกว่าไม่ใช่วิธีการบนวัตถุมันจะเรียกว่าเป็นฟังก์ชัน
การเรียกรูปแบบนี้จะชี้ไปที่วัตถุหน้าต่างแม้ว่าฟังก์ชั่นนี้อาจถูกเรียกในฟังก์ชั่นภายนอกลองมาดูกัน
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var name = "window-yika";
var people = {
ชื่อ: "People-Yika",
นักเรียน: ฟังก์ชั่น () {
console.log (นี่); // สิ่งนี้ผูกมัดคนวัตถุที่นี่
ฟังก์ชั่น saysname () {
var name = "sayname-yika";
console.log (this.name); // window-yika
// แม้ว่าฟังก์ชั่น sayname เองและผู้คนที่เป็นวัตถุที่อยู่ในตำแหน่งมีค่าชื่อ แต่สิ่งนี้ชี้ไปที่หน้าต่าง
-
sayname ();
-
-
People.student ();
</script>
จากมุมมองนี้คุณรู้วิธีแก้ปัญหา "ข้อผิดพลาดการออกแบบ" JavaScript
ใช่เพียงแค่แคชสิ่งนี้ในฟังก์ชั่นนักเรียนนั่นคือบรรทัดที่ 6 จากนั้นถ่ายโอนสิ่งนี้ไปยังฟังก์ชัน Sayname ผ่านตัวแปรเพื่อแก้ปัญหา!
การคัดลอกรหัสมีดังนี้:
var people = {
ชื่อ: "People-Yika",
นักเรียน: ฟังก์ชั่น () {
var self = this; // แคชนี้
ฟังก์ชั่น saysname () {
var name = "sayname-yika";
console.log (self.name); // "People-yika" ในเวลานี้ชี้ไปที่ผู้คนคัดค้าน
-
sayname ();
-
-
โหมดการโทรคอนสตรัคเตอร์
เมื่อ JavaScript พูดถึงผู้สร้างคุณจะคิดว่า: "ชื่อฟังก์ชั่นเป็นตัวพิมพ์ใหญ่! ใช้ตัวดำเนินการใหม่เมื่อโทร!" การใช้ชื่อตามชื่อฟังก์ชั่นนั้นง่ายต่อการเข้าใจเพื่อสร้างมาตรฐานการตั้งชื่อของตัวสร้าง แต่คุณเคยเจาะลึกว่าทำไมคุณต้องใช้ใหม่หรือไม่? หากคุณเรียกฟังก์ชั่นใหม่ด้วยใหม่พื้นหลังของฟังก์ชั่นจะสร้างวัตถุใหม่ที่ชี้ไปที่ต้นแบบฟังก์ชันและสิ่งนี้ก็ผูกพันกับวัตถุใหม่ JavaScript เป็นภาษาที่ใช้การสืบทอดต้นแบบ นักเรียนที่ไม่ชัดเจนเกี่ยวกับต้นแบบต้นแบบสามารถตรวจสอบข้อมูลด้วยตนเอง ฉันมุ่งเน้นไปที่สิ่งนี้
ก่อนอื่นให้ดูว่าตัวสร้างโดยทั่วไปมีลักษณะอย่างไร
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นคน (ชื่อ) {
this.name = ชื่อ; // นี่ชี้ไปที่วัตถุใหม่ Yika หลังจากเรียกมันด้วยใหม่
this.sayname = function () {
console.log (this.name); // เอาต์พุต
-
-
var yika = คนใหม่ ("yika");
yika.sayname (); // เอาท์พุท "Yika" เพราะ Yika ได้รับผ่านการโทรใหม่นี่จะถูกผูกไว้กับวัตถุ Yika
</script>
เมื่อมองแวบแรกดูเหมือนว่ามันไม่ง่ายที่จะเข้าใจ ทำไมจุดนี้ถึงหน้าต่างในฟังก์ชั่นตอนนี้และตอนนี้คุณสามารถชี้ไปที่ฟังก์ชั่นผู้คนโดยไม่ต้องแคช?
มันไม่สำคัญ คุณไม่ได้บอกว่าฟังก์ชั่นจะทำ "ทำสิ่งเลวร้าย" อย่างลับๆโดยโทรหาใหม่หรือไม่? มาดูกันว่าคุณทำอะไรกันแน่
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นคน (ชื่อ) {
var that = {}; // สิ่งที่ไม่ดี One: สร้างวัตถุด้วยตัวเอง
that.name = name;
That.sayName = function () {
console.log (that.name);
-
กลับมา; // สิ่งที่ไม่ดี 2 คุณจะเปลี่ยนพฤติกรรมของผลตอบแทนส่งคืนวัตถุที่เพิ่งสร้างขึ้น
-
var yika = ผู้คน ("yika"); // ใหม่สามารถละเว้นได้ที่นี่และเลียนแบบการโทรไปยังผู้ให้บริการใหม่
yika.sayname (); // เอาท์พุท "yika" เหมือนตอนนี้
</script>
คุณสามารถมองเห็นได้อย่างชัดเจนด้วยวิธีนี้ ใหม่จะไม่เพียง แต่สร้างวัตถุเท่านั้น แต่ยังจะส่งคืนวัตถุโดยอัตโนมัติเพื่อให้สิ่งนี้จะชี้ไปที่วัตถุใหม่นี้โดยธรรมชาติ
อย่าลืมใช้ใหม่เพื่อเรียกตัวสร้างมิฉะนั้นจะไม่มีการเตือนหากมีอะไรผิดพลาดและข้อตกลงเงินทุนทั้งหมดก็ยังจำเป็นมาก
ใช้โหมดการโทร
วิธีการใช้ช่วยให้เราสามารถสร้างอาร์เรย์ของพารามิเตอร์ที่ส่งผ่านไปยังฟังก์ชั่นการโทรซึ่งยังช่วยให้เราสามารถเปลี่ยนค่านี้ได้
function.apply (ค่าที่ถูกผูกไว้นี้อาร์เรย์พารามิเตอร์อาร์กิวเมนต์)
มีหลายสิ่งหลายอย่างที่ฉันสามารถพูดได้ฉันจะให้เกาลัดที่นี่เพื่อช่วยให้คุณเข้าใจ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นคน (ชื่อ) {
this.name = ชื่อ;
this.sayname = function () {
console.log (this.name); // วิธีการ sayname เป็นของตัวสร้างบุคคล
-
-
ฟังก์ชั่นนักเรียน (ชื่อ) {
PEOPLE.Apply (ข้อโต้แย้งนี้); // วิธีการรวมของการยืมตัวสร้างคือการเรียกผู้สร้างตัวสร้างโดยการใช้ในตัวสร้างนักเรียนและเปลี่ยนค่านี้ของผู้คนนี้
// ด้วยวิธีนี้ทุกครั้งที่มีการสร้างอินสแตนซ์ของนักเรียนตัวสร้างผู้คนจะถูกเรียก
-
VAR นักเรียน = นักเรียนใหม่ ("yika");
student.sayname (); // เอาท์พุท "yika"
</script>
เราสามารถแก้ไขฟังก์ชันของวัตถุที่มีผลผูกพันนี้ได้อย่างง่ายดายผ่านการใช้งาน การโทรคล้ายกับการใช้งานยังมีเอฟเฟกต์เดียวกัน นักเรียนที่สนใจสามารถค้นหาและเรียนรู้ด้วยตัวเอง
ในที่สุดเราก็เปลี่ยนโหมดการโทรทั้งสี่ของสิ่งนี้เสร็จแล้ว โหมดการเรียกใช้วิธีการและโหมดการโทรคอนสตรัคเตอร์จะถูกใช้มากขึ้นและจะสำคัญกว่า สำหรับโหมดการเรียกใช้ฟังก์ชันเราต้องเรียนรู้ที่จะหลีกเลี่ยงกับดักในนั้น
หากมีข้อผิดพลาดใด ๆ โปรดรายงานในเวลาและฉันจะแก้ไขโดยเร็วที่สุดเพื่อป้องกันไม่ให้ผู้อื่นเข้าใจผิด ขอบคุณ!