ต้นแบบจาวาสคริปต์

สารบัญ

ออบเจ็กต์ JavaScript ทั้งหมดสืบทอดคุณสมบัติและวิธีการ จากต้นแบบ

ในบทที่แล้ว เราได้เรียนรู้วิธีใช้ ตัวสร้างวัตถุ:

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>Using an object constructor:</p>

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

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

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

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

</body>
</html>

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

ตัวอย่าง

Person.nationality = "English";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

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

Person.nationality = "English";

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

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>

<h1>JavaScript Objects</h1>

<p>Using an object constructor:</p>

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

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

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

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

</body>
</html>

มรดกต้นแบบ

ออบเจ็กต์ JavaScript ทั้งหมดสืบทอดคุณสมบัติและวิธีการจากต้นแบบ:

วันที่ วัตถุสืบทอดมาจาก Date.prototype
Array อ็อบเจ็กต์สืบทอดมาจาก Array.prototype
Person วัตถุสืบทอดมาจาก Person.prototype

Object.prototype อยู่ที่ด้านบนของสายการสืบทอดต้นแบบ:

วัตถุ วันที่ วัตถุ Array และวัตถุ บุคคล วัตถุสืบทอดมาจาก Object.prototype

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

บางครั้งคุณต้องการเพิ่มคุณสมบัติใหม่ (หรือวิธีการ) ให้กับออบเจ็กต์ที่มีอยู่ทั้งหมดในประเภทที่กำหนด

บางครั้งคุณต้องการเพิ่มคุณสมบัติใหม่ (หรือวิธีการ) ให้กับวัตถุ ตัวสร้าง

การใช้คุณสมบัติ ต้นแบบ

คุณสมบัติ prototype ของ JavaScript ช่วยให้คุณสามารถเพิ่มคุณสมบัติใหม่ให้กับออบเจ็กต์ได้ ตัวสร้าง:

ตัวอย่าง

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

 Person.prototype.nationality = "English";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>The prototype property allows you to add new methods to objects constructors:</p>

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

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

Person.prototype.nationality = "English";

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

คุณสมบัติ prototype ของ JavaScript ยังช่วยให้คุณสามารถเพิ่มวิธีการใหม่ให้กับวัตถุได้ ตัวสร้าง:

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

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

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

แก้ไขเฉพาะต้นแบบของตัวเองของคุณเท่านั้น ห้ามดัดแปลงต้นแบบของ วัตถุ JavaScript มาตรฐาน