ตัวสร้างจาวาสคริปต์

สารบัญ

ตัวอย่าง

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

หมายเหตุ

ถือเป็นแนวปฏิบัติที่ดีในการตั้งชื่อฟังก์ชันตัวสร้างด้วยอักษรตัวแรกตัวพิมพ์ใหญ่

เกี่ยวกับเรื่องนี้

ในฟังก์ชัน Constructor this ไม่มีค่า เป็นการทดแทนวัตถุใหม่ ค่าของ this จะกลายเป็นวัตถุใหม่เมื่อ มีการสร้างวัตถุใหม่

ดูสิ่งนี้ด้วย:

บทช่วยสอน JavaScript นี้

ประเภทวัตถุ (พิมพ์เขียว) (คลาส)

ตัวอย่างจากบทที่แล้วมีจำนวนจำกัด พวกเขาสร้างวัตถุเพียงชิ้นเดียวเท่านั้น

บางครั้งเราจำเป็นต้องมี "พิมพ์เขียว" สำหรับการสร้างออบเจ็กต์จำนวนมากที่เป็น "ประเภท" เดียวกัน

วิธีสร้าง "ประเภทวัตถุ" คือการใช้ ฟังก์ชันตัวสร้างวัตถุ

ในตัวอย่างข้างต้น function Person() เป็นฟังก์ชันตัวสร้างวัตถุ

วัตถุประเภทเดียวกันถูกสร้างขึ้นโดยการเรียกใช้ฟังก์ชัน Constructor ด้วยคีย์เวิร์ด new:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

สิ่งนี้คืออะไร?

ใน JavaScript คำหลัก นี้ อ้างถึง วัตถุ

ซึ่งวัตถุขึ้นอยู่กับวิธีการเรียกใช้ นี้ (ใช้หรือเรียก)

คำหลัก this อ้างอิงถึงออบเจ็กต์ที่แตกต่างกัน ขึ้นอยู่กับวิธีการใช้:

ในวิธีการวัตถุ นี่ หมายถึง วัตถุ
เพียงอย่างเดียว สิ่งนี้ หมายถึง วัตถุส่วนกลาง
ในฟังก์ชัน this หมายถึง global object
ในฟังก์ชัน ในโหมดเข้มงวด นี่ คือ unknown
ในเหตุการณ์ สิ่งนี้ หมายถึง องค์ประกอบ ที่ได้รับเหตุการณ์
วิธีการเช่น call(), apply() และ bind() สามารถอ้างอิง สิ่งนี้ ไปยัง วัตถุใดๆ

บันทึก

this ไม่ใช่ตัวแปร มันเป็นคำสำคัญ คุณไม่สามารถเปลี่ยนค่าของ this

ดูสิ่งนี้ด้วย:

บทช่วยสอน JavaScript นี้

การเพิ่มคุณสมบัติให้กับวัตถุ

การเพิ่มคุณสมบัติใหม่ให้กับออบเจ็กต์ที่มีอยู่นั้นเป็นเรื่องง่าย:

ตัวอย่าง

myFather.nationality = "English";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

คุณสมบัติจะถูกเพิ่มให้กับ myFather ไม่ใช่เพื่อแม่ของฉัน (ไม่ใช่วัตถุของบุคคลอื่น)

การเพิ่มวิธีการให้กับวัตถุ

การเพิ่มวิธีการใหม่ให้กับวัตถุที่มีอยู่เป็นเรื่องง่าย:

ตัวอย่าง

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

วิธีการนี้จะถูกเพิ่มเข้าไปใน myFather ไม่ใช่เพื่อแม่ของฉัน (ไม่ใช่วัตถุของบุคคลอื่น)

การเพิ่มคุณสมบัติให้กับตัวสร้าง

คุณไม่สามารถเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุแบบเดียวกับคุณได้ เพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่:

ตัวอย่าง

Person.nationality = "English";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// You can NOT add a new property to a constructor function
Person.nationality = "English";

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

หากต้องการเพิ่มคุณสมบัติใหม่ให้กับตัวสร้าง คุณต้องเพิ่มคุณสมบัตินั้นลงใน ฟังก์ชั่นคอนสตรัคเตอร์:

ตัวอย่าง

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

วิธีนี้คุณสมบัติของวัตถุสามารถมีค่าเริ่มต้นได้

การเพิ่มวิธีการให้กับ Constructor

ฟังก์ชัน Constructor ของคุณยังสามารถกำหนดวิธีการได้:

ตัวอย่าง

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

คุณไม่สามารถเพิ่มวิธีการใหม่ให้กับตัวสร้างวัตถุแบบเดียวกับที่คุณเพิ่ม วิธีการใหม่กับวัตถุที่มีอยู่

การเพิ่มวิธีการให้กับตัวสร้างวัตถุจะต้องดำเนินการภายใน ฟังก์ชั่นคอนสตรัคเตอร์:

ตัวอย่าง

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName;  
   
this.lastName = lastName;
   
this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
     
this.lastName = name;
  };
}

ฟังก์ชัน changeName() กำหนดค่าของชื่อให้กับบุคคล คุณสมบัตินามสกุล

ตอนนี้คุณสามารถลอง:

myMother.changeName("Doe");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(firstName,lastName,age,eyeColor) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

JavaScript รู้ว่าคุณเป็นใคร พูดถึงโดยการ "แทนที่" สิ่งนี้ ด้วย myMother

ตัวสร้าง JavaScript ในตัว

JavaScript มีคอนสตรัคเตอร์ในตัวสำหรับวัตถุดั้งเดิม:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

วัตถุ Math() ไม่อยู่ในรายการ คณิตศาสตร์ เป็นวัตถุระดับโลก ไม่สามารถใช้คีย์เวิร์ด ใหม่ ได้ คณิตศาสตร์.

เธอรู้รึเปล่า?

ดังที่คุณเห็นข้างต้น JavaScript มีเวอร์ชันอ็อบเจ็กต์ของเวอร์ชันดั้งเดิม ประเภทข้อมูล String, Number และ Boolean . แต่ไม่มีเหตุผลที่จะสร้างวัตถุที่ซับซ้อน ค่าดั้งเดิม เร็วกว่ามาก:

ใช้ตัวอักษรสตริง "" แทน new String()

ใช้ตัวอักษรตัวเลข 50 แทน new Number()

ใช้ตัวอักษรบูลีน true/false แทน new Boolean()

ใช้ตัวอักษรวัตถุ {} แทน new Object()

ใช้ตัวอักษรอาร์เรย์ [] แทน new Array()

ใช้รูปแบบตัวอักษร /()/ แทน new RegExp()

ใช้นิพจน์ฟังก์ชัน () {} แทน new Function()

ตัวอย่าง

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

วัตถุสตริง

โดยปกติแล้ว สตริงจะถูกสร้างขึ้นเป็นแบบพื้นฐาน: firstName="John"

แต่สตริงยังสามารถสร้างเป็นวัตถุได้โดยใช้คำหลัก ใหม่:
firstName=new String("John")

เรียนรู้ว่าเหตุใดจึงไม่ควรสร้างสตริงเป็นวัตถุในบทนี้ สตริง JS

วัตถุจำนวน

โดยปกติแล้ว ตัวเลขจะถูกสร้างขึ้นเป็นแบบพื้นฐาน: x=30

แต่ตัวเลขก็สามารถสร้างเป็นวัตถุได้โดยใช้คีย์เวิร์ด new:
<รหัส class="w3-codespan">x=ใหม่ หมายเลข(30)

เรียนรู้ว่าเหตุใดจึงไม่ควรสร้างตัวเลขเป็นวัตถุในบทนี้ เจเอสเบอร์

วัตถุบูลีน

โดยปกติ บูลีนจะถูกสร้างขึ้นเป็นแบบพื้นฐาน: x = เท็จ

แต่สามารถสร้างบูลีนเป็นอ็อบเจ็กต์ได้โดยใช้คีย์เวิร์ด ใหม่:
x=บูลีนใหม่ (เท็จ)

เรียนรู้ว่าเหตุใดจึงไม่ควรสร้างบูลีนเป็นวัตถุในบทนี้ เจเอส บูลีน