มาเรียงลำดับการห่อหุ้มและการสืบทอดในวัตถุ JS
1. บรรจุภัณฑ์
มีวิธีการใช้งานมากมายสำหรับการห่อหุ้มใน JS และนี่คือวิธีการที่ใช้กันทั่วไป
1.1 วัตถุการสร้างรูปแบบดั้งเดิม
เขียนสมาชิกของเราลงในวัตถุโดยตรงและส่งคืนพวกเขาด้วยฟังก์ชั่น ข้อเสีย: เป็นการยากที่จะเห็นว่ามันเป็นตัวอย่างของรูปแบบ
รหัส:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
กลับ {
ชื่อ: ชื่อ,
คะแนน: คะแนน
-
-
var stu1 = stu ("จางซาน", 80);
var stu2 = stu ("li si", 90);
console.log (stu1.name); // จางซาน
1.2 สร้างวัตถุรูปแบบที่สร้างขึ้น
JS ช่วยให้เราจัดทำรูปแบบสำหรับการสร้างวัตถุโดยใช้ตัวสร้าง "ตัวสร้าง" ที่เรียกว่าจริง ๆ แล้วเป็นฟังก์ชันธรรมดา แต่ตัวแปรนี้ใช้ภายใน เมื่อใช้คำหลักใหม่เพื่อสร้างอินสแตนซ์ของตัวสร้างตัวแปรนี้จะถูกผูกไว้กับวัตถุอินสแตนซ์
อัปโหลดรหัสโดยตรง:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
this.name = ชื่อ
this.score = คะแนน
-
var stu1 = ใหม่ stu ("จางซาน", 80);
var stu2 = ใหม่ stu ("li si", 90);
console.log (stu1.name + "/" + stu2.score); // Zhang San90
console.log ((stu1.constructor == stu) + "/" + (stu2.constructor == stu)); // จริงจริง
console.log ((stu1 instanceof stu) + "/" + (stu2 instanceof stu)); // จริงจริง
ไม่ยากที่จะเห็นว่าตัวสร้าง JS สร้างวัตถุและ C# ด้วยคลาสสร้างวัตถุ ทั้งสองใช้เทมเพลตเพื่อกำหนดสมาชิกวัตถุอินสแตนซ์ผ่านคำหลักใหม่
สร้างวัตถุ STU เดียวกันโดยใช้รหัส C#
การคัดลอกรหัสมีดังนี้:
ชั้นเรียน Stu
-
ชื่อสตริงสาธารณะ;
คะแนนสาธารณะสองเท่า;
-
ตกลงนี่คือวัตถุพื้นฐาน ดังนั้นตอนนี้เราต้องการวิธีการที่วัตถุทั้งหมดเป็นเรื่องธรรมดาและเรามีวิธีนี้ที่สร้างขึ้นเพียงครั้งเดียว (อย่าสร้างวัตถุใหม่ซ้ำ ๆ ) ฉันควรทำอย่างไร? ทุกคนรู้ว่าใน C# เราสามารถใช้สมาชิกคงที่ แล้วจะทำอย่างไรใน JS?
1.3 โหมดต้นแบบ
ใน JS ตัวสร้างแต่ละตัวมีแอตทริบิวต์ต้นแบบและคุณสมบัติและวิธีการทั้งหมดของวัตถุนี้จะได้รับการสืบทอดโดยอินสแตนซ์คอนสตรัคเตอร์ จากนั้นการเพิ่มสมาชิกลงในต้นแบบโดยตรงเทียบเท่ากับการประกาศสมาชิกคงที่ใน C#
รหัส:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
this.name = ชื่อ
this.score = คะแนน
-
stu.prototype.type = 'นักเรียน';
stu.prototype.log = function (s) {
console.log;
-
var stu1 = ใหม่ stu ("จางซาน", 80);
var stu2 = ใหม่ stu ("li si", 90);
console.log (stu1.type + "/" + stu2.type); // นักเรียน
stu1.log ('สวัสดี'); // สวัสดี
console.log (stu1.log == stu2.log); // จริง
นั่นคือทั้งหมดที่เกี่ยวกับการห่อหุ้ม ลองมาดูกันว่าการสืบทอดถูกนำไปใช้ใน JS อย่างไร
2. มรดก
2.1 การเชื่อมต่อคอนสตรัคเตอร์
การโทรหรือใช้วิธีการโดยตรงในฟังก์ชันเด็กเพื่อผูกตัวสร้างวัตถุของแม่กับวัตถุลูก
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
เกรด APPLY (นี่, อาร์กิวเมนต์);
//grade.call( นี่, ข้อโต้แย้ง);
this.name = ชื่อ
this.score = คะแนน
-
ฟังก์ชั่นเกรด () {
this.code = "โรงเรียนมัธยมต้น";
this.ask = function () {
console.log ("สวัสดีทุกคน");
-
-
var stu1 = ใหม่ stu ("จางซาน", 80);
var stu2 = ใหม่ stu ("li si", 90);
console.log (stu1.code); // โรงเรียนมัธยมต้น
stu1.ask (); // สวัสดีทุกคน
ใช้สองสิ่งที่นี่ใส่พารามิเตอร์แรกนี้ลงในตัวสร้างเกรด (ผู้โทร) จากนั้นเรียกใช้รหัสในเกรด มันเทียบเท่ากับการดำเนินการสมาชิกที่กำหนดไว้ในเกรดกับสิ่งนี้ใน Stu อีกครั้ง
2.2 มรดกผ่านต้นแบบ
ดูรหัสก่อน
รหัส:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
this.name = ชื่อ
this.score = คะแนน
-
ฟังก์ชั่นเกรด () {
this.code = "โรงเรียนมัธยมต้น";
-
stu.prototype = ใหม่เกรด ();
stu.prototype.constructor = stu; // ป้องกันความผิดปกติของโซ่มรดกและรีเซ็ตการประกาศด้วยตนเองด้วยตนเอง
var stu1 = ใหม่ stu ("จางซาน", 80);
var stu2 = ใหม่ stu ("li si", 90);
console.log (stu.prototype.constructor); // ตัวสร้างของตัวเอง
console.log (stu1.code); // โรงเรียนมัธยมต้น
ดังที่ได้กล่าวไว้ก่อนหน้านี้ต้นแบบเทียบเท่ากับสมาชิกคงที่ใน C#ดังนั้นเราจึงเปลี่ยนสมาชิกทุกคนในชั้นเรียนหลักให้เป็นสมาชิกคงที่ของตนเองเพื่อให้ได้มรดก
มีข้อเสียของการสืบทอดผ่านต้นแบบ: สมาชิกที่สืบทอดมาทั้งหมดเป็นแบบคงที่ดังนั้นจะสืบทอดสมาชิกวัตถุได้อย่างไร?
2.3 คัดลอกมรดก
คัดลอกคุณสมบัติและวิธีการทั้งหมดของวัตถุหลักลงในวัตถุลูกเพื่อตระหนักถึงการสืบทอด
รหัส:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น stu (ชื่อ, คะแนน) {
this.name = ชื่อ
this.score = คะแนน
-
ฟังก์ชั่นเกรด () {}
grade.prototype.code = "โรงเรียนมัธยมต้น";
-
// การห่อหุ้มฟังก์ชั่น
ฟังก์ชั่นขยาย (c, p) {
var p = p.prototype;
var c = c.prototype;
สำหรับ (var i ใน p) {
c [i] = p [i];
-
-
ขยาย (Stu, เกรด);
var stu1 = ใหม่ stu ("จางซาน", 80);
var stu2 = ใหม่ stu ("li si", 90);
stu1.code = 'โรงเรียนมัธยม';
console.log (stu1.code); // โรงเรียนมัธยม
console.log (stu2.code); // โรงเรียนมัธยมต้น
console.log (stu.prototype.constructor);
console.log (grade.prototype.constructor)
นี่คือสิ่งที่ฉันเขียนเกี่ยวกับองค์กรเชิงวัตถุ JS สิ่งนี้ไม่คงที่ เมื่อใช้งานให้ทำการเปลี่ยนแปลงตามความต้องการของคุณ มีคำพูดที่ดีมากสิ่งที่ถูกต้องดีที่สุด
นี่คือการวิเคราะห์เฉพาะสำหรับการห่อหุ้มและการสืบทอด เราจะทำบทความอื่น ๆ ในอนาคตเพื่อให้เพื่อนมีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการเขียนโปรแกรมเชิงวัตถุ JavaScript แน่นอนว่ามันเป็นความเข้าใจส่วนตัวทั้งหมด หากมีการละเว้นใด ๆ โปรดติดต่อฉัน