ตัวอย่างการวิเคราะห์การใช้งานมรดกโซ่ต้นแบบ JavaScript

บทความนี้วิเคราะห์การใช้งานการสืบทอดโซ่ต้นแบบ JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:

คัดลอกรหัสดังนี้: function shape () {

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

this.toString = function () {

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

-

-

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

this.name = 'รูปร่าง 2d';

-

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

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

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

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

this.getarea = function () {

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

-

-

/ * มรดก *//

twodshape.prototype = new Shape ();

triangle.prototype = ใหม่ twodshape ();

เมื่อเราเขียนคุณสมบัติต้นแบบของวัตถุใหม่บางครั้งก็มีผลกระทบด้านลบต่อคุณสมบัติตัวสร้างของวัตถุ

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

การคัดลอกรหัสมีดังนี้: twodshape.prototype.constructor = twodshape;

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

เขียนใหม่:

คัดลอกรหัสดังนี้: function shape () {}

shape.prototype.name = 'shape';

shape.prototype.toString = function () {

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

-

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

twodshape.prototype = new Shape ();

twodshape.prototype.constructor = twodshape;

twodshape.prototype.name = 'shape 2d';

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

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

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

-

triangle.prototype = ใหม่ twodshape;

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

triangle.prototype.name = 'สามเหลี่ยม';

triangle.prototype.getarea = function () {

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

-

เขียนใหม่อีกครั้ง (ผ่านการอ้างอิงแทนค่าผ่าน):

คัดลอกรหัสดังนี้: function shape () {}

shape.prototype.name = 'shape';

shape.prototype.toString = function () {

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

-

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

twodshape.prototype = shape.prototype;

twodshape.prototype.constructor = twodshape;

twodshape.prototype.name = 'shape 2d';

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

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

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

-

triangle.prototype = twodshape.prototype;

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

triangle.prototype.name = 'สามเหลี่ยม';

triangle.prototype.getarea = function () {

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

-

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

วัตถุลูกและวัตถุหลักชี้ไปที่วัตถุเดียวกัน ดังนั้นเมื่อวัตถุเด็กเปลี่ยนต้นแบบวัตถุหลักจะถูกเปลี่ยนแปลงทันที

เขียนใหม่อีกครั้ง (ใช้ตัวสร้างชั่วคราว):

คัดลอกรหัสดังนี้: function shape () {}

shape.prototype.name = 'shape';

shape.prototype.toString = function () {

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

-

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

var f = function () {}

f.prototype = shape.prototype;

twodshape.prototype = new f ();

twodshape.prototype.constructor = twodshape;

twodshape.prototype.name = 'shape 2d';

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

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

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

-

f.prototype = twodshape.prototype;

triangle.prototype = new f ();

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

triangle.prototype.name = 'สามเหลี่ยม';

triangle.prototype.getarea = function () {

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

-

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

วัตถุลูกและวัตถุหลักชี้ไปที่วัตถุเดียวกัน ดังนั้นเมื่อวัตถุเด็กจัดเรียงต้นแบบและปรับเปลี่ยนมันวัตถุแม่จะถูกเปลี่ยนแปลงทันที

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน