"

This ใน JavaScript มันคืออะไรกัน

แน่ !?

This ใน JavaScript
มันคืออะไรกันแน่ !?
Developer Team
BorntoDev Co., Ltd.

! Love 16 " Share $ Tweet

การเขียนโปรแกรมนั้นการอ้างอิงข้อมูลต่างๆนอกจากการเรียกด้วยชื่อตัวแปร การใช้ this ก็

เป็น keyword ที่หลายๆภาษาใช้กัน โดยที่ this นั้นโดยทั่วไปแล้วจะเป็นการเรียกถึง object
ที่เป็นเจ้าของของมัน โดยในภาษา JavaScript เองก็มี this เช่นกัน และในภาษานี้มีการใช้งาน
this แบบไหนบ้าง และสามารถนําไปใช้งานอย่างไรได้บ้าง ไปดูกันเลยยย!

การใช้ this เปล่าๆ

ถ้าเราใช้ this เปล่าๆเจ้าของของมันก็คือ global ซึ่งใน browser global object ก็คือ

Window นั่นเอง ถ้าเราลอง console.log บน browser ก็จะได้ออกมาประมาณนี้

การใช้ในfuntion

การใช้ใน function เราก็จะได้ออกมาเป็น window เหมือนเดิม เพราะ window คือ global

ที่สั่งให้ function ทํางานอยู่

แต่ถ้าเราประกาศตัวแปรที่มี function Thisis() เป็นสมาชิกใน object แล้วเรียกดูก็จะได้ออก

มาไม่เหมือนเดิมเพราะตอนนี้เจ้าของของมันคือ object ที่ช่อ
ื ว่า imFree

โดยเราสามารถทําได้อีกวิธีคือการใช้ bind ซึ่งจะเป็นการประกาศ function ที่เป็นเจ้าของ

this

call()

call เป็น method ของ JavaScript ที่สามารถใส่ object เป็น argument ของ function
และยังสามารถเติม argument เพิ่ มเติมได้ด้วย

apply()

apply นั้นจะคล้ายกับ call แต่จะเปลี่ยนจากการรับค่าแยกต่างหากเป็นการรับค่าเป็น array

แทน

“new” keyword

เราสามารถใช้ new เพื่ อสร้าง object ใหม่โดยที่ this จะไปผูกไว้ได้โดยอัตโนมัติ ซึ่งเราจะ

สามารถใช้ในการสร้าง property และ method ได้เหมือนกับภาษาอื่นๆ

การใช้กับ arrow function

การใช้ this กับ arrow function ของ JavaScript นั้นจะไม่เหมือนกับการประกาศ function

แบบปกติเพราะมันจะไม่ผูกกับ object ตัวนั้นแต่จะยังผูกกับ global อยู่

แต่ถ้าเรายังสามารถใช้กับ object ที่ถูก new ได้ปกติผ่าน constructor function

chain function

เรายังสามารถ return this เพื่ อนํามาใช้สําหรับทํา chain function ได้แบบนี้

บทความนี้อ้างอิงข้อมูลจากวีดีโอด้านล่างนี้

What is THIS in JavaScript? in 100 seconds

!ภายห&ง แช*

หากคุณสนใจพั ฒนา สตาร์ทอัพ แอปพลิเคชัน และ

เทคโนโลยีของตัวเอง ?
อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Advance Problem Solving Basic Motion Graphic &

฿2,590.00 ฿2,090.00
Animation
฿1,990.00 ฿1,290.00

Become To Front-End Complete Arduino For

Developer Beginner
฿5,990.00 ฿3,290.00 ฿3,290.00 ฿1,990.00

Related Posts

เทคโนโลยี

React State

เทคโนโลยี

Query API ด้วย GraphQL

เทคโนโลยี

Vanilla.JS 101

เ"อกเ%ยน(

! คอร์สเรียนพรีเมียมออนไลน์
! ความรู้ฟรีที่ YouTube
" หลักสูตรสําหรับองค์กร

ส*บส,นพวกเรา

! ติดต่อลงโฆษณา
# เป็น Partner กับเรา

1ห3บภาคการ6กษา เ>ยว?บ BorntoDev

" คอร์สเรียนในราคาพิ เศษ ' borntoDev คืออะไร ?

# ร่วมสอนกับเรา
8น9ใ;ความ=วยเห"อ
ไA3บการ3บรองจาก
$ คําถามที่พบบ่อย
% นโยบายความเป็นส่วนตัว
& นโยบายการคืนเงิน

สงวนลิขสิทธิ์ © 2563 - ข้อมูลและเนื้อหาทั้งหมด - บริษัท " ! # $ (

บอร์นทูเดฟ จํากัด
นโยบายรักษาข้อมูลส่วนบุคคล ข้อตกลงและเงื่อนไขการใช้ !
บริการ