แต่ละวัตถุใน 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. ถ้าเป็นวิธีต้นแบบที่อยู่ของพวกเขาจะถูกแชร์