DEV Community

Cover image for JavaScript EP5: Prototypal Inheritance๐Ÿคฐ๐Ÿป๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ
phatsss
phatsss

Posted on

JavaScript EP5: Prototypal Inheritance๐Ÿคฐ๐Ÿป๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ

เบ•เบญเบ™เบ—เบตเปˆเป€เบฎเบปเบฒเบ‚เบฝเบ™ JavaScript เป€เบŠเบทเปˆเบญเบงเปˆเบฒเบ—เบธเบเบ„เบปเบ™เบเปเปˆเบฅเป‰เบงเบ™เปเบฅเป‰เบงเปเบ•เปˆเป€เบ„เบตเบเปƒเบŠเป‰เบšเบฑเบ™เบ”เบฒ built-in methods เบเบฑเบ™เบ—เบฑเบ‡เบ™เบฑเป‰เบ™เป€เบŠเบฑเปˆเบ™: .length, .split(), .join(), etc. เบšเปเปˆเบงเปˆเบฒเบˆเบฐเป€เบ›เบฑเบ™เบเบฒเบ™เปƒเบŠเป‰เป€เบžเบทเปˆเบญเบˆเบธเบ”เบ›เบฐเบชเบปเบ‡เปƒเบ”เป† เบซเบผเบท เปƒเบŠเป‰เบเบฑเบšเบ›เบฐเป€เบžเบ”เบ‚เปเป‰เบกเบนเบ™เปƒเบ”เป†เบเปเปˆเบ•เบฒเบกเป€เบŠเบฑเปˆเบ™: string,array, object. เปเบ•เปˆเบซเบผเบฒเบเป†เบ„เบปเบ™เบเปเปˆเบญเบฒเบ”เบˆเบฐเบšเปเปˆเบชเบปเบ‡เป„เบชเป€เบฅเบตเบเบงเปˆเบฒเบšเบฑเบ™เบ”เบฒ methods เป€เบซเบผเบปเปˆเบฒเบ™เบฑเป‰เบ™เบกเบฑเบ™เบกเบฒเบˆเบฒเบเป„เบช? เบขเปˆเบฒเบšเบญเบเปƒเบ”เบงเปˆเบฒเบกเบฑเบ™เบ„เบทเป€เบงเบ”เบกเบปเบ™ ๐Ÿช„๐Ÿคฃ. เบญเบฑเบ™เบ—เบตเปˆเบˆเบดเบ‡เบ–เป‰เบฒเบˆเบฐเปƒเบซเป‰เบ•เบญเบšเบ„เบณเบ–เบฒเบกเบ”เป‰เบฒเบ™เป€เบ—เบดเบ‡เปเบšเบšเบชเบฑเป‰เบ™เป†เป€เบฅเบตเบ เบ„เบณเบ•เบญเบšเบเปเปˆเบˆเบฐเป„เบ”เป‰เบ›เบฐเบกเบฒเบ™เบงเปˆเบฒ: เบเป‰เบญเบ™เบญเบตเปˆเบซเบเบฑเบ‡เบšเบฒเบ‡เบขเปˆเบฒเบ‡เบ—เบตเปˆเป€เบญเบตเป‰เบ™เบงเปˆเบฒ prototypal inheritance. เปเบ•เปˆเป€เบŠเบทเปˆเบญเบšเปเปˆเบงเปˆเบฒเปƒเบ™เบ•เบญเบ™เบ—เบตเปˆเบ‚เบฝเบ™ code เป€เบฎเบปเบฒเปƒเบŠเป‰เบกเบฑเบ™เบซเบผเบฒเบเบเบงเปˆเบฒเบ—เบตเปˆเบ„เบดเบ”เบญเบตเบ, เบชเบฐเบ™เบฑเป‰เบ™เป€เบฎเบปเบฒเบกเบฒเบชเบถเบเบชเบฒเปƒเบซเป‰เป€เบ‚เบปเป‰เบฒเปƒเบˆเบเปˆเบฝเบงเบเบฑเบš prototypal inheritance เปƒเบซเป‰เบซเบผเบฒเบเบ‚เบถเป‰เบ™เบ™เบณเบเบฑเบ™.

เบชเบปเบกเบกเบธเบ”เบงเปˆเบฒเป€เบฎเบปเบฒเบกเบตเป€เบงเบฑเบšเบ—เบตเปˆเปƒเบซเป‰เบ„เบปเบ™เบ—เบปเปˆเบงเป„เบ›เบชเบฒเบกเบฒเบ”เป€เบ‚เบปเป‰เบฒเป„เบ›เป€เบšเบดเปˆเบ‡เบ‚เปเป‰เบกเบนเบ™เบ‚เบญเบ‡เปเบฒเป„เบ”เป‰, เป€เบฎเบปเบฒเบกเบฑเบเบˆเบฐเบ•เป‰เบญเบ‡เป„เบ”เป‰เบชเป‰เบฒเบ‡ object เบซเบผเบฒเบเป†เบญเบฑเบ™เบ—เบตเปˆเป€เบ›เบฑเบ™ type เบ”เบฝเบงเบเบฑเบ™.

เบชเบณเบฅเบฑเบšเบ‚เปเป‰เบกเบนเบ™เบ‚เบญเบ‡เปเบฒ, เป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบเบฒเบ™ object เบ—เบตเปˆเป€เบ›เบฑเบ™เบ•เบปเบงเปเบ—เบ™เบ‚เบญเบ‡เบ‚เปเป‰เบกเบนเบ™เปเบฒเป‚เบ•เบ™เบฑเป‰เบ™. เปเบ—เบ™เบ—เบตเปˆเป€เบฎเบปเบฒเบˆเบฐเบ‚เบฝเบ™ object เปƒเปเปˆเบ—เบธเบเป†เบ„เบฑเป‰เบ‡ เปƒเบ™เบ—เบตเปˆเบ™เบตเป‰เป€เบฎเบปเบฒเบˆเบฐเปƒเบŠเป‰ constructor function(เบฎเบนเป‰เปเบซเบผเบฐเบงเปˆเบฒเบžเบฒเบเบฑเบ™เบ„เบดเบ”เบซเบเบฑเบ‡เบขเบนเปˆ, เป€เบฅเบทเปˆเบญเบ‡เบ‚เบญเบ‡ class เบ”เบฝเบงเป€เบฎเบปเบฒเบˆเบฐเบกเบฒเป€เบงเบปเป‰เบฒเบเบฑเบ™เบญเบตเบเบ•เบทเปˆเบกเบžเบฒเบเบซเบผเบฑเบ‡)เป€เบŠเบดเปˆเบ‡เป€เบฎเบปเบฒเบเปเปˆเบชเบฒเบกเบฒเบ”เบชเป‰เบฒเบ‡ instance เบ‚เบญเบ‡ Dog เป„เบ”เป‰เบ”เป‰เบงเบ keyword เปƒเปเปˆเป„เบ”เป‰เป€เบŠเบฑเปˆเบ™เบเบฑเบ™.

เปเบฒเบ—เบธเบเป†เป‚เบ•เบ‚เบญเบ‡เป€เบฎเบปเบฒเบˆเบฐเบกเบตเบ‚เปเป‰เบกเบนเบ™เบ”เบฑเปˆเบ‡เบ™เบตเป‰: name, breed, color เปเบฅเบฐ function เบ—เบตเปˆเบšเบญเบเบงเปˆเบฒเปเบฒเป€เบซเบปเปˆเบฒเบซเบผเบทเบšเปเปˆเบ„เบท bark๐Ÿ•.

dog object

เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒเบชเป‰เบฒเบ‡ Dog constructor function เบชเบณเป€เบฅเบฑเบ”, เบกเบฑเบ™เบšเปเปˆเปเบกเปˆเบ™ object เบ”เบฝเบงเบ—เบตเปˆเป€เบฎเบปเบฒเบˆเบฐเบชเป‰เบฒเบ‡, เบกเบฑเบ™เบเบฑเบ‡เบกเบต object เบญเบทเปˆเบ™เบ—เบตเปˆเบ–เบทเบเบชเป‰เบฒเบ‡เป‚เบ”เบเบญเบฑเบ”เบ•เบฐเป‚เบ™เบกเบฑเบ”เบ„เบท: prototype. เป‚เบ”เบ default เปเบฅเป‰เบง object เบ™เบตเป‰เบšเบฑเบ™เบˆเบธ constructor property เบ—เบตเปˆเบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ original constructor function, เป€เบŠเบดเปˆเบ‡เปƒเบ™เบเปเบฅเบฐเบ™เบตเบ™เบตเป‰เปเบกเปˆเบ™ Dog.
constructor function

prototype property เปƒเบ™ Dog constructor function เป€เบ›เบฑเบ™ non-enumerable(เบ™เบฑเบšเบšเปเปˆเป„เบ”เป‰) เปเบฒเบเบ„เบงเบฒเบกเบงเปˆเบฒเบกเบฑเบ™เบˆเบฐเบšเปเปˆเบชเบฐเปเบ”เบ‡เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒ access เป€เบ‚เบปเป‰เบฒ objects properties, เปเบ•เปˆเบกเบฑเบ™เบเบฑเบ‡เบกเบตเบขเบนเปˆ.

เปเบฅเป‰เบงเป€เบ›เบฑเบ™เบซเบเบฑเบ‡เป€เบฎเบปเบฒเบˆเบถเปˆเบ‡เบกเบต property object?, เบเปˆเบญเบ™เบญเบทเปˆเบ™เป€เบฎเบปเบฒเบกเบฒเบชเป‰เบฒเบ‡ dogs เบˆเบฑเบเป‚เบ•เบชเบญเบ‡เป‚เบ•เบ—เบตเปˆเป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบเบฒเบ™เบชเบฐเปเบ”เบ‡. เป€เบžเบทเปˆเบญเปƒเบซเป‰เป€เบ‚เบปเป‰เบฒเปƒเบˆเบ‡เปˆเบฒเบ, เป€เบฎเบปเบฒเบˆเบฐเบชเป‰เบฒเบ‡ dog1 เปเบฅเบฐ dog2 เป€เบŠเบดเปˆเบ‡ dog1 เบกเบตเบŠเบทเปˆเบงเปˆเบฒ Daisy เป€เบ›เบฑเบ™เบžเบฑเบ™เบฅเบฒเบšเบฒเบ”เป เบชเบตเบ”เบณเบชเบธเบ”เปœเป‰เบฒเบฎเบฑเบ เปเบฅเบฐ dog2 เบŠเบทเปˆเบงเปˆเบฒ Jack เป€เบ›เบฑเบ™เบžเบฑเบ™ เปเบˆเบฑเบเบฃเบฑเบ”เป€เบŠเบง เบชเบตเบ‚เบฒเบงเบ—เบตเปˆเบเป‰เบฒเบซเบฒเบ™เบžเป‰เบญเบกเบšเบงเบเบเบฑเบšเบ—เบธเบเบขเปˆเบฒเบ‡.
Dog Object

เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒเบฅเบญเบ‡ log เป€เบšเบดเปˆเบ‡ dog1 เบœเปˆเบฒเบ™ console เปเบฅเบฐ expand properties เบ‚เบญเบ‡เบกเบฑเบ™เบญเบญเบเบกเบฒเป€เบšเบดเปˆเบ‡เบˆเบฐเป„เบ”เป‰เบ”เบฑเปˆเบ‡เบ™เบตเป‰:
dog1

เป€เบฎเบปเบฒเบˆเบฐเป€เบซเบฑเบ™ properties เบ—เบตเปˆเป€เบฎเบปเบฒเป„เบ”เป‰เป€เบžเบตเปˆเบกเป€เบ‚เบปเป‰เบฒเป€เบŠเบฑเปˆเบ™: name, breed, color เปเบฅเบฐ bark. เปเบ•เปˆเป†เป†เป† เป€เบซเบฑเบ™เบซเบเบฑเบ‡เบšเปเปˆ? เป„เบญเป‰ property __proto__ เบ„เบทเปเบšเป‰เบญเบตเปˆเบซเบเบฑเบ‡เบญเบตเบเบฅเปˆเบฐเบšเบฒเบ”เบ™เบด?๐Ÿคฏ เบกเบฑเบ™ non-enumerable(เบ™เบฑเบšเบšเปเปˆเป„เบ”เป‰), เป€เบŠเบดเปˆเบ‡เบกเบฑเบ™เบเปเปˆเปเบฒเบเบ„เบงเบฒเบกเบงเปˆเบฒเป‚เบ”เบเบ›เบปเบเบเบฐเบ•เบดเบกเบฑเบ™เบˆเบฐเบšเปเปˆเบชเบฐเปเบ”เบ‡เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒ get properties เปƒเบ™ object, เบ”เบฝเบงเป€เบฎเบปเบฒเบกเบฒเบ‚เบฐเบซเบเบฒเบเบ„เบงเบฒเบกเบˆเบธเบ”เบ™เบตเป‰เบ™เบณเบเบฑเบ™.
__proto__

เบฑเบกเบฑเบ™เบ„เป‰เบฒเบเบ„เบทเบเบฑเบš Dog.prototype object เป€เบฅเบตเบ, เปเบ•เปˆเป€เบฎเบปเบฒเบฅเบญเบ‡เป€เบ”เบปเบฒเป€เบšเบดเปˆเบ‡เบงเปˆเบฒ __proto__ เปเบกเปˆเบ™เป€เบ›เบฑเบ™เบเบฒเบ™เบญเป‰เบฒเบ‡เบญเบตเบ‡ Dog.prototype object๐Ÿค”. เปเบ•เปˆเป€เบŠเบทเปˆเบญเบšเปเปˆเบงเปˆเบฒเบ™เบตเป‰เปเบกเปˆเบ™ prototypal inheritance - เปเบ•เปˆเบฅเบฐ instance เบ‚เบญเบ‡ constructor เบชเบฒเบกเบฒเบ”เป€เบ‚เบปเป‰เบฒเป€เบ–เบดเบ‡ prototype เบ‚เบญเบ‡ constructor เป„เบ”เป‰๐Ÿฅถ.
dog properties object

เปเบฅเป‰เบงเบกเบฑเบ™เบ„เบฑเบเบšเปˆเบญเบ™เปƒเบ”?๐Ÿซฃ, เบšเบฒเบ‡เป€เบ—เบทเปˆเบญเป€เบฎเบปเบฒเบเปเปˆเบกเบต properties เบ—เบตเปˆ instance เบ—เบฑเบ‡เปเบปเบ”เปƒเบŠเป‰เบฎเปˆเบงเบกเบเบฑเบ™. เบ•เบปเบงเบขเปˆเบฒเบ‡เปƒเบ™เบเปเบฅเบฐเบ™เบตเบ™เบตเป‰เปเบกเปˆเบ™ bark function, เป€เบŠเบดเปˆเบ‡เบ—เบธเบเป† instance เปเบกเปˆเบ™เบกเบตเบ„เบทเบเบฑเบ™เบ—เบฑเบ‡เปเบปเบ” เปเบฅเป‰เบงเป€เบ›เบฑเบ™เบซเบเบฑเบ‡เป€เบฎเบปเบฒเบˆเบถเปˆเบ‡เบ•เป‰เบญเบ‡เบกเบฒเบชเป‰เบฒเบ‡ function เปƒเปเปˆเบ—เบธเบเบ„เบฑเป‰เบ‡เบ—เบตเปˆเป€เบฎเบปเบฒเบชเป‰เบฒเบ‡ dog เปเบ–เบกเบเบฑเบ‡เปƒเบŠเป‰ memory เปƒเบ™เปเบ•เปˆเบฅเบฐเบ„เบฑเป‰เบ‡เบญเบตเบ? เบ—เบฑเบ‡เป†เบ—เบตเปˆเป€เบฎเบปเบฒเบชเบฒเบกเบฒเบ”เป€เบžเบตเปˆเบก function เบ™เบตเป‰เบฅเบปเบ‡เป„เบ›เปƒเบ™ Dog.prototype object เป„เบ”เป‰เป€เบฅเบตเบ๐Ÿ˜‚.
add function to Dog.prototype

เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒเบžเบฐเบเบฒเบเบฒเบกเบ—เบตเปˆเบˆเบฐ access property เปƒเบ™ instance เบ—เบณเบญเบดเบ” engine เบˆเบฐเบ„เบปเป‰เบ™เบซเบฒเบขเบนเปˆ local เป€เบžเบทเปˆเบญเป€เบšเบดเปˆเบ‡เบงเปˆเบฒ property เป„เบ”เป‰เบ–เบทเบ defined เปƒเบ™ object เป€เบญเบ‡เบซเบผเบทเบšเปเปˆ?. เปเบ•เปˆเบขเปˆเบฒเบ‡เปƒเบ”เบเปเปˆเบ•เบฒเบก เบ–เป‰เบฒเบกเบฑเบ™เบšเปเปˆเบžเบปเบš property เบ—เบตเปˆเป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบเบฒเบ™ access เบ™เบฑเป‰เบ™, engine เบˆเบฐเบ—เบณเบเบฒเบ™เป€เบ‚เบปเป‰เบฒเป„เบ›เป€เบšเบดเปˆเบ‡เบขเบนเปˆ prototype เบœเปˆเบฒเบ™ __proto__ property.
access prototype

เบ•เบญเบ™เบ™เบตเป‰เบกเบฑเบ™เป€เบ›เบฑเบ™เบžเบฝเบ‡เบ‚เบฑเป‰เบ™เบ•เบญเบ™เบ”เบฝเบง, เปเบ•เปˆเบกเบฑเบ™เบเบฑเบ‡เบกเบตเบญเบตเบเบซเบผเบฒเบเบ‚เบฑเป‰เบ™เบ•เบญเบ™เบ•เบทเปˆเบกเบญเบตเบ. เบ–เป‰เบฒเบซเบฒเบ follow เบ•เบฒเบกเบ•เบปเบงเบขเปˆเบฒเบ‡เบ—เบตเปˆเบœเปˆเบฒเบ™เบกเบฒเบˆเบฐเบชเบฑเบ‡เป€เบเบ”เป€เบซเบฑเบ™เบงเปˆเบฒเป€เบฎเบปเบฒเบšเปเปˆเป„เบ”เป‰เป€เบžเบตเปˆเบก property 1 เบฅเบฒเบเบเบฒเบ™, เป€เบกเบทเปˆเบญเป€เบฎเบปเบฒ expand __proto__ object เบ—เบตเปˆเบชเบฐเปเบ”เบ‡ Dog.prototype. Dog.prototype เป€เบ›เบฑเบ™ object เปเบฒเบเบ„เบงเบฒเบกเบงเปˆเบฒเบ—เบตเปˆเบˆเบดเบ‡เปเบฅเป‰เบงเบกเบฑเบ™เป€เบ›เบฑเบ™ instance เบ‚เบญเบ‡ Object constructor เบชเบฐเปเบ”เบ‡เบงเปˆเบฒ Dog.prototype เบเปเปˆเบกเบต __proto__ property, เป€เบŠเบดเปˆเบ‡เป€เบ›เบฑเบ™เบเบฒเบ™เบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ Object.prototype.
Object.prototype

เปƒเบ™เบ—เบตเปˆเบชเบธเบ”เป€เบฎเบปเบฒเบเปเปˆเป„เบ”เป‰เบ„เบณเบ•เบญเบšเปเบฅเป‰เบงเบงเปˆเบฒเบšเบฑเบ™เบ”เบฒ built-in methods เบกเบฒเบˆเบฒเบเป„เบช, เบกเบฒเบขเบนเปˆเปƒเบ™ prototype chain เบ™เบฑเป‰เบ™เป€เบญเบ‡๐Ÿคฉ. เบ–เป‰เบฒเปƒเบœเบเบฑเบ‡เบšเปเปˆเป„เบ”เป‰เบ„เบณเบ•เบญเบšเบเบฑเบšเป„เบ›เบญเปˆเบฒเบ™เบญเบตเบเบฎเบญเบšเป€เบ”เบต 5555.

เบ•เบปเบงเบขเปˆเบฒเบ‡: .toString() method. เบกเบฑเบ™เบ–เบทเบ defined เบขเบนเปˆ local เปƒเบ™ dog1 object เบšเปเปˆ? เป€เบ—เบปเปˆเบฒเบ—เบตเปˆเป€เบซเบฑเบ™เบเบฐเบšเปเปˆเปƒเบ”เบฅเปˆเบฐ๐Ÿ˜‚ เบซเบผเบท เบกเบฑเบ™เบ–เบทเบ defined เบขเบนเปˆเปƒเบ™ object dog1.__proto__ เปเบฅเป‰เบงเบกเบฑเบ™เบกเบตเบเบฒเบ™เบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ Dog.prototype เบšเปเปˆ? เบšเปเปˆเปœเป‰เบฒเบˆเบฐเปเบกเปˆเบ™เป€เบŠเบฑเปˆเบ™เบเบฑเบ™, เปเบ•เปˆเบกเบฑเบ™เบ–เบทเบ defined เบขเบนเปˆเปƒเบ™ Dog.prototype.__proto__ เบ—เบตเปˆเบญเป‰เบฒเบ‡เบญเบตเบ‡เป€เบ–เบดเบ‡ Object.prototype เบžเบตเป‰เบ™เปˆเบฐ๐Ÿคฃ.
Dog.prototype.__proto__

เบ•เบญเบ™เบ™เบตเป‰เป€เบฎเบปเบฒเบซเบฒเบเปเปˆเป„เบ”เป‰เปƒเบŠเป‰ constructor functions (function Dog() { ... }) เบ—เบตเปˆเบเบฑเบ‡เป€เบ›เบฑเบ™เบงเบดเบ—เบตเบ‚เบฝเบ™เบ—เบตเปˆเบ–เบทเบเบ•เป‰เบญเบ‡เบขเบนเปˆเปƒเบ™เบžเบฒเบชเบฒ JavaScript, เปเบ•เปˆเบกเบตเบงเบดเบ—เบตเบ—เบตเปˆเบ‡เปˆเบฒเบเบเบงเปˆเบฒเบ™เบฑเป‰เบ™เปƒเบ™เบเบฒเบ™เปƒเบŠเป‰ constructor functions เบ—เบตเปˆเป€เบฎเบฑเบ”เบงเบฝเบเบฎเปˆเบงเบกเบเบฑเบ™เบเบฑเบš prototypes เบ„เบท: classes.

เบเบฒเบ™เปƒเบŠเป‰ classes เป€เบ›เบฑเบ™เบžเบฝเบ‡เบเบฒเบ™เบ›เปˆเบฝเบ™เบงเบดเบ—เบตเบ‚เบฝเบ™เป€เบžเบทเปˆเบญเปƒเบซเป‰เป€เบฎเบปเบฒเปƒเบŠเป‰ constructor functions เป„เบ”เป‰เบเบฐเบ—เบฑเบ”เบฎเบฑเบ” เปเบฅเบฐ เป€เบ‚เบปเป‰เบฒเปƒเบˆเบ‡เปˆเบฒเบเบ‚เบถเป‰เบ™เป€เบ—เบปเปˆเบฒเบ™เบฑเป‰เบ™, เป€เบŠเบดเปˆเบ‡เบ—เบธเบเบขเปˆเบฒเบ‡เบเบฑเบ‡เบ„เบปเบ‡เป€เบฎเบฑเบ”เบงเบฝเบเบ›เบปเบเบเบฐเบ•เบด.

เป€เบฎเบปเบฒเบ‚เบฝเบ™ classes เบ”เป‰เบงเบ class keyword. เป‚เบ”เบเบžเบทเป‰เบ™เบ–เบฒเบ™ class เบˆเบฐเบกเบต constructor function, เบšเบฑเบ™เบ”เบฒ properties เบ—เบตเปˆเป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบเบฒเบ™เป€เบžเบตเปˆเบกเปƒเบ™ prototype เปเบกเปˆเบ™เบ–เบทเบ defined เบขเบนเปˆเปƒเบ™ body เบ‚เบญเบ‡ classes.
classes

เบญเบตเบเบ‚เปเป‰เบ”เบตเบ‚เบญเบ‡เบเบฒเบ™เปƒเบŠเป‰ class เบเปเปˆเบ„เบทเป€เบฎเบปเบฒเบชเบฒเบกเบฒเบ” extend classes เบญเบทเปˆเบ™เป†เป„เบ”เป‰.

เป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบเบฒเบ™เบชเบฐเปเบ”เบ‡เปเบฒเบชเบฒเบเบžเบฑเบ™เบŠเบดเบงเบฒเบงเบฒเบซเบผเบฒเบเป†เป‚เบ•, เป€เบžเบทเปˆเบญเปƒเบซเป‰เบ•เบปเบงเบขเปˆเบฒเบ‡เบ‚เบญเบ‡เป€เบฎเบปเบฒเป€เบ‚เบปเป‰เบฒเปƒเบˆเบ‡เปˆเบฒเบ เป€เบฎเบปเบฒเบˆเบฐเบชเบปเปˆเบ‡ property name เป„เบ› Dog class เปเบ—เบ™ name,breed เปเบฅเบฐ color. เปเบ•เปˆเบงเปˆเบฒเบŠเบดเบงเบฒเบงเบฒเบเบฑเบ‡เบ„เบปเบ‡เบกเบตเบชเบฐเบเบดเบงเบžเบดเป€เบชเบ”เบขเบนเปˆเบ„เบท: เบกเบฑเบ™เป€เบซเบปเปˆเบฒเป€เบเบฑเปˆเบ‡เปเบ–เบกเบเบฑเบ‡เบชเบฝเบ‡เปเบซเบผเบกเป†เบ™เป‰เบญเบเป†เบญเบตเบ๐Ÿคฃ เปเบ—เบ™เบ—เบตเปˆเบกเบฑเบ™เบˆเบฐเป€เบซเบปเปˆเบฒเปเบšเบšเบ”เบธเบ”เบฑเบ™เป€เบฃเบปเป‰เบฒเปƒเบˆ(Woof), เบ–เป‰เบฒเป€เบ›เบฑเบ™เบŠเบดเบงเบฒเบงเบฒเบญเบฒเบ”เบˆเบฐเป€เบ›เบฑเบ™ small woof.

เปƒเบ™ extended class เป€เบฎเบปเบฒเบชเบฒเบกเบฒเบ” access เป€เบ‚เบปเป‰เบฒเป„เบ› parent class' constructor เป‚เบ”เบเปƒเบŠเป‰ super keyword. เบชเปˆเบงเบ™เบšเบฑเบ™เบ”เบฒ arguments เบ—เบตเปˆ parent class' constructor เบ•เป‰เบญเบ‡เบเบฒเบ™ เป€เบฎเบปเบฒเบ•เป‰เบญเบ‡เบชเบปเปˆเบ‡เบ„เปˆเบฒเป„เบ› super, เป€เบŠเบดเปˆเบ‡เปƒเบ™เบเปเบฅเบฐเบ™เบตเบ™เบตเป‰เปเบกเปˆเบ™ name.
Dog Class

myPet เบชเบฒเบกเบฒเบ” access เป€เบ‚เบปเป‰เบฒเป„เบ”เป‰เบ—เบฑเบ‡ Chihuahua.prototype เปเบฅเบฐ Dog.prototype (เปเบฅเบฐ Object.prototype เป‚เบ”เบเบญเบฑเบ”เบ•เบฐเป‚เบ™เบกเบฑเบ”, เป€เบ™เบทเปˆเบญเบ‡เบˆเบฒเบ Dog.prototype เป€เบ›เบฑเบ™ object).
prototypal inheritance

เป€เบ™เบทเปˆเบญเบ‡เบˆเบฒเบ Chihuahua.prototype เบกเบต smallBark function เปเบฅเบฐ Dog.prototype เบกเบต bark function เป€เบฎเบปเบฒเบˆเบถเปˆเบ‡เบชเบฒเบกเบฒเบ” access เป„เบ”เป‰เบ—เบฑเบ‡ smallBark เปเบฅเบฐ bark เปƒเบ™ myPet.

เป€เบฎเบปเบฒเบฅเบญเบ‡เบˆเบดเบ™เบ•เบฐเบ™เบฒเบเบฒเบ™เป€เบšเบดเปˆเบ‡เบงเปˆเบฒ prototype chain เบšเปเปˆเป„เบ”เป‰ access เป„เบ›เป„เบ”เป‰เบ•เบฐเบซเบผเบญเบ”. เบ–เป‰เบฒเบซเบฒเบเบงเปˆเบฒเบกเบต object เบ—เบตเปˆเป€เบ›เบฑเบ™ prototype เป€เบ—เบปเปˆเบฒเบเบฑเบšเบ„เปˆเบฒ null, เปƒเบ™เบเปเบฅเบฐเบ™เบตเบ™เบตเป‰เปเบกเปˆเบ™ Object.prototype object เบ–เป‰เบฒเป€เบฎเบปเบฒเบžเบฐเบเบฒเบเบฒเบก access property เบ—เบตเปˆเบกเบฑเบ™เบšเปเปˆเบžเบปเบšเบขเบนเปˆ local เบซเบผเบท prototype chain เบกเบฑเบ™เบˆเบฐ return เบ„เปˆเบฒ undefined.
prototype chain equal null


เป€เบ–เบดเบ‡เปเบกเปˆเบ™เบงเปˆเบฒเปƒเบ™เบšเบปเบ”เบ„เบงเบฒเบกเบ™เบตเป‰เป„เบ”เป‰เบญเบฐเบ—เบดเบšเบฒเบเบ—เบธเบเบขเปˆเบฒเบ‡เบเปˆเบฝเบงเบเบฑเบšเบเบฒเบ™เปƒเบŠเป‰ constructor functions เปเบฅเบฐ classes เป„เบ›เปเบฅเป‰เบง, เปเบ•เปˆเบกเบฑเบ™เบเปเปˆเบเบฑเบ‡เบกเบตเบญเบตเบเบงเบดเบ—เบตเบญเบทเปˆเบ™เป€เบŠเบฑเปˆเบ™เบเบฑเบ™เปƒเบ™เบเบฒเบ™เบ—เบตเปˆเบˆเบฐเป€เบžเบตเปˆเบก prototypes เปƒเบ™ objects เป€เบŠเบฑเปˆเบ™: Object.create method, เป€เบŠเบดเปˆเบ‡ method เบ™เบตเป‰เป€เบฎเบปเบฒเบชเบฒเบกเบฒเบ”เบชเป‰เบฒเบ‡ object เปƒเปเปˆ เปเบฅเบฐ เบชเบฒเบกเบฒเบ”เบฅเบฐเบšเบธเป„เบ”เป‰เป€เบฅเบตเบเบงเปˆเบฒ prototype เบ‚เบญเบ‡ object เป€เบฎเบปเบฒเบˆเบฐเบกเบตเปœเป‰เบฒเบ•เบฒเปเบšเบšเปƒเบ”.

เบงเบดเบ—เบตเบเบฒเบ™เปเบกเปˆเบ™เป€เบฎเบปเบฒเบˆเบฐเบ—เบณเบเบฒเบ™เบชเบปเปˆเบ‡ object เปƒเบ™เบฎเบนเบšเปเบšเบšเบ‚เบญเบ‡ argument เป„เบ› Object.create method, object เบ—เบตเปˆเป€เบฎเบปเบฒเบชเบปเปˆเบ‡เป€เบ‚เบปเป‰เบฒเป„เบ›เบˆเบฐเป€เบ›เบฑเบ™ prototype เบ‚เบญเบ‡ object เบ—เบตเปˆเป€เบฎเบปเบฒเบชเป‰เบฒเบ‡.
Object.create

เป€เบฎเบปเบฒเบกเบฒเบฅเบญเบ‡ log เป€เบšเบดเปˆเบ‡ object เบ—เบตเปˆเป€เบฎเบปเบฒเบซเบฒเบเปเปˆเบชเป‰เบฒเบ‡เบฅเบญเบ‡เป€เบšเบดเปˆเบ‡:
log Object.create

เป€เบฎเบปเบฒเบšเปเปˆเป„เบ”เป‰เบ—เบณเบเบฒเบ™เป€เบžเบตเปˆเบก properties เปƒเบ”เป†เป€เบ‚เบปเป‰เบฒเป„เบ›เปƒเบ™ me opbject, เบกเบฑเบ™เบกเบตเบžเบฝเบ‡ __proto__ property เบ—เบตเปˆ non-enumerable(เบšเปเปˆเบชเบฒเบกเบฒเบ”เบ™เบฑเบšเป„เบ”เป‰)เป€เบ—เบปเปˆเบฒเบ™เบฑเป‰เบ™. __proto__ property เบกเบตเบเบฒเบ™เบญเป‰เบฒเบ‡เบญเบตเบ‡เป„เบ›เบเบฑเบ‡ object เบ—เบตเปˆเป€เบฎเบปเบฒเป„เบ”เป‰เบ—เบณเบเบฒเบ™ defined เปƒเบซเป‰เป€เบ›เบฑเบ™ prototype. person object เบ—เบตเปˆเบกเบต name เปเบฅเบฐ age เป€เบ›เบฑเบ™ property, เป€เบ™เบทเปˆเบญเบ‡เบˆเบฒเบ person object เป€เบ›เบฑเบ™ object เป€เบŠเบดเปˆเบ‡ value เบ‚เบญเบ‡ __proto__ property เปƒเบ™ person object เปเบกเปˆเบ™ Object.prototype.

เบญเป‰เบฒเบ‡เบญเบตเบ‡: ๐ŸŽ‰๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง JavaScript Visualized: Prototypal Inheritance

Top comments (0)