คีย์เวิร์ดใหม่

การเรียกฟังก์ชันด้วย 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