ตัวอย่างนี้อธิบายการใช้งานของฟังก์ชัน 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 ของทุกคน