คำอธิบายโดยละเอียดเกี่ยวกับต้นแบบและเครือข่ายต้นแบบในจาวาสคริปต์

แต่ละวัตถุใน JavaScript มีต้นแบบในตัว คำอธิบายของคุณสมบัติต้นแบบของวัตถุใน JavaScript คือ: ส่งคืนการอ้างอิงไปยังต้นแบบประเภทวัตถุ หมายความว่าแอตทริบิวต์ต้นแบบมีการอ้างอิงไปยังวัตถุ JavaScript อื่นซึ่งทำหน้าที่เป็นพาเรนต์ของวัตถุปัจจุบัน

การคัดลอกรหัสมีดังนี้:

a.prototype = new b ();

การทำความเข้าใจต้นแบบไม่ควรสับสนกับการสืบทอด ต้นแบบของ A เป็นตัวอย่างของ B สามารถเข้าใจได้ว่าการโคลนวิธีการและคุณสมบัติทั้งหมดใน B. A สามารถใช้วิธีการและคุณสมบัติของ B สิ่งที่เน้นที่นี่คือการโคลนนิ่งมากกว่าการสืบทอด สิ่งนี้สามารถเกิดขึ้นได้: ต้นแบบของ A เป็นตัวอย่างของ B และต้นแบบของ B ก็เป็นตัวอย่างของ A.

ดูการวิเคราะห์ต่อไปนี้ต่อไป:

ตัวแปรส่วนตัวและฟังก์ชั่น

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

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

กล่องฟังก์ชัน () {

var color = "blue"; // ตัวแปรส่วนตัว

var fn = function () // ฟังก์ชั่นส่วนตัว

-

-

-

</script>

ด้วยวิธีนี้สีของตัวแปรและ FN ไม่สามารถเข้าถึงได้นอกกล่องวัตถุฟังก์ชั่นและกลายเป็นส่วนตัว:

การคัดลอกรหัสมีดังนี้:

var obj = กล่องใหม่ ();

การแจ้งเตือน (obj.color); // ป๊อปอัพที่ไม่ได้กำหนด

การแจ้งเตือน (obj.fn); // เหมือนกับข้างต้น

ตัวแปรและฟังก์ชั่นคงที่

เมื่อมีการกำหนดฟังก์ชั่นแอตทริบิวต์และฟังก์ชั่นที่เพิ่มเข้ามานั้นยังสามารถเข้าถึงได้ผ่านวัตถุเอง แต่ไม่สามารถเข้าถึงตัวอย่างของพวกเขาได้ ตัวแปรและฟังก์ชั่นดังกล่าวเรียกว่าตัวแปรคงที่และฟังก์ชั่นคงที่ตามลำดับ

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่น obj () {};

obj.num = 72; // ตัวแปรคงที่

obj.fn = function () // ฟังก์ชันคงที่

-

-

การแจ้งเตือน (obj.num); // 72

การแจ้งเตือน (typeof obj.fn) // ฟังก์ชัน

var t = ใหม่ obj ();

การแจ้งเตือน (t.name); // undefined

การแจ้งเตือน (typeof t.fn); // undefined

</script>

ตัวแปรและฟังก์ชั่นอินสแตนซ์

ในการเขียนโปรแกรมเชิงวัตถุนอกเหนือจากฟังก์ชั่นไลบรารีบางอย่างเรายังคงหวังที่จะกำหนดคุณสมบัติและวิธีการบางอย่างในเวลาเดียวกันเมื่อคำจำกัดความของวัตถุเพื่อให้สามารถเข้าถึงได้หลังจากการสร้างอินสแตนซ์และ JS สามารถทำได้

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

กล่องฟังก์ชัน () {

this.a = []; // ตัวแปรอินสแตนซ์

this.fn = function () {// เมธอดอินสแตนซ์

-

-

console.log (typeof box.a); // ไม่ได้กำหนด

console.log (typeof box.fn); // ไม่ได้กำหนด

var box = กล่องใหม่ ();

console.log (typeof box.a); //วัตถุ

console.log (typeof box.fn); //การทำงาน

</script>

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

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

กล่องฟังก์ชัน () {

this.a = []; // ตัวแปรอินสแตนซ์

this.fn = function () {// เมธอดอินสแตนซ์

-

-

var box1 = กล่องใหม่ ();

Box1.a.push (1);

box1.fn = {};

console.log (box1.a); // [1]

console.log (typeof box1.fn); //วัตถุ

var box2 = กล่องใหม่ ();

console.log (box2.a); -

console.log (typeof box2.fn); //การทำงาน

</script>

A และ FN ได้รับการแก้ไขใน Box1 แต่ไม่ใช่ใน Box2 เนื่องจากอาร์เรย์และฟังก์ชั่นเป็นวัตถุและเป็นประเภทอ้างอิงซึ่งหมายความว่าถึงแม้ว่าคุณสมบัติและวิธีการใน Box1 จะเหมือนกับใน Box2 แต่ก็ไม่ได้เป็นข้อมูลอ้างอิง แต่เป็นสำเนาของคุณสมบัติและวิธีการที่กำหนดโดยวัตถุกล่อง

สิ่งนี้ไม่มีปัญหากับคุณสมบัติ แต่เป็นปัญหาใหญ่สำหรับวิธีการเนื่องจากวิธีการทำหน้าที่เหมือนกัน แต่มีสองสำเนา หากวัตถุฟังก์ชั่นมีวิธีการนับพันและอินสแตนซ์แต่ละอินสแตนซ์ของมันจะต้องเก็บสำเนาของวิธีการนับพัน เห็นได้ชัดว่าไม่มีหลักวิทยาศาสตร์ ฉันจะทำอย่างไร? ต้นแบบเข้ามาเป็น

แนวคิดพื้นฐาน

แต่ละฟังก์ชั่นที่เราสร้างมีคุณสมบัติต้นแบบซึ่งเป็นตัวชี้ไปยังวัตถุและวัตถุประสงค์คือการมีคุณสมบัติและวิธีการที่สามารถแชร์ได้โดยทุกกรณีของประเภทเฉพาะ จากนั้นต้นแบบเป็นวัตถุต้นแบบของอินสแตนซ์วัตถุที่สร้างขึ้นโดยเรียกตัวสร้าง

ข้อดีของการใช้ต้นแบบคืออนุญาตให้อินสแตนซ์ของวัตถุแบ่งปันคุณสมบัติและวิธีการที่มีอยู่ นั่นคือแทนที่จะเพิ่มข้อมูลวัตถุนิยามลงในตัวสร้างคุณสามารถเพิ่มข้อมูลนี้ลงในต้นแบบได้โดยตรง ปัญหาหลักของการใช้ตัวสร้างคือแต่ละวิธีจะต้องสร้างหนึ่งครั้งในแต่ละอินสแตนซ์

ใน JavaScript มีค่าสองประเภทค่าดั้งเดิมและค่าวัตถุ แต่ละวัตถุมีต้นแบบคุณสมบัติภายในซึ่งเรามักจะเรียกต้นแบบ ค่าของต้นแบบอาจเป็นวัตถุหรือโมฆะ หากค่าของมันเป็นวัตถุวัตถุจะต้องมีต้นแบบของตัวเองด้วย นี่เป็นโซ่เชิงเส้นซึ่งเราเรียกว่าห่วงโซ่ต้นแบบ

ความหมาย

ฟังก์ชั่นสามารถใช้เป็นตัวสร้าง นอกจากนี้เฉพาะฟังก์ชั่นเท่านั้นที่มีแอตทริบิวต์ต้นแบบและสามารถเข้าถึงได้ แต่อินสแตนซ์ของวัตถุไม่มีแอตทริบิวต์นี้มีเพียงแอตทริบิวต์ __proto__ ที่ไม่สามารถเข้าถึงได้ภายใน __proto__ เป็นลิงค์ลึกลับในวัตถุไปยังต้นแบบที่เกี่ยวข้อง ตามมาตรฐาน __proto__ ไม่ได้เปิดเผยต่อสาธารณะซึ่งหมายความว่ามันเป็นทรัพย์สินส่วนตัว แต่เครื่องยนต์ของ Firefox เปิดเผยและกลายเป็นทรัพย์สินทั่วไปซึ่งเราสามารถเข้าถึงและตั้งค่าได้

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

var browser = function () {};

Browser.prototype.run = function () {

การแจ้งเตือน ("ฉันเป็นตุ๊กแกเคอร์เนลของFirefox");

-

var bro = ใหม่เบราว์เซอร์ ();

Bro.run ();

</script>

เมื่อเราเรียกวิธี Bro.run () เนื่องจากไม่มีวิธีการดังกล่าวใน Bro เขาจะค้นหาใน __proto__ ของเขานั่นคือเบราว์เซอร์. (ที่นี่ตัวอักษรตัวพิมพ์ใหญ่ของฟังก์ชั่นแสดงถึงตัวสร้างเพื่อแยกฟังก์ชั่นทั่วไป)

เมื่อเรียกตัวสร้างเพื่อสร้างอินสแตนซ์อินสแตนซ์จะมีตัวชี้ภายใน (__proto__) ชี้ไปที่ต้นแบบของตัวสร้าง การเชื่อมต่อนี้มีอยู่ระหว่างอินสแตนซ์และต้นแบบของตัวสร้างไม่ใช่ระหว่างอินสแตนซ์และตัวสร้าง

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่นบุคคล (ชื่อ) {// ฟังก์ชั่นคอนสตรัคเตอร์

this.name = ชื่อ;

-

person.prototype.printName = function () // วัตถุต้นแบบ

-

การแจ้งเตือน (this.name);

-

var person1 = บุคคลใหม่ ('byron'); // อินสแตนซ์วัตถุ

console.log (person1 .__ proto __); // บุคคล

console.log (person1.constructor); // ลองด้วยตัวเองเพื่อดูว่ามันจะเป็นอย่างไร

console.log (person.prototype); // ชี้ไปที่บุคคลวัตถุต้นแบบ

var person2 = คนใหม่ ('frank');

</script>

บุคคลอินสแตนซ์ของบุคคล 1 มีแอตทริบิวต์ชื่อและจะสร้างแอตทริบิวต์ __proto__ โดยอัตโนมัติซึ่งชี้ไปที่ต้นแบบของบุคคลและคุณสามารถเข้าถึงวิธีการพิมพ์ชื่อที่กำหนดไว้ในต้นแบบซึ่งอาจเป็นเช่นนี้:

แต่ละฟังก์ชัน JavaScript มีแอตทริบิวต์ต้นแบบซึ่งหมายถึงวัตถุซึ่งเป็นวัตถุต้นแบบ วัตถุต้นแบบว่างเปล่าเมื่อเริ่มต้น เราสามารถปรับแต่งคุณสมบัติและวิธีการใด ๆ ในนั้น วิธีการและคุณสมบัติเหล่านี้จะได้รับการสืบทอดโดยวัตถุที่สร้างขึ้นโดยตัวสร้าง

ดังนั้นตอนนี้ปัญหาคือ ความสัมพันธ์ระหว่างตัวสร้างอินสแตนซ์และวัตถุต้นแบบคืออะไร?

ความแตกต่างระหว่างตัวสร้างอินสแตนซ์และวัตถุต้นแบบ

อินสแตนซ์ถูกสร้างขึ้นผ่านตัวสร้าง เมื่อมีการสร้างอินสแตนซ์แล้วจะมีแอตทริบิวต์ตัวสร้าง (ชี้ไปที่ฟังก์ชันตัวสร้าง) และแอตทริบิวต์ __proto__ (ชี้ไปที่วัตถุต้นแบบ)

มีคุณสมบัติต้นแบบในตัวสร้างซึ่งเป็นตัวชี้ไปยังวัตถุต้นแบบ

นอกจากนี้ยังมีตัวชี้ (คุณสมบัติตัวสร้าง) ภายในวัตถุต้นแบบที่ชี้ไปที่ตัวสร้าง: person.prototype.constructor = บุคคล;

อินสแตนซ์สามารถเข้าถึงคุณสมบัติและวิธีการที่กำหนดไว้ในวัตถุต้นแบบ

ที่นี่ person1 และ person2 เป็นอินสแตนซ์และต้นแบบเป็นวัตถุต้นแบบของพวกเขา

เกาลัดอื่น:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่นสัตว์ (ชื่อ) // สะสมตัวสร้าง

-

this.name = name; // ตั้งค่าคุณสมบัติวัตถุ

-

Animal.prototype.behavior = function () // เพิ่มวิธีการพฤติกรรมลงในต้นแบบของตัวสร้างคลาสพื้นฐาน

-

การแจ้งเตือน ("นี่คือ"+this.name);

-

var dog = สัตว์ใหม่ ("dog"); // สร้างวัตถุสุนัข

var cat = สัตว์ใหม่ ("cat"); // สร้างวัตถุแมว

dog.behavior (); // เรียกวิธีการพฤติกรรมโดยตรงผ่านวัตถุสุนัข

cat.behavior (); // เอาท์พุท "นี่คือแมว"

การแจ้งเตือน (dog.behavior == cat.behavior); // output จริง;

</script>

จะเห็นได้จากโปรแกรมที่รันผลลัพธ์ที่วิธีการที่กำหนดไว้ในต้นแบบของตัวสร้างสามารถเรียกได้โดยตรงผ่านวัตถุและรหัสถูกแชร์ (คุณสามารถลองลบคุณสมบัติต้นแบบใน iment.prototype.behavior เพื่อดูว่ามันยังสามารถทำงานได้) ที่นี่คุณสมบัติของต้นแบบชี้ไปที่วัตถุสัตว์

อินสแตนซ์อาร์เรย์อาร์เรย์

ลองดูอินสแตนซ์ของวัตถุอาร์เรย์ เมื่อเราสร้างวัตถุ Array1 โมเดลวัตถุจริงของ Array1 ในเอ็นจิ้น JavaScript มีดังนี้:

การคัดลอกรหัสมีดังนี้:

var array1 = [1,2,3];

วัตถุ Array1 มีค่าแอตทริบิวต์ความยาว 3 แต่เราสามารถเพิ่มองค์ประกอบใน Array1 ด้วยวิธีการต่อไปนี้:

การคัดลอกรหัสมีดังนี้:

array1.push (4);

วิธีการผลักดันมาจากวิธีการที่ชี้ไปที่วัตถุโดยสมาชิก __proto__ ของ Array1 (array.prototye.push ()) มันเป็นเพราะวัตถุอาร์เรย์ทั้งหมด (สร้างผ่าน []) มีสมาชิก __proto__ ชี้ไปที่วัตถุวิธีการเดียวกันกับการกดย้อนกลับ ฯลฯ (array.prototype) ว่าวัตถุอาร์เรย์เหล่านี้สามารถใช้การกดย้อนกลับและวิธีอื่น ๆ

อินสแตนซ์วัตถุฟังก์ชัน

การคัดลอกรหัสมีดังนี้:

ฟังก์ชันฐาน () {

this.id = "ฐาน"

-

การคัดลอกรหัสมีดังนี้:

var obj = ฐานใหม่ ();

ผลลัพธ์ของรหัสดังกล่าวคืออะไร? โมเดลวัตถุที่เราเห็นในเอ็นจิ้น JavaScript คือ:

ผู้ให้บริการใหม่ทำอะไรกันแน่? ในความเป็นจริงมันง่ายมากเพิ่งทำสามสิ่ง

การคัดลอกรหัสมีดังนี้:

var obj = {};

obj .__ proto__ = base.prototype;

base.call (obj);

ห่วงโซ่ต้นแบบ

ห่วงโซ่ต้นแบบ: เมื่อคุณสมบัติหรือวิธีการถูกดึงมาจากวัตถุหากวัตถุนั้นไม่มีคุณสมบัติหรือวิธีการดังกล่าวมันจะค้นหาวัตถุต้นแบบที่คุณเชื่อมโยงกับ หากไม่มีต้นแบบมันจะค้นหารุ่นก่อนของต้นแบบที่เกี่ยวข้องกับต้นแบบ หากไม่มีอีกต่อไปให้ค้นหาวัตถุที่อ้างอิงโดย prototype.prototype ต่อไปเรื่อย ๆ จนกระทั่งต้นแบบ ....... ต้นแบบจะไม่ได้กำหนด (ต้นแบบของ Object ไม่ได้กำหนด) จึงก่อให้เกิด "ห่วงโซ่ต้นแบบ"

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชันรูปร่าง () {

this.name = "รูปร่าง";

this.toString = function () {

ส่งคืนสิ่งนี้ชื่อ;

-

-

ฟังก์ชั่น twoshape () {

this.name = "2 shape";

-

ฟังก์ชั่นสามเหลี่ยม (ด้านข้างความสูง) {

this.name = "สามเหลี่ยม";

นี่คือด้านข้าง = ด้านข้าง;

this.height = ความสูง;

this.getarea = function () {

ส่งคืนสิ่งนี้*this.height/2;

-

-

twoshape.prototype = new Shape ();

triangle.prototype = new twoshape ();

</script>

ที่นี่เอนทิตีใหม่ถูกสร้างขึ้นด้วยรูปร่างคอนสตรัคเตอร์ () จากนั้นมันจะถูกใช้เพื่อเขียนทับต้นแบบของวัตถุ

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชันรูปร่าง () {

this.name = "รูปร่าง";

this.toString = function () {

ส่งคืนสิ่งนี้ชื่อ;

-

-

ฟังก์ชั่น twoshape () {

this.name = "2 shape";

-

ฟังก์ชั่นสามเหลี่ยม (ด้านข้างความสูง) {

this.name = "สามเหลี่ยม";

นี่คือด้านข้าง = ด้านข้าง;

this.height = ความสูง;

this.getarea = function () {

ส่งคืนสิ่งนี้*this.height/2;

-

-

twoshape.prototype = new Shape ();

triangle.prototype = new twoshape ();

twoshape.prototype.constructor = twoshape;

Triangle.prototype.constructor = สามเหลี่ยม;

var my = สามเหลี่ยมใหม่ (5,10);

my.getarea ();

my.tostring (); // สามเหลี่ยม

my.constructor; // สามเหลี่ยม (ด้านข้าง, ความสูง)

</script>

มรดกต้นแบบ

การสืบทอดต้นแบบ: ในตอนท้ายของห่วงโซ่ต้นแบบมันเป็นวัตถุต้นแบบที่ชี้ไปที่แอตทริบิวต์ต้นแบบตัวสร้างวัตถุ วัตถุต้นแบบนี้เป็นบรรพบุรุษของวัตถุทั้งหมดและบรรพบุรุษนี้ใช้วิธีการที่วัตถุทั้งหมดเช่น ToString ควรมีอยู่โดยกำเนิด ตัวสร้างในตัวอื่น ๆ เช่นฟังก์ชั่นบูลีนสตริงวันที่และ regexp ได้รับการสืบทอดมาจากบรรพบุรุษนี้ แต่พวกเขาแต่ละคนกำหนดคุณลักษณะและวิธีการของพวกเขาเองเพื่อให้ลูกหลานของพวกเขาแสดงลักษณะของเผ่าของพวกเขา

ใน ECMASCRIPT วิธีการใช้การสืบทอดนั้นทำได้โดยการพึ่งพาห่วงโซ่ต้นแบบ

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

กล่องฟังก์ชัน () {// ฟังก์ชั่นที่สืบทอดมาเรียกว่า supertype (คลาสแม่, คลาสฐาน)

this.name = "Jack";

-

ฟังก์ชั่นต้นไม้ () {// ฟังก์ชั่นที่สืบทอดมาเรียกว่าชนิดย่อย (คลาสย่อย, คลาสที่ได้รับ)

this.age = 300;

-

// สืบทอดผ่านห่วงโซ่ต้นแบบกำหนดคุณลักษณะต้นแบบของชนิดย่อย

// ใหม่กล่อง () จะส่งข้อมูลในการสร้างกล่องและข้อมูลในต้นแบบไปยังต้นไม้

tree.prototype = new box (); // ต้นไม้สืบทอดกล่องและสร้างโซ่ผ่านต้นแบบ

tree var = ต้นไม้ใหม่ ();

Alert (tree.name); // popt jack

</script>

ปัญหาเกี่ยวกับห่วงโซ่ต้นแบบ: แม้ว่าห่วงโซ่ต้นแบบนั้นมีประสิทธิภาพมากและสามารถใช้ในการใช้งานการสืบทอด แต่ก็มีปัญหาบางอย่าง ปัญหาที่สำคัญที่สุดมาจากต้นแบบค่าที่มีประเภทอ้างอิง แอตทริบิวต์ต้นแบบที่มีประเภทอ้างอิงจะถูกแชร์โดยทุกกรณี นี่คือเหตุผลที่แอตทริบิวต์ถูกกำหนดไว้ในตัวสร้างไม่ใช่ในวัตถุต้นแบบ เมื่อการสืบทอดประสบความสำเร็จผ่านต้นแบบต้นแบบจะกลายเป็นตัวอย่างของประเภทอื่น ดังนั้นแอตทริบิวต์อินสแตนซ์ดั้งเดิมจึงกลายเป็นแอตทริบิวต์ต้นแบบ

เมื่อสร้างอินสแตนซ์ของชนิดย่อยการโต้แย้งจะไม่สามารถส่งผ่านไปยังตัวสร้าง Supertype ในความเป็นจริงมันควรจะกล่าวว่าไม่มีวิธีที่จะส่งผ่านพารามิเตอร์ไปยังตัวสร้าง Supertype โดยไม่ส่งผลกระทบต่ออินสแตนซ์ของวัตถุทั้งหมด นอกเหนือจากปัญหาที่เพิ่งกล่าวถึงเนื่องจากการรวมค่าประเภทอ้างอิงในต้นแบบมันเป็นเรื่องยากที่จะใช้โซ่ต้นแบบเพียงอย่างเดียวในทางปฏิบัติ

เกาลัดอื่น:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่นบุคคล (ชื่อ)

-

this.name = name; // ตั้งค่าคุณสมบัติวัตถุ

-

person.prototype.Company = "Microsoft"; // ตั้งค่าคุณสมบัติของต้นแบบ

person.prototype.sayhello = function () // วิธีการต้นแบบ

-

การแจ้งเตือน ("สวัสดีฉัน"+ this.name+ "ของ"+ this.company);

-

var billgates = บุคคลใหม่ ("billgates"); // สร้างวัตถุบุคคล

Billgates.sayhello (); // สืบทอดเนื้อหาของต้นแบบและผลลัพธ์ "สวัสดีฉันคือ Billgates of Microsoft"

var jobs = คนใหม่ ("งาน");

Jobs.Company = "Apple"; // ตั้งคุณลักษณะ บริษัท ของคุณเองเพื่อปกปิดแอตทริบิวต์ของ บริษัท ต้นแบบ

Jobs.sayhello = function ()

-

การแจ้งเตือน ("hi," + this.name + "ชอบ" + this.company);

-

Jobs.sayhello (); // คุณสมบัติและวิธีการที่คุณแทนที่ตัวเองส่งออก "สวัสดีงานเช่น Apple"

Billgates.sayhello (); // ความครอบคลุมของงานไม่ส่งผลกระทบต่อต้นแบบ

</script>

ดูตัวอย่างต่อไปนี้ของห่วงโซ่ต้นแบบ:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่นปี () {

this.value = 21;

-

year.prototype = {

วิธี: ฟังก์ชัน () {

-

-

ฟังก์ชั่นสวัสดี () {

-

// ตั้งค่าคุณสมบัติต้นแบบของ HI เป็นวัตถุอินสแตนซ์ของปี

hi.prototype = ปีใหม่ ();

hi.prototype.year = 'Hello World';

Hi.prototype.Constructor = HI;

var test = new hi (); // สร้างอินสแตนซ์ใหม่ของ HI

// ลูกโซ่ต้นแบบ

ทดสอบ [สวัสดีตัวอย่าง]

Hi.prototype [ตัวอย่างของปี]

{ปี: 'สวัสดีโลก'}

ปี

{วิธี:…};

Object.prototype

{ToString: ... };

</script>

จากตัวอย่างข้างต้นวัตถุทดสอบนั้นสืบทอดมาจาก hi.prototype และ year.prototype; ดังนั้นจึงสามารถเข้าถึงวิธีการต้นแบบของปีและในเวลาเดียวกันก็สามารถเข้าถึงค่าคุณสมบัติอินสแตนซ์

__ttoto__ แอตทริบิวต์

แอตทริบิวต์ __ptoto__ (ไม่รองรับโดยเบราว์เซอร์) เป็นตัวชี้ไปยังวัตถุต้นแบบของอินสแตนซ์ ฟังก์ชั่นของมันคือการชี้ไปที่ตัวสร้างแอตทริบิวต์ต้นแบบของตัวสร้าง ผ่านคุณลักษณะทั้งสองนี้คุณสามารถเข้าถึงคุณสมบัติและวิธีการในต้นแบบ

อินสแตนซ์ของวัตถุใน JavaScript นั้นประกอบด้วยชุดของคุณสมบัติ ในบรรดาคุณสมบัติเหล่านี้มีคุณสมบัติพิเศษที่มองไม่เห็นภายใน - __proto__ ค่าของคุณสมบัตินี้ชี้ไปที่ต้นแบบของอินสแตนซ์วัตถุ อินสแตนซ์ของวัตถุมีต้นแบบที่ไม่ซ้ำกันเท่านั้น

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

Box Function () {// uppercase ซึ่งเป็นตัวแทนของตัวสร้าง

box.prototype.name = "trigkit4"; // แอตทริบิวต์ต้นแบบ

box.prototype.age = "21";

box.prototype.run = function () // วิธีการต้นแบบ

-

ส่งคืนสิ่งนี้ name + this.age + 'การศึกษา';

-

-

var box1 = กล่องใหม่ ();

var box2 = กล่องใหม่ ();

การแจ้งเตือน (box1.constructor); // สร้างแอตทริบิวต์คุณสามารถรับตัวสร้างเองได้

// ฟังก์ชั่นจะถูกจัดตำแหน่งโดยตัวชี้ต้นแบบจากนั้นรับตัวสร้างเอง

</script>

ความแตกต่างระหว่างแอตทริบิวต์ __proto__ และแอตทริบิวต์ต้นแบบ

Prototype เป็นคุณสมบัติที่เป็นกรรมสิทธิ์ในวัตถุฟังก์ชัน

__proto__ เป็นคุณสมบัติโดยนัยของวัตถุปกติ เมื่อใหม่มันจะชี้ไปที่วัตถุที่ชี้ไปที่ต้นแบบ;

__ptoto__ เป็นคุณลักษณะของวัตถุเอนทิตีบางอย่างในขณะที่ต้นแบบเป็นแอตทริบิวต์ที่เป็นของตัวสร้าง __ptoto__ สามารถใช้ในการเรียนรู้หรือแก้ไขสภาพแวดล้อมเท่านั้น

กระบวนการดำเนินการโหมดต้นแบบ

1. ก่อนอื่นมองหาแอตทริบิวต์หรือวิธีการในอินสแตนซ์คอนสตรัคเตอร์และถ้าเป็นเช่นนั้นให้กลับมาทันที

2. หากไม่มีอินสแตนซ์ของตัวสร้างให้ไปที่วัตถุต้นแบบและกลับมาทันที

วัตถุต้นแบบ

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

Box Function () {// uppercase ซึ่งเป็นตัวแทนของตัวสร้าง

box.prototype.name = "trigkit4"; // แอตทริบิวต์ต้นแบบ

box.prototype.age = "21";

box.prototype.run = function () // วิธีการต้นแบบ

-

ส่งคืนสิ่งนี้ name + this.age + 'การศึกษา';

-

-

var box1 = กล่องใหม่ ();

การแจ้งเตือน (box1.name); // trigkit4 ค่าในต้นแบบ

Box1.Name = "Lee";

การแจ้งเตือน (box1.name); // lee, ไปที่หลักการ

var box2 = กล่องใหม่ ();

การแจ้งเตือน (box2.name); // trigkit4 ค่าของต้นแบบไม่ได้แก้ไขโดย Box1

</script>

ตัวสร้าง

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

กล่องฟังก์ชัน () {

this.name = "บิล";

-

box.prototype.name = "trigkit4"; // แอตทริบิวต์ต้นแบบ

box.prototype.age = "21";

box.prototype.run = function () // วิธีการต้นแบบ

-

ส่งคืนสิ่งนี้ name + this.age + 'การศึกษา';

-

var box1 = กล่องใหม่ ();

การแจ้งเตือน (box1.name); // bill ค่าในต้นแบบ

Box1.Name = "Lee";

การแจ้งเตือน (box1.name); // lee, ไปที่หลักการ

</script>

เพื่อสรุปให้เรียงลำดับ:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

ฟังก์ชั่นบุคคล () {};

person.prototype.name = "trigkit4";

person.prototype.say = function () {

การแจ้งเตือน ("hi");

-

var p1 = บุคคลใหม่ (); // ต้นแบบเป็นวัตถุต้นแบบของ P1 และ P2

var p2 = บุคคลใหม่ (); // p2 เป็นวัตถุอินสแตนซ์และมีแอตทริบิวต์ __proto__ อยู่ข้างในชี้ไปที่ต้นแบบของบุคคล

console.log (p1.prototype); // undefined คุณสมบัตินี้เป็นวัตถุและไม่สามารถเข้าถึงได้

console.log (person.prototype); // บุคคล

console.log (person.prototype.constructor); // นอกจากนี้ยังมีตัวชี้ (คุณสมบัติตัวสร้าง) ภายในวัตถุต้นแบบที่ชี้ไปที่ฟังก์ชันตัวสร้าง

console.log (p1 .__ proto __); // คุณสมบัตินี้เป็นตัวชี้ที่ชี้ไปที่วัตถุต้นแบบของต้นแบบ

p1.say (); // อินสแตนซ์สามารถเข้าถึงคุณสมบัติและวิธีการที่กำหนดไว้ในวัตถุต้นแบบ

</script>

รูปแบบโรงงาน

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น createObject (ชื่ออายุ) {

var obj = วัตถุใหม่ ();

obj.name = ชื่อ;

obj.age = อายุ;

คืน OBJ;

-

รูปแบบของโรงงานแก้ปัญหาของการทำซ้ำขนาดใหญ่ของวัตถุอินสแตนซ์ แต่มีปัญหาอีกอย่างหนึ่งนั่นคือมันเป็นไปไม่ได้ที่จะทราบว่าอินสแตนซ์ของวัตถุที่พวกเขาเป็น

การใช้วิธีตัวสร้างไม่เพียง แต่แก้ปัญหาของการสร้างอินสแตนซ์ซ้ำ ๆ แต่ยังแก้ปัญหาการจดจำวัตถุ

ความแตกต่างระหว่างการใช้วิธีการสร้างและรูปแบบโรงงานคือ:

1. สร้างวัตถุ (วัตถุใหม่ ()) ที่ไม่ได้แสดงโดยวิธีตัวสร้าง;

2. กำหนดแอตทริบิวต์และวิธีการโดยตรงให้กับวัตถุนี้

3. ไม่มีคำสั่งคืน

เมื่อใช้ตัวสร้างและใช้ตัวสร้างใหม่ () วัตถุใหม่ () จะถูกดำเนินการในพื้นหลัง

สิ่งนี้ในร่างกายฟังก์ชั่นแสดงถึงวัตถุที่ได้จากวัตถุใหม่ ()

1. ตรวจสอบว่าคุณสมบัติอยู่ในอินสแตนซ์คอนสตรัคเตอร์หรือในต้นแบบคุณสามารถใช้ฟังก์ชัน `hasownproperty ()`

2. วิธีการสร้างตัวอักษรใช้ในการสร้างแอตทริบิวต์ตัวสร้างจะไม่ชี้ไปที่อินสแตนซ์ แต่ไปยังวัตถุและวิธีการสร้างตัวสร้างเป็นสิ่งที่ตรงกันข้าม

ทำไมชี้ไปที่คัดค้าน? เพราะ box.prototype = {}; วิธีการเขียนนี้เป็นจริงเพื่อสร้างวัตถุใหม่

ทุกครั้งที่มีการสร้างฟังก์ชั่นต้นแบบของมันจะถูกสร้างขึ้นในเวลาเดียวกันและวัตถุนี้จะได้รับแอตทริบิวต์ตัวสร้างโดยอัตโนมัติ

3. หากเป็นวิธีการอินสแตนซ์อินสแตนซ์ที่แตกต่างกันวิธีการของพวกเขาจะแตกต่างกันและไม่ซ้ำกัน

4. ถ้าเป็นวิธีต้นแบบที่อยู่ของพวกเขาจะถูกแชร์