จำลองความสัมพันธ์การสืบทอดของชั้นเรียนและคลาสใน JavaScript

ไวยากรณ์ Javascipt ไม่สนับสนุน "คลาส" (คลาส) [สนับสนุนโดย ES6] แต่มีวิธีการจำลองคลาส วันนี้ฉันจะพูดคุยเกี่ยวกับวิธีการจำลอง "ชั้นเรียน" เป็นหลักใน Javascipt และบทสรุปและการทบทวนมรดกใน JS

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

มาสรุปวิธีการหลายวิธีในการกำหนด“ คลาส” โดย JS:

วิธีที่ 1: วิธีการสร้าง

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

 ฟังก์ชั่นบุคคล (ชื่อ, อายุ, งาน) {this.name = name; this.age = อายุ; this.job = job;} person.prototype.sayname = function () {Alert (this.name);} var person1 = บุคคลใหม่ ("จางซาน", "29", "ผู้จัดการหน้าเว็บ"); var person2 = บุคคลใหม่ ("Li Si", "22", "Doctor"); // pop "Zhang San" console.log (person2.name) // output "li si"

วิธีที่ 2: Object.create () วิธีการ

method object.creat () เป็นทางเลือกแทนผู้ให้บริการใหม่จะถูกปล่อยออกมาหลังจาก ES5 เท่านั้น การใช้วิธีนี้ "คลาส" เป็นวัตถุไม่ใช่ฟังก์ชัน

 var mymammal = {ชื่อ: 'สมุนไพรสัตว์เลี้ยงลูกด้วยนม', get_name: function () {return this.name; }, พูดว่า: function () {return this.saying || - }} var mycat = object.create (mymammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function () {console.log (นี่คือ + ''

เอาท์พุท:

 function () {return this.saying || - } HenrietTafunction () {return this.saying || - -

ปัจจุบันเบราว์เซอร์เมเจอร์รุ่นล่าสุด (รวมถึง IE9) ได้ปรับใช้วิธีนี้ หากคุณพบเบราว์เซอร์เก่าคุณสามารถใช้รหัสต่อไปนี้เพื่อปรับใช้ด้วยตัวเอง

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; คืน F () ใหม่; - -

วิธีที่ 3: กฎหมายมินิมัลลิสต์

บรรจุุภัณฑ์

วิธีนี้ไม่ได้ใช้สิ่งนี้และต้นแบบและรหัสนั้นง่ายมากในการปรับใช้ ก่อนอื่นมันยังใช้วัตถุเพื่อจำลอง "คลาส" ในคลาสนี้กำหนด creatfn ตัวสร้าง () เพื่อสร้างอินสแตนซ์

 var dog = {creatfn: function () {// บางรหัสที่นี่}};

จากนั้นใน creatfn () กำหนดวัตถุอินสแตนซ์และใช้วัตถุอินสแตนซ์นี้เป็นค่าส่งคืน

 var dog = {creatfn: function () {var dog = {}; dog.name = "dog"; dog.makesound = function () { การแจ้งเตือน ("woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw Oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw Oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo

เมื่อใช้งานให้เรียกใช้เมธอด creatfn () เพื่อรับวัตถุอินสแตนซ์

 var dog1 = dog.creatfn (); dog1.makesound (); // woof

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

สืบทอด

มันสะดวกมากที่จะใช้คลาสหนึ่งคลาสในชั้นเรียนถัดไป เพียงเรียกใช้วิธี creatfn () ของหลังในวิธี creatfn () ก่อนกำหนดชั้นเรียนสัตว์

 var iment = {creatfn: function () {var iment = {}; Animal.eat = function () {แจ้งเตือน ("กินอาหาร"); - สัตว์กลับมา; -

จากนั้นในวิธี creatfn () ของ Dog วิธี creatfn () ของสัตว์เรียกว่า

 var dog = {creatfn: function () {var dog = iment.creatfn (); dog.name = "dog"; dog.makesound = function () {Alert ("Wangwoo"); - สุนัขกลับ; -

อินสแตนซ์ของสุนัขที่ได้รับในลักษณะนี้จะสืบทอดชั้นสุนัขและชั้นเรียนสัตว์ในเวลาเดียวกัน

 var dog1 = dog.creatfn (); dog1.eat (); // กินอาหาร

คุณสมบัติส่วนตัวและวิธีการส่วนตัว

ในวิธี creatfn () ตราบใดที่วิธีการและคุณสมบัติที่ไม่ได้กำหนดไว้ในวัตถุสุนัขเป็นส่วนตัว

 var dog = {creatfn: function () {var dog = {}; var sound = "woof woof"; dog.makesound = function () {alert (เสียง); - สุนัขกลับ; -

เสียงตัวแปรภายในในตัวอย่างข้างต้นไม่สามารถอ่านได้จากภายนอกและสามารถอ่านได้ผ่านวิธีการสาธารณะ () ของสุนัขเท่านั้น

 var dog1 = dog.creatfn (); การแจ้งเตือน (Dog1.sound); // ไม่ได้กำหนด

การแบ่งปันข้อมูล

บางครั้งเราต้องการวัตถุอินสแตนซ์ทั้งหมดเพื่อให้สามารถอ่านและเขียนข้อมูลภายในเดียวกัน ในเวลานี้เพียงแค่ห่อหุ้มข้อมูลภายในนี้ภายในวัตถุคลาสและนอกวิธี creatfn ()

 var dog = {sound: "wowangwoo", creatfn: function () {var dog = {}; dog.makesound = function () {alert (dog.sound); - dog.changesound = function (x) {dog.sound = x; - สุนัขกลับ; -

จากนั้นมีการสร้างวัตถุอินสแตนซ์สองรายการ:

 var dog1 = dog.creatfn (); var dog2 = dog.creatfn (); dog1.makesound (); // woof

ในเวลานี้หากมีวัตถุอินสแตนซ์และข้อมูลที่แชร์ได้รับการแก้ไขวัตถุอินสแตนซ์อื่นจะได้รับผลกระทบเช่นกัน

 Dog2. Changesound ("Wuwuwu"); dog1.makesound (); // wuwuwuwu

JS มรดก

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

วิธีการสืบทอดที่ใช้กันมากที่สุดสองวิธีมีดังนี้:

• การสืบทอดโซ่ต้นแบบ (การสืบทอดระหว่างวัตถุ)
• มรดกแบบคลาสสิก (การสืบทอดระหว่างตัวสร้าง)

มรดกลูกโซ่ต้นแบบ

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

ตัวอย่างเช่น:

 ฟังก์ชั่น parent () {this.name = 'mike';} function child () {this.age = 12;} child.prototype = parent ใหม่ (); // เด็กสืบทอดพาเรนต์และรูปแบบโซ่ผ่านการทดสอบต้นแบบ var = เด็กใหม่ สร้าง this.weight = 60;} brother.prototype = เด็กใหม่ (); // ดำเนินการต่อห่วงโซ่ต้นแบบสืบทอด var brother = พี่ชายใหม่ (); แจ้งเตือน (พี่ชาย. name); // มรดกพ่อแม่และลูก, mikealert (พี่ชาย

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

มรดกแบบคลาสสิก (ตัวสร้างยืม)

โดยทั่วไปการสืบทอดแบบคลาสสิกใช้การโทรหรือนำไปใช้เพื่อเรียกตัวสร้าง Supertype ภายใน ตัวอย่างเช่น:

 ฟังก์ชั่นพาเรนต์ (อายุ) {this.name = ['mike', 'jack', 'smith']; this.age = age;} function child (อายุ) {parent.call (นี้, อายุ);} var test = เด็กใหม่ (21); แจ้งเตือน (test.age); // 21Alert (test.name); // Mike, Jack, Smithtest.name.push ('บิล');

การสืบทอดสองประการข้างต้นเป็นวิธีการสืบทอดสองวิธีพื้นฐานที่สุด

นอกจากนี้ยังมีวิธีการสืบทอดบางอย่างมาดูกันเถอะ!

มรดกแบบผสมผสาน

การสืบทอดการรวมกันมักจะเป็นวิธีการสืบทอดที่ใช้ในการรวมกันของวิธีการสืบทอดสองวิธีข้างต้น

เป็นตัวอย่าง:

 ฟังก์ชั่นพาเรนต์ (อายุ) {this.name = ['mike', 'jack', 'smith']; this.age = อายุ;} parent.prototype.run = function () {return this.name + 'เป็นทั้ง' + this.age;}; ฟังก์ชั่นเด็ก (อายุ) {parent.call (นี่, อายุ); // การเลียนแบบวัตถุ ถึงการแจ้งเตือน (test.run ()); // Mike, Jack, Smith เป็นทั้ง 21

มรดกต้นแบบ

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

 ฟังก์ชั่น obj (o) {function f () {} f.prototype = o; คืน F () ใหม่; -

ฟังก์ชั่นนี้ใช้วิธีที่เราสร้างคลาสใน Object.create ()!

ดังนั้นต่อไปนี้คือ:

 ฟังก์ชั่น obj (o) {function f () {} f.prototype = o; คืน F () ใหม่; } var box = {ชื่อ: 'trigkit4', arr: ['พี่ชาย', 'น้องสาว', 'baba']}; var b1 = obj (กล่อง); แจ้งเตือน (b1.name); // trigkit4b1.name = 'Mike'; Alert (b1.name); // mikealert (b1.arr); // พี่ชาย, น้องสาว, babab1.arr.push ('พ่อแม่'); แจ้งเตือน (b1.arr); // พี่สาว, พี่สาว, Baba, Parentvar b2 = obj (กล่อง);

มรดกปรสิต

เป็นตัวอย่าง:

 ฟังก์ชั่น creatanother (ต้นฉบับ) {var clone = วัตถุใหม่ (ต้นฉบับ); clone.sayhi = function () {alert ("hi")}; return clone;} var person = {ชื่อ: "haorooms", เพื่อน: ["hao123", "zhansan", "lisi"]} var otherperson = creatanother (บุคคล); Antherperson.sayhi (); // สวัสดี

การรวมกันของกาฝาก

 ฟังก์ชั่นสืบต่อมรดก (ชนิดย่อย, supertype) {var prototype = object.creat (supertype.prototype); Prototype.Constructor = ชนิดย่อย; subtype.prototype = prototype;}; ฟังก์ชั่น superType (ชื่อ) {this.name = name; this.colors = ['red', 'blue', 'green'];} supertype.prototype.sayname = function () {console.log (this.name);} ฟังก์ชั่นย่อย (ชื่อ, อายุ) {//inheritprototype.call(this this.age = age;} // ermeritPrototype (subtype, superType); subtype.prototype.sayage = function () {console.log (this.age);} var อินสแตนซ์ = ใหม่ชนิดย่อย ();

การสืบทอดคลาสเป็นวิธีการข้างต้น มาพูดคุยสั้น ๆ เกี่ยวกับชั้นเรียนของ ES6!

คลาสการใช้งาน ES6

 // กำหนดจุดคลาสคลาส {constructor (x, y) {this.x = x; this.y = y; } toString () {return '('+this.x+','+this.y+')'; }} var point = จุดใหม่ (2, 3); point.toString () // (2, 3) point.hasownproperty ('x') // truepoint.hasownproperty ('y') // truepoint.hasownproperty ('tostring')

มรดกของชั้นเรียน

 Class ColorPoint ขยายจุด {constructor (x, y, สี) {super (x, y); // เรียกตัวสร้าง (x, y) ของคลาสแม่ this.color = color; } toString () {return this.color + '' + super.toString (); // เรียก toString () ของคลาสแม่}}