Please enable JavaScript.
Coggle requires JavaScript to display documents.
นายจิรวัฒน์ บุตรกุล 62123468013 Class and Objects (JavaScript Object…
นายจิรวัฒน์ บุตรกุล 62123468013 Class and Objects
JavaScript Objects
Objects are Variables
ตัวแปร JavaScript มีค่าตัวแปรเพียงค่าเดียว
วัตถุก็เป็นตัวแปร แต่วัตถุสามารถมีค่าได้มากมาย
ค่าถูกเขียนเป็นชื่อ: คู่ของค่า (ชื่อและค่าคั่นด้วยเครื่องหมายโคลอน)
วัตถุของ JavaScript คือชุดของค่าที่มีชื่อเสมอ
Object Properties
ค่าที่ระบุชื่อในวัตถุ JavaScript
เรียกว่าคุณสมบัติ
วัตถุที่เขียนเป็นคู่ค่าชื่อจะคล้ายกับดังต่อไปนี้
Associative arrays in PHP
Dictionaries in Python
Hash tables in C
Hash maps in Java
Hashes in Ruby and Perl
Object Methods
วิธีการคือการกระทำที่สามารถทำได้บนวัตถุ
วิธีการคือการกระทำที่สามารถทำได้บนวัตถุ
คุณสมบัติของวัตถุสามารถเป็นได้ทั้งค่าดั่งเดิมวัตถุอื่นๆ และฟังก์ชัน
ขั้นตอนวัตถุเป็นคุณสมบัติของวัตถุที่มีความหมายฟังก์ชัน
วัตถุ JavaScript เป็นที่บรรจุสำหรับค่าที่ตั้งชื่อเรียกว่าคุณสมบัติและวิธีการ
Creating a JavaScript Object
ด้วย JavaScript นั้นเราสามารถกำหนดและสร้างวัตถุของเราเอง [โดยมีหลายวิธีในการสร้างวัตถุใหม่ดังนี้
กำหนดและสร้างวัตถุเดียวโดยใช้วัตถุตามตัวอักษรนั้นๆ
กำหนดและสร้างวัตถุเดียวด้วยคำหลักใหม่
กำหนดตัวสร้างวัตถุและสร้างวัตถุขึ้น
Using an Object Literal
วิธีดังต่อไปนี้คือวิธีที่ง่ายที่สุดสำหรับการสร้าง JavaScript
การใช้วัตถุตามตัวอักษรคุณทั้งสองกำหนดและสร้างวัตถุในคำสั่งเดียว
วัตถุตามตัวอักษรคือรายการชื่อ: คู่ค่า (เช่นอายุ: 50) ภายในวงเล็บปีกกา {}
ตัวอย่างต่อไปนี้สร้างวัตถุ JavaScript ใหม่ที่มีคุณสมบัติสี่อย่าง:
ในช่องว่างและตัวแบ่งบรรทัดไม่สำคัญ และคำจำกัดความของวัตถุสามารถขยายหลายบรรทัด
Using the JavaScript Keyword new
ตัวอย่างต่อไปนี้สามารถสร้างวัตถุ JavaScript
ใหม่ที่มีคุณสมบัติสี่อย่างได้
ตัวอย่างสองตัวอย่างข้างต้นทำในสิ่งเดียวกัน ไม่จำเป็นต้องใช้ Object ใหม่ () เพื่อความง่ายการอ่านและความเร็วในการใช้งานให้ใช้วิธีแรก (วิธีการตามตัวอักษรของวัตถุ)
JavaScript Objects are Mutable
วัตถุไม่แน่นอน: พวกเขาจะได้รับการแก้ไขโดยการอ้างอิงไม่ใช่ตามค่า หาก person เป็นวัตถุข้อความต่อไปนี้จะไม่สร้างสำเนาของบุคคล:
วัตถุ x ไม่ใช่สำเนาของบุคคล มันเป็นคน ทั้ง x และบุคคลเป็นวัตถุเดียวกัน และการเปลี่ยนแปลงใด ๆ กับ x จะเปลี่ยนคนด้วยเนื่องจาก x และบุคคลเป็นวัตถุเดียวกัน
JavaScript Primitives
ค่าดั้งเดิมคือค่าที่ไม่มีคุณสมบัติหรือวิธีการ
ชนิดข้อมูลดั้งเดิมคือข้อมูลที่มีค่าดั้งเดิม
JavaScript กำหนดประเภทข้อมูลดั้งเดิม 5 ประเภท
string
number
boolean
null
undefined
ค่าดั้งเดิมนั้นไม่เปลี่ยนรูป (พวกเขาจะฮาร์ดโค้ดและดังนั้นจึงไม่สามารถเปลี่ยนแปลงได้)
ถ้า x = 3.14 คุณสามารถเปลี่ยนค่าของ x แต่คุณไม่สามารถเปลี่ยนค่า 3.14
JavaScript Object Properties
JavaScript Properties
คุณสมบัติคือค่าที่เกี่ยวข้องกับวัตถุ JavaScript
วัตถุ JavaScript คือชุดของคุณสมบัติที่ไม่ได้เรียงลำดับ
โดยปกติคุณสมบัติสามารถเปลี่ยนแปลงเพิ่มและลบ แต่บางคุณสมบัติเป็นแบบอ่านอย่างเดียว
Accessing JavaScript Properties
ไวยากรณ์สำหรับการเข้าถึง
คุณสมบัติของวัตถุคือ
นิพจน์ต้องประเมินเป็นชื่อคุณสมบัติ
JavaScript for...in Loop
คำสั่ง JavaScript สำหรับ for...in ใน
ลูปผ่านคุณสมบัติของวัตถุ
บล็อกของโค้ดที่อยู่ในลูป for ... in จะถูกดำเนินการหนึ่งครั้งสำหรับแต่ละคุณสมบัติ
Adding New Properties
คุณสามารถเพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่โดยเพียงแค่ให้มันมีค่า สมมติว่าวัตถุบุคคลนั้นมีอยู่แล้ว - จากนั้นคุณสามารถให้คุณสมบัติใหม่
Deleting Properties
คำหลักลบคุณสมบัติจากวัตถุ
คำหลักจะลบทั้งมูลค่าของคุณสมบัติและคุณสมบัตินั้นเอง
หลังจากลบแล้วจะไม่สามารถใช้คุณสมบัติได้ก่อนที่จะถูกเพิ่มกลับมาอีกครั้ง
ตัวดำเนินการลบถูกออกแบบมาเพื่อใช้กับคุณสมบัติของวัตถุ มันไม่มีผลกับตัวแปรหรือฟังก์ชั่น
ไม่ควรใช้ตัวดำเนินการลบกับคุณสมบัติวัตถุ JavaScript ที่กำหนดไว้ล่วงหน้า แอปพลิเคชันของคุณอาจขัดข้อง
Property Attributes
คุณสมบัติทั้งหมดมีชื่อ นอกจากนี้พวกเขายังมีค่า
ค่าเป็นหนึ่งในคุณสมบัติของคุณสมบัติ
คุณลักษณะอื่น ๆ ได้แก่ นับจำนวนกำหนดค่าได้และเขียนได้
คุณลักษณะเหล่านี้กำหนดวิธีการเข้าถึงคุณสมบัติ (สามารถอ่านได้หรือไม่มันเขียนได้หรือไม่)
ใน JavaScript คุณลักษณะทั้งหมดสามารถอ่านได้ แต่สามารถเปลี่ยนค่าคุณสมบัติได้เท่านั้น (และเฉพาะในกรณีที่คุณสมบัตินั้นเขียนได้)
Prototype Properties
วัตถุจาวาสคริปต์สืบทอดคุณสมบัติของต้นแบบของพวกเขา คำหลักลบไม่ได้ลบคุณสมบัติที่สืบทอดมา แต่ถ้าคุณลบคุณสมบัติต้นแบบมันจะส่งผลกระทบต่อวัตถุทั้งหมดที่สืบทอดมาจากต้นแบบ
JavaScript Object Methods
The this Keyword
ในการกำหนดฟังก์ชั่นนี้หมายถึง "เจ้าของ" ของฟังก์ชั่น
ในตัวอย่างข้างต้นนี่เป็นวัตถุบุคคลที่ "เป็นเจ้าของ" ฟังก์ชัน fullName
กล่าวอีกนัยหนึ่ง this.firstName หมายถึงคุณสมบัติ firstName ของวัตถุนี้
อ่านเพิ่มเติมเกี่ยวกับคำหลักนี้ที่ JS คำหลักนี้
JavaScript Methods
วิธีการจาวาสคริปต์คือการกระทำที่สามารถดำเนินการกับวัตถุ และส่วนเมธอด JavaScript เป็นคุณสมบัติที่มีนิยามฟังก์ชัน
เมธอดคือฟังก์ชันที่เก็บไว้เป็นคุณสมบัติของวัตถุ
Accessing Object Methods
คุณสามารถเข้าถึงวัตถุด้วยไวยากรณ์ต่อไปนี้
โดยทั่วไปคุณจะอธิบาย fullName () เป็นวิธีการของวัตถุบุคคลและ fullName เป็นคุณสมบัติ
คุณสมบัติ fullName จะดำเนินการ (เป็นฟังก์ชั่น) เมื่อมีการเรียกใช้ด้วย ()
ตัวอย่างนี้เข้าถึงเมธอด fullName () ของวัตถุบุคคล
หากคุณเข้าถึงคุณสมบัติ fullName โดยไม่มี () จะส่งคืนนิยามฟังก์ชัน
Using Built-In Methods
ตัวอย่างนี้ใช้เมธอด toUpperCase () ของวัตถุ String เพื่อแปลงข้อความเป็นตัวพิมพ์ใหญ่
ค่าของ x หลังจากประมวลผลโค้ดข้างต้นจะเป็น
Adding a Method to an Object
การเพิ่มวิธีการใหม่ให้กับ
วัตถุนั้นเป็นเรื่องง่าย
JavaScript Object Accessors
JavaScript Accessors (Getters and Setters)
ECMAScript 5 (2009) เปิดตัว Getter และ Setters
ส่วนGetters และ setters อนุญาตให้คุณกำหนด Object Accessors (คุณสมบัติที่คำนวณ)
JavaScript Getter (The get Keyword)
ตัวอย่างนี้ใช้คุณสมบัติ lang เพื่อรับค่าของคุณสมบัติภาษา
JavaScript Setter (The set Keyword)
ตัวอย่างนี้ใช้คุณสมบัติ lang เพื่อตั้งค่าของคุณสมบัติภาษา
JavaScript Function or Getter?
ความแตกแตกต่างระหว่างสองข้อนี้คือดังต่อไปนี้
ตัวอย่างที่ 1 เข้าถึง fullName เป็นฟังก์ชัน: person.fullName ()
ตัวอย่างที่ 2 เข้าถึง fullName เป็นคุณสมบัติ: person.fullName
ตัวอย่างที่สองแสดงไวยากรณ์ที่ง่ายขึ้น
Data Quality
JavaScript สามารถรักษาความปลอดภัยของข้อมูลได้ดีขึ้นเมื่อใช้ getters และ setters ส่วนการใช้คุณสมบัติ lang ในตัวอย่างนี้จะคืนค่าของคุณสมบัติภาษาเป็นตัวพิมพ์ใหญ่
การใช้คุณสมบัติ lang ในตัวอย่างนี้เก็บ
ค่าตัวพิมพ์ใหญ่ในคุณสมบัติภาษา
Why Using Getters and Setters?
มันทำให้ไวยากรณ์ง่ายขึ้น
จะช่วยให้ไวยากรณ์ที่เท่าเทียมกันสำหรับคุณสมบัติและวิธีการ
มันสามารถรักษาความปลอดภัยคุณภาพข้อมูลที่ดีขึ้น
มันสามารถรักษาความปลอดภัยคุณภาพข้อมูลที่ดีขึ้น
text
Object.defineProperty()
นอกจากนี้ยังสามารถใช้วิธีการ Object.defineProperty () เพื่อเพิ่ม Getters และ Setters
JavaScript Object Constructors
มันถือเป็นแนวปฏิบัติที่ดีในการตั้งชื่อฟังก์ชั่นคอนสตรัคเตอร์ด้วยอักษรตัวใหญ่ตัวพิมพ์ใหญ่
Object Types (Blueprints) (Classes)
ตัวอย่างจากบทก่อนหน้ามี จำกัด พวกเขาสร้างวัตถุเดียวเท่านั้น บางครั้งเราต้องการ "พิมพ์เขียว" สำหรับการสร้างวัตถุจำนวนมากที่มี "ประเภท" เดียวกัน ส่วนวิธีการสร้าง "ประเภทวัตถุ" คือการใช้ฟังก์ชั่นการสร้างวัตถุ ในตัวอย่างข้างต้นฟังก์ชัน Person () เป็นฟังก์ชันตัวสร้างวัตถุ และวัตถุประเภทเดียวกันถูกสร้างขึ้นโดยการเรียกฟังก์ชันคอนสตรัคเตอร์ด้วยคีย์เวิร์ดใหม่
The this Keyword
ใน JavaScript สิ่งที่เรียกว่านี่คือวัตถุที่ "เป็นเจ้าของ" โค้ด มูลค่าของสิ่งนี้เมื่อใช้ในวัตถุเป็นวัตถุเอง ในฟังก์ชันตัวสร้างสิ่งนี้ไม่มีค่า มันเป็นสิ่งทดแทนสำหรับวัตถุใหม่ มูลค่าของสิ่งนี้จะกลายเป็นวัตถุใหม่เมื่อมีการสร้างวัตถุใหม่
โปรดทราบว่านี่ไม่ใช่ตัวแปร มันเป็นคำหลัก
คุณไม่สามารถเปลี่ยนค่าของสิ่งนี้
Adding a Property to an Object
การเพิ่มคุณสมบัติใหม่ให้กับวัตถุ
ที่มีอยู่นั้นเป็นเรื่องง่ายนิดเดียว
คุณสมบัติจะถูกเพิ่มไปยัง myFather ไม่ให้ฉันแม่ (ไม่ใช่วัตถุบุคคลอื่นใด)
Adding a Method to an Object
การเพิ่มวิธีการใหม่ไปยังวัตถุที่มีอยู่เป็นเรื่องง่าย
วิธีการจะถูกเพิ่มไปยัง myFather ไม่ให้ฉันแม่ (ไม่ให้วัตถุบุคคลอื่น)
Adding a Property to a Constructor
คุณไม่สามารถเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุได้เช่นเดียวกับที่คุณเพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่
ในการเพิ่มคุณสมบัติใหม่ให้กับคอนสตรัคเตอร์คุณต้องเพิ่มมันเข้าไปในฟังก์ชันคอนสตรัคเตอร์
วิธีนี้คุณสมบัติของวัตถุสามารถมีค่าเริ่มต้นได้
Adding a Method to a Constructor
ฟังก์ชันตัวสร้างของคุณยังสามารถกำหนดวิธีการได้ดังนี้
คุณไม่สามารถเพิ่มวิธีการใหม่ให้กับตัวสร้างวัตถุได้ เช่นเดียวกับที่คุณเพิ่มวิธีการใหม่ไปยังวัตถุที่มีอยู่ การเพิ่มวิธีการลงในตัวสร้างวัตถุต้องทำภายในฟังก์ชันตัวสร้างเท่านั้น
ฟังก์ชั่น changeName () กำหนดค่าชื่อให้กับคุณสมบัตินามสกุลของบุคคล
JavaScript รู้ว่าคุณกำลังพูดถึงคนที่ "แทนที่" สิ่งนี้ด้วย myMother
Built-in JavaScript Constructors
JavaScript มีคอนสตรัคเตอร์ในตัวสำหรับวัตถุแบบดั้งเดิม
วัตถุ Math () ไม่ได้อยู่ในรายการ คณิตศาสตร์เป็นวัตถุระดับโลก ไม่สามารถใช้คำหลักใหม่กับคณิตศาสตร์ได้
Did You Know?
ตามที่คุณเห็นด้านบน JavaScript มีรุ่นของวัตถุของชนิดข้อมูลดั้งเดิม String, Number และ Boolean แต่ไม่มีเหตุผลที่จะสร้างวัตถุที่ซับซ้อน ค่าดั้งเดิมนั้นเร็วกว่ามาก
ALSO
ใช้ Object literals {} แทน Object ใหม่ ()
ใช้ตัวอักษรสตริง "" แทนสตริงใหม่ ()
ใช้ตัวอักษรตัวเลข 12345 แทน Number ใหม่ ()
ใช้บูลีนตัวอักษรจริง / เท็จแทนบูลีนใหม่ ()
ใช้ตัวอักษรอาร์เรย์ [] แทน Array ใหม่ ()
ใช้รูปแบบตัวอักษร / () / แทน RegExp ใหม่ ()
ใช้ฟังก์ชั่นการแสดงออก () {} แทนฟังก์ชั่นใหม่ ()
String Objects
โดยปกติแล้วสตริงจะถูกสร้างเป็นพื้นฐาน: var firstName = "John"
แต่สตริงยังสามารถสร้างเป็นวัตถุโดยใช้คำหลักใหม่: var firstName = new String ("John")
Number Objects
โดยปกติตัวเลขจะถูกสร้างขึ้นเป็นแบบดั้งเดิม: var x = 123
แต่ยังสามารถสร้างตัวเลขเป็นวัตถุโดยใช้คำหลักใหม่: var x = new Number (123)
Boolean Objects
โดยปกติแล้ว booleans ถูกสร้างขึ้นเป็น primitives: var x = false
แต่บูลีนยังสามารถสร้างเป็นวัตถุโดยใช้คำหลักใหม่: var x = new บูลีน (false)
JavaScript Object Prototypes
วัตถุ JavaScript ทั้งหมดสืบทอดคุณสมบัติและเมธอดจากต้นแบบ ในบทก่อนหน้าเราเรียนรู้วิธีใช้ตัวสร้างวัตถุ
นอกจากนี้เรายังได้เรียนรู้ว่าคุณไม่สามารถเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุที่มีอยู่
ในการเพิ่มคุณสมบัติใหม่ให้กับคอนสตรัคเตอร์คุณต้องเพิ่มมันเข้าไปในฟังก์ชันคอนสตรัคเตอร์
Prototype Inheritance
วัตถุ JavaScript ทั้งหมดสืบทอดคุณสมบัติและเมธอดจากต้นแบบ
วัตถุวันที่สืบทอดจาก Date.prototype
วัตถุ Array สืบทอดมาจาก Array.prototype
วัตถุบุคคลสืบทอดมาจาก Person.prototype
Object.prototype อยู่ด้านบนของเชนการสืบทอดต้นแบบ วัตถุวันที่วัตถุอาร์เรย์และวัตถุบุคคลสืบทอดมาจาก Object.prototype
Adding Properties and Methods to Objects
บางครั้งคุณต้องการเพิ่มคุณสมบัติใหม่ (หรือวิธีการ) ไปยังวัตถุที่มีอยู่ทั้งหมดของประเภทที่กำหนด หรือในบางครั้งคุณต้องการเพิ่มคุณสมบัติใหม่ (หรือวิธีการ) เพื่อสร้างวัตถุ
Using the prototype Property
คุณสมบัติต้นแบบ JavaScript ช่วยให้คุณเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุ
คุณสมบัติต้นแบบ JavaScript ยังช่วยให้คุณสามารถเพิ่มวิธีการใหม่ในการสร้างวัตถุ
ปรับเปลี่ยนต้นแบบของคุณเองเท่านั้น อย่าดัดแปลงต้นแบบของวัตถุ JavaScript มาตรฐาน
JavaScript ES5 Object Methods
ECMAScript 5 เพิ่มเมธอด Object ใหม่ให้กับ JavaScript จำนวนมาก
Changing a Property Value
ตัวอย่างนี้เปลี่ยนค่าคุณสมบัติ
Changing Meta Data
ES5 อนุญาตให้เปลี่ยนข้อมูลเมตาของคุณสมบัติต่อไปนี้
ES5 อนุญาตให้ผู้เปลี่ยนแปลงและผู้ตั้งค่าสามารถเปลี่ยนแปลงได้
ตัวอย่างนี้ทำให้ภาษาอ่านอย่างเดียว
ตัวอย่างนี้ทำให้ภาษาไม่สามารถนับได้
Listing All Properties
ตัวอย่างนี้แสดงรายการคุณสมบัติทั้งหมดของวัตถุ
Listing Enumerable Properties
ตัวอย่างนี้แสดงรายการคุณสมบัติที่นับได้ของวัตถุเท่านั้น
Adding a Property
ตัวอย่างนี้เพิ่มคุณสมบัติใหม่ให้กับวัตถุ
Adding Getters and Setters
นอกจากนี้ยังสามารถใช้วิธีการ Object.defineProperty () เพื่อเพิ่ม Getters และ Setters
A Counter Example
Class
คลาสเป็นส่วนหนึ่งของออปเจ็คโดยคลาสโดยเป็นตัวกำหนดออปเจ็คว่าจะมีข้อมูล หรือร่วมไปทั้งลักษณะอื่นๆว่ามีอะไรบ้าง ร่วมถึงเมธอนอะไรบ้าง โดยจะนำไปสร้างออปเจ็คเป็นลำดับต่อไป ส่วนการสร้างนั้นคลาส จะประกอบไปด้วยสองอย่างคือ ตัวแปร เมธอด ตัวแปรนั้นใช้เก็บข้อมูลต่างๆเกี่ยวกับออปเจ็ค และเมธอดเป็นการกำหนดฟังก์ชันการทำงานของออปเจ็ค
Object
ออปเจ็คคือตัวแปรชนิดหนึ่งที่ถูกสร้างมาจากคลาส มีหน้าที่อ้างถึงสมาชิกที่เป็นตัวแปรและเมธอด ซึ่งในภาษา PHP ต่างก็เป็นออปเจ็ค เช่น ตัวแปร อาเรย์ หรือฟังก์ชัน
Class & Object
เรียกได้ว่าจะขาดคลาสหรือออปเจ็คไปไม่ได้เพราะว่า คลาสเองนั้นก็เป็นกำหนดให้กับออปเจ็ดว่ามีข้อมูลอะไรบ้าง ลักษณะงานโครงสร้างทางด้านต่างๆของออปเจ็ด เพื่อที่เรานั้นจะนำข้อมูลเล่านี้ไปสู่กระบวนการของออปเจ็ดนั้นเอง ในส่วนของออปเจ็ดเองนั้นมีหน้าที่รับสารจากคลาสเพื่อที่จะมาทำงานต่อ
