Javascript “this”, “self” object by

29
Dec
0

เราคงจะคุ้นเคยว่าในภาษา OOP ทั่วๆ ไปอย่าง C#, Java นั้นจะมีการใช้งาน this เพื่ออ้างอิงถึงตัว obj ของ class นั้นๆ แต่ว่า this ใน javascript นั้นจะแตกต่างกันออกไป เราลองมาดูตัวอย่าง


var obj = {
items: ["a", "b", "c"],
process: function() {
this.items.forEach(function(item) {
this.print(item);
});
},
print: function(item) {
console.log('*' + item + '*');
}
};
obj.process();

ตัวอย่างนี้เราประกาศตัวแปรชื่อ obj มี properties ชื่อ items และมี function ชื่อ process กับ print เราสั่งให้ทำงานด้วย obj.process() ซึ่งจะเห็นว่ามีการสั่ง this.items.forEach ณ บรรทัดนี้โค้ดจะยังทำงานได้ดังที่เราคาดหวังอยู่ แต่เมื่อเข้ามาอยู่ใน forEach แล้วบรรทัดที่สั่ง this.print(item); ก็ควรจะทำงานได้เหมือน this.items ใช่ไหมครับ แต่เดี๋ยวก่อน! ลอง copy ไปรันใน Google Chrome Developer Tools หรือ Firebug ไหงไม่มีผลลัพธ์ออกมาเลยล่ะ! ลองมาดูที่บรรทัดนี้อีกครั้ง


this.items.forEach(function(item) {
this.print(item);
});

this.items อ้างถึง items จาก function ชื่อ process ได้ แต่ this.print ทำไมสั่งไม่ได้ล่ะ? เป็นเพราะเมื่อมีการประกาศ function(item) {} ซึ่งเป็น function anonymous (ไม่มีชื่อ) ขึ้นมาจะพบว่ามีการสร้าง block ขอบเขตให้ตัวแปร block ใหม่ การประกาศตัวแปรใดๆ ในนี้จะไม่สามารถถูกเรียกจากนอก scope function นี้ได้ใช่ไหมครับ เช่น


this.items.forEach(function(item) {
var a =5;
});
console.log(a);

แน่นอน เราไม่สามารถสั่งการแบบนี้ได้ a จะได้เป็น undefined เช่นเดียวกันกับตัวแปร this ซึ่งตัว javascript จะถือว่าเป็นตัวแปรภายใน scope anonymous function โดยอัตโนมัติ เราไม่ได้เป็นคนประกาศตัวแปรชื่อ this การที่เราสั่ง this.print(item) this นั้นเป็นตัวแปรภายใน scope ที่เราสร้างขึ้นเอง จะไม่สามารถอ้างอิงถึง function print ได้จริงๆ เพราะอยู่คนละ scope กัน ดังนั้น ทีนี้มาดูวิธีแก้ปัญหากันครับ


var self = this;
this.items.forEach(function(item) {
self.print(item);
});

เราจะสร้างตัวแปรชื่อ self มารับค่า this เอาไว้ก่อนเข้าส่วนของ forEach ซึ่งภาษา Javascript นี้สามารถอ้างอิงถึงตัวแปรที่อยู่ภายนอก scope ได้ (ตรงกันข้าม ไม่สามารถอ้างถึงตัวแปรที่อยู่ภายใน scope ที่ลึกกว่าได้ดังที่แสดงให้ดูไปแล้ว เนื่องจาก code ด้านในยังไม่ถูก execute จริงๆ) ทำให้มีตัวแปรที่จำค่า this ของก่อนเข้า forEach เอาไว้ พอมีการอ้างถึง self ซึ่งเก็บว่า this ของ scope ตัวนอกเอาไว้จึงสามารถทำงานได้เป็นปกติครับ เทคนิคนี้ถูกใช้อย่างแพร่หลายมากใน library javascript หลายๆ ตัว ดังนั้นถ้าเจอ self เมื่อไหร่ให้เดาได้เลยว่ามันคือ this ของ scope ตัวนอกครับ :)

Reference: http://book.mixu.net/ch4.html

Enjoy this article?

Consider subscribing to our RSS feed!

ไม่มีความเห็น

ยังไม่มีความเห็น

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน