220818(๋ชฉ)
๐ชด ์ฑ์ฅ์ผ์ง
์ฑ
ํ๋ณตํ ์ด๊ธฐ์ฃผ์์(์จ์ธ ๋ค์ด์ด)
์ ๋ด์ฉ์ ์๊ทน๋ฐ์ ์์ํ๋ ์๋ฐํ ์ฑ์ฅ๊ธฐ๋ก
์ด์์๋ ๊ฝ๊ณผ ์ฃฝ์ ๊ฝ์ ์ด๋ป๊ฒ ๊ตฌ๋ณํ๋๊ฐ?
์ฑ์ฅํ๊ณ ์๋ ๊ฒ์ด ์ด์ ์๋ ๊ฒ์ด๋ค.
์๋ช ์ ์ ์ผํ ์ฆ๊ฑฐ๋ ์ฑ์ฅ์ด๋ค!
๐ณ ํค์๋ ์ต๋ํ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌ, ์ถํ์ ๋ณด๋ฉด์ ์ค์ค๋ก ์ค๋ช
โญโญโญ JavaScript
ํ๋กํ ํ์
๊ฐ๋
์๋ฐ์คํฌ๋ฆฝํธ๋ ํด๋์ค ๊ธฐ๋ฐ ์ธ์ด๊ฐ ์๋ ํ๋กํ ํ์
๊ธฐ๋ฐ ์ธ์ด
prototype
: ์์ฑ์(Constructor)๊ฐ ๊ฐ๋ ํ๋กํผํฐ๋ก, ํด๋น ์์ฑ์์ method๊ฐ ๋ด๊ธด ๊ฐ์ฒด(object)__proto__
: new ์ฐ์ฐ์๋ก ์์ฑ์๋ฅผ ํธ์ถํด์ ๋ง๋ค์ด์ง ์ธ์คํด์ค(instance)๊ฐ ๊ฐ๋ ํ๋กํผํฐ๋ก, ์์ฑ์์ prototype์ ์ฐธ์กฐํ๋ ๊ฐ์ฒด
var instance = new Constructor();
instance.__proto__ === Constructor.prototype;
// __proto__๊ฐ prototype์ ์ฐธ์กฐํ๊ธฐ ๋๋ฌธ
instance.__proto__ === Object.getPrototypeOf(instance);
// ์ฌ์ค ๊ฐ๊ธ์ ์ด๋ฉด Object.getPrototypeOf()๋ฅผ ์ฌ์ฉํ๋๋ก ํ์
new ์ฐ์ฐ์๋ก Constructor๋ฅผ ํธ์ถํ๋ฉด instance๊ฐ ๋ง๋ค์ด์ง๊ณ , ์ด instance์ ์๋ต ๊ฐ๋ฅํ ํ๋กํผํฐ์ธ
__proto__
๋ Constructor์prototype
์ ์ฐธ์กฐํจ
// ๋ค์ 5๊ฐ์ง๋ ๋ชจ๋ ์์ฑ์(Constructor)๋ฅผ ๊ฐ๋ฆฌํต๋๋ค.
[Constructor] // ์์ฑ์ ๊ทธ ์์ฒด
[Constructor].prototype.constructor // ์์ฑ์์ ํ๋กํ ํ์
์ ์์ฑ์
[instance].__proto__.constructor // ์ธ์คํด์ค์ __proto__๊ฐ ๊ณง ์์ฑ์์ ํ๋กํ ํ์
์ ์ฐธ์กฐํ๋ฏ๋ก
[instance].constructor // __proto__๋ ์๋ต๊ฐ๋ฅ
Object.getPrototypeOf([instance]).constructor
ํ๋กํ ํ์ ์ฒด์ธ
์ด๋ค ๋ฐ์ดํฐ์ __proto__
ํ๋กํผํฐ ๋ด๋ถ์ ๋ค์ __proto__
ํ๋กํผํฐ๊ฐ ์ฐ์์ ์ผ๋ก ์ด์ด์ง ๊ฒ
์ด ์ฒด์ธ์ ๋ฐ๋ผ๊ฐ๋ฉฐ ๊ฐ์ฒด๋ฅผ ๊ฒ์ํ๋ ๊ฒ์ ํ๋กํ ํ์
์ฒด์ธ
์ด๋ผ๊ณ ํจ
๋ฉ์๋ ์ค๋ฒ๋ผ์ด๋
์ค์ฝํ ์ฒด์ธ์์์ฒ๋ผ, ํน์ ์ธ์คํด์ค์์ ์ด๋ค ๋ฉ์๋๋ฅผ ์คํํ์ ๋ ๊ฐ๊น์ด __proto__
์์ ๋จผ์ ์ฐพ์์ ๊ทธ ๋ฉ์๋๋ฅผ ์คํ
var test = new Array(5);
test.__proto__; // Array์ prototype์ ์ฐธ์กฐํ๋ฏ๋ก Array ๊ด๋ จ ๋ฉ์๋๊ฐ ์์
test.__proto__.__proto__; // test.__proto__๊ฐ ๊ฒฐ๊ตญ Object์ด๊ธฐ์ Object์ prototype์ ์ฐธ์กฐํ๋ฏ๋ก Object ๊ด๋ จ ๋ฉ์๋๊ฐ ์์
var Dog = function (name) {
this.name = name;
this.bark = function () {
return this.name + ' ๋ฉ๋ฉ!';
};
};
// ๊ฐ์ ์ด๋ฆ์ ๋ฉ์๋๋ฅผ prototype์ ์ถ๊ฐ
Dog.prototype.bark = function () {
return this.name + ' ์์!';
};
var hodu = new Dog('hodu');
hodu.bark(); // 'hodu ๋ฉ๋ฉ!'์ ๋ฐํ -> prototype์ ์๋ ๋ฉ์๋๋ ๋ฎ์ด์ง(์ธ์คํด์ค์ ์ง์ ์ ๊ทผ์ด ๋ ๊ฐ๊น๊ธฐ ๋๋ฌธ)
hodu.__proto__.bark();
// undefined -> ๋ฎ์ด์ง๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์์ ๋ฉ์๋๊ฐ ์ฌ๋ผ์ง๋ ๊ฑด ์๋! ๋จ, this๊ฐ hodu๊ฐ ์๋ hodu.__proto__๋ฅผ ๊ฐ๋ฆฌํค๊ธฐ ๋๋ฌธ์ undefined
hodu.__proto__.bark.call(hodu); // 'hodu ์์!' ๋ฐํ
ํ๋กํ ํ์ ์ฒด์ธ ๊ตฌ์กฐ ์, ์ด๋ค ์์ฑ์ ํจ์๋ ๊ทธ ๋์๋ Object.prototype์ ์ฐธ์กฐํ๊ฒ ๋์ด์์ ๊ทธ๋ฌ๋ฏ๋ก Object.prototype์ Object๋ง์ ๋ฉ์๋๋ฅผ ๋ ์๊ฐ ์์(๊ทธ๋ฌ๋ฉด ๋ฌธ์์ด, ์ซ์ํ, ๋ฐฐ์ด ๋ฑ๋ฑ ๋ชจ๋ ์๋ฃํ์ด ๊ทธ ๋ฉ์๋๋ฅผ ์ฌ์ฉ๊ฐ๋ฅ -> ํ๋กํ ํ์ ์ฒด์ธ) ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Object ์์ฒด์ static method๋ก ๋ถ์ฌํ ์ ๋ฐ์ ์๋ ๋ฉ์๋๋ค์ด ์กด์ฌ ex) Object.freeze()
๋ค์ค ํ๋กํ ํ์ ์ฒด์ธ
์์์ ๋ณธ ๊ฒ์ฒ๋ผ ํ๋กํ ํ์
์ฒด์ธ์ ๊ณ์ ์ด์ด์ง ์ ์์(๋ณดํต ์ ์๋ ๋ฐ์ดํฐ ํ์
์ ํด๋ด์ผ 2์ฒด์ธ ์ ๋ ex. Array๋ Object๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๊ธฐ์ Array -> Object๋ก ์ฒด์ด๋)
์ด๋ฅผ ํ์ฉํ๋ฉด ์กฐ๊ธ ์ฌ๋ฏธ์๋ ์ง์ ํด๋ณผ ์ ์์
var test = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; // ์ด๋ฐ ์ ์ฌ๋ฐฐ์ด์ด ์์ ๋
test.__proto__ = []; // test์ __proto__๊ฐ์ฒด๋ฅผ ๋ฐฐ์ด ๋ฆฌํฐ๋ด๋ก ๋ฐ๊ฟ๋ฒ๋ฆฌ๋ฉด?
// [].__proto__๋ Array์ prototype์ ์ฐธ์กฐํ๋ฏ๋ก Array์ ๋ฉ์๋๋ฅผ ์ฌ์ฉ๊ฐ๋ฅํด์ง
test.push(11); // ๋ฐฐ์ด ํํ๊ฐ ๋๋ฉด์ ๋ฐฐ์ด์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋จ!