ตัวอย่างการวิเคราะห์ตัวอย่างการใช้งานของฟังก์ชัน JS นี้

ตัวอย่างนี้อธิบายการใช้งานของฟังก์ชัน JS นี้ แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:

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

มาพูดถึงฟังก์ชั่นก่อน โดยส่วนตัวแล้วฉันเข้าใจว่าฟังก์ชั่นเป็นบล็อกโค้ดที่เรียกซ้ำ ๆ ในภาษา

ใน JS เมื่อฟังก์ชั่นถูกกำหนดให้กับคุณสมบัติของวัตถุจะเรียกว่าวิธีการ

ชอบ:

 var m = {}; m.title = 'title'; m.show = function () {alert (this.title)} m.show ()

มันคือการเรียกฟังก์ชั่นเป็นวิธีของวัตถุ m

ในกรณีนี้ชี้ไปที่วัตถุ m

ชื่อฟังก์ชันการโทรโดยตรงเรียกว่าฟังก์ชัน:

 var a = 1212; function show () {Alert (a) // 1212} show () // 1212

ในสภาพแวดล้อมระดับโลกตัวแปรทั่วโลกสามารถเข้าใจได้ว่าเป็นคุณสมบัติของหน้าต่างและฟังก์ชั่นทั่วโลกเป็นวิธีการหน้าต่าง

ดูตัวอย่างต่อไปนี้:

 var m = {}; m.id = 'mmm'; m.show = function () {การแจ้งเตือน (this.id);} var a = {}; a.id = 'aaa'; a.show = m.show; a.show (); //aaaa.show=m.show; เข้าใจประโยคนี้ก่อนเพราะฟังก์ชั่นเป็นวัตถุ, m.show = function () {Alert (this.id)}

นิพจน์นี้เทียบเท่ากับการอ้างถึง A.Show และ M.Show ในเวลาเดียวกัน

 function () {Alert (this.id)}

เทียบเท่ากับ

 a.show = function () {Alert (this.id)}

ดังนั้นเมื่อมีการเรียก A.Show () สิ่งนี้ชี้ไปที่วัตถุ A

ดูเกาลัดต่อไปนี้

 var m = {}; m.id = 'mmm'm.show = function () {การแจ้งเตือน (this.id)} var a = {} a.id =' aaa'a.show = function () {m.show ()}; a.show (); // mmmm

ดังนั้นเมื่อโทร A.Show () มันเทียบเท่ากับการเรียกวิธีการของ m.show () ดังนั้นสิ่งนี้ ชี้ไปที่วัตถุ M

ดูตัวอย่างต่อไปนี้ฉันยังไม่เข้าใจมันมากในตอนแรก

 var color = 'red'; var app = {}; app.color = "green"; app.paint = function (node) {node.style.color = this.color; การแจ้งเตือน (this.color);} ฟังก์ชั่น findNode (callback) {var btn = document.QuerySelector ('. btn'); การโทรกลับ (btn); // ส่งผ่าน,} findNode (app.paint); การแจ้งเตือน (this.color); // สีแดงแทนสีเขียว

เมื่อฟังก์ชั่นผ่านอาร์กิวเมนต์มันจะผ่านข้อโต้แย้งตามค่าไม่ใช่การอ้างอิง

ดังนั้นเมื่อ findNode (app.paint); ถูกส่งผ่านมันเป็นจริง

 ฟังก์ชั่น (โหนด) {node.style.color = this.color; การแจ้งเตือน (this.color);}

เนื่องจาก FindNode ถูกกำหนดไว้ทั่วโลกชี้ไปที่หน้าต่างหรือไม่ได้กำหนด;

เกี่ยวกับการผ่านพารามิเตอร์ผ่านค่าที่ผ่านมา

 ฟังก์ชั่นแสดง (a) {แจ้งเตือน (a)}

เป็นเรื่องง่ายที่จะเข้าใจเมื่อพารามิเตอร์เป็นประเภทข้อมูลพื้นฐาน

 var b = 10; แสดง (b) // การแจ้งเตือน (10);

สำหรับวัตถุ

 var c = {}; c.prop = true; var showprop = function (obj) {obj.prop = false} showprop (c); //c.prop=false

บางคนคิดว่าตัวอย่างข้างต้นคือการส่งพารามิเตอร์ตามการอ้างอิง

ในความเป็นจริงข้างต้นยังคงผ่านพารามิเตอร์ตามค่า เมื่อ showprop (c) ส่ง C ไปยังฟังก์ชัน C นั้นเทียบเท่ากับการอ้างอิง ฟังก์ชั่นมี obj.prop = false ซึ่งเทียบเท่ากับการเปลี่ยนวัตถุอ้างอิงเป็น {prop: false}

ดูตัวอย่างต่อไปนี้

 var c = {}; c.prop = true; var showprop = ฟังก์ชั่น (obj) {obj = วัตถุใหม่ (); obj.prop = false return obj;} showprop (c); แจ้งเตือน (c.prop); //จริง

ที่นี่ OBJ ที่เข้ามาได้รับการแก้ไข หากคุณผ่านพารามิเตอร์ตามฟังก์ชั่นโดยอ้างอิงการดัดแปลงภายในฟังก์ชั่นจะสะท้อนออกมาอย่างแน่นอนภายนอก

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน