การเรียกฟังก์ชันด้วย new
จะสร้างออบเจ็กต์ใหม่โดยใช้ฟังก์ชันที่เรียกใช้เป็น
"เครื่องมือสร้าง" สำหรับออบเจ็กต์นั้น
function MyFunction() {}
const myObject = new MyFunction();
typeof myObject;
> "object"`
ซึ่งช่วยให้ "ฟังก์ชันคอนสตรัคเตอร์" ระบุเทมเพลตสำหรับการสร้างออบเจ็กต์ที่เป็นไปตามรูปแบบโครงสร้างเดียวกัน ดังนี้
function MyFunction() {
this.myProperty = true;
}
const myObject = new MyFunction();
myObject.myProperty;
> true
ค่าของ this
ภายในตัวสร้าง
จะอ้างอิงออบเจ็กต์ที่กำลังสร้าง ซึ่งทำให้มีการเติมข้อมูลออบเจ็กต์
พร้อมด้วยพร็อพเพอร์ตี้และเมธอดในตอนที่สร้าง วิธีนี้ทำให้สามารถ
การสร้างวัตถุที่มีค่าข้อมูลและวิธีการใดๆ ที่จำเป็นสำหรับการดำเนินการ
ข้อมูลนั้นมาเป็นอุปกรณ์พกพาหน่วยเดียว แนวคิดที่เรียกว่า "การห่อหุ้มข้อมูล":
function MyFunction( myArgument ) {
this.myValue = myArgument;
this.doubleMyValue = () => myArgument * 2;
}
const myObject = new MyFunction( 10 );
myObject.myValue;
> 10
myObject.doubleMyValue();
> 20
this
หมายถึงการดำเนินการปัจจุบัน
บริบทของฟังก์ชัน หมายความว่าฟังก์ชันตัวสร้างเป็นไปตาม
สำหรับค่า this
ในฐานะฟังก์ชันอื่นๆ เช่น ฟังก์ชัน
ที่เจตนาให้เป็นตัวสร้างใช้การเชื่อมโยงส่วนกลาง
สำหรับค่าของ this
เมื่อเรียกใช้แยกต่างหาก
function MyFunction() {
console.log( this );
}
const myObject = new MyFunction();
> MyFunction { }
MyFunction(); // Global `this` binding outside of strict mode is `globalThis`
> Window { … }
(function() {
"use strict";
function MyFunction() {
console.log( this );
}
MyFunction(); // Global `this` binding inside of strict mode is `undefined`
}());
> undefined
ธรรมเนียมปฏิบัติคือให้ใช้อักษรตัวแรกของตัวระบุของฟังก์ชันคอนสตรัคเตอร์เป็นตัวพิมพ์ใหญ่ตามรูปแบบการตั้งชื่อที่ฟังก์ชันแฟกทอรีในตัวของ JavaScript กำหนดไว้ แม้บางครั้งคุณอาจเห็นคำที่ใช้สลับกันไป
ฟังก์ชันตัวสร้าง—ฟังก์ชันที่มีจุดประสงค์เพื่อดำเนินการกับ
เมื่อเรียกใช้ด้วยคีย์เวิร์ด new
ซึ่งแตกต่างจาก "จากโรงงาน"
ฟังก์ชัน" ซึ่งชัดเจน return
ออบเจ็กต์เมื่อเรียกใช้ตามปกติ:
function myFunction( myArgument = false ) {
return { "myProperty" : myArgument };
}
const myObject = myFunction( true );
myObject;
> Object { myProperty: true }
แม้ว่าหลักการพื้นฐานจะเหมือนกัน แต่กรณีการใช้งานของฟังก์ชันคอนสตรัคเตอร์ที่กำหนดเองจะทำงานได้ดีขึ้นด้วยไวยากรณ์คลาสที่มีคุณสมบัติครบถ้วนกว่าซึ่งเปิดตัวใน ES6