![[JS νλ‘ν νμ
] νλ‘ν νμ
μ μ¬μ©νμ¬ μμνκΈ° [JS νλ‘ν νμ
] νλ‘ν νμ
μ μ¬μ©νμ¬ μμνκΈ°](/static/ffc88c93a54f1c5d1783f61478e57588/ee604/thumbnail.png)
[JS νλ‘ν νμ ] νλ‘ν νμ μ μ¬μ©νμ¬ μμνκΈ°
μ΄λ² ν¬μ€ν μμλ μ΄μ ν¬μ€ν μ μ΄μ΄, νλ‘ν νμ μ μ¬μ©ν λ€μν μμ ν¨ν΄μ λν μ΄μΌκΈ°λ₯Ό ν΄λ³ΌκΉ νλ€.
μ¬μ€ μλ°μ€ν¬λ¦½νΈμλ μμμ΄λ μΊ‘μνμ κ°μ κ°λ μ΄ λͺ μμ μΌλ‘ μ‘΄μ¬νμ§λ μκΈ° λλ¬Έμ μλ°λ C++ κ°μ ν΄λμ€ κΈ°λ° μΈμ΄λ₯Ό μ¬μ©νλ κ°λ°μλ€μ μλ°μ€ν¬λ¦½νΈμ ν΄λμ€κ° μλ€λ μ¬μ€μ νΌλμ€λ¬μνλ€.
μ¦, μλ°μ€ν¬λ¦½νΈμμμ μμμ΄λ μΊ‘μν λ±μ OOP(κ°μ²΄μ§ν₯νλ‘κ·Έλλ°)
μ μ΅μν κ°λ°μλ€μ΄ μλ°μ€ν¬λ¦½νΈμμλ μ΄λ° κ°λ
λ€μ κ°μ Έλ€ μ¬μ©νκΈ° μν΄ νν ν νμ
μ μ¬μ©νμ¬ μ΄λ₯Ό μ μ¬νκ² κ΅¬νν μΌμ’
μ λμμΈ ν¨ν΄μ΄λΌκ³ ν μ μλ€.
μλ°μ€ν¬λ¦½νΈμμμ μμμ νλ‘ν νμ 체μΈμ μ¬μ©νμ¬ κ΅¬ννκ³ , μΊ‘μνλ ν΄λ‘μ λ₯Ό μ¬μ©ν΄μ ꡬννκ² λλλ°, μ΄λ² ν¬μ€ν μμλ μ΄ μ€ νλ‘ν νμ μ μ¬μ©ν μμ ν¨ν΄μ μ§μ€ν΄μ μ€λͺ ν΄λ³ΌκΉ νλ€.
νλ‘νΌν°μ λ©μλλ μλ³Έ κ°μ²΄λ₯Ό ν΅ν΄ 곡μ λ μ μλ€
κ°μ²΄μ μμμ μμ보기 μ μ κ°μ²΄λ₯Ό μμ±ν λ νλ‘νΌν°μ λ©μλλ₯Ό λΆμ¬νλ λ°©λ²μ λν΄μ μμ보λλ‘ νμ. μ΄μ ν¬μ€ν
μμ νμλ μλ°μ€ν¬λ¦½νΈλ ν΄λμ€κ° μλ ν¨μ
λ₯Ό μ¬μ©νμ¬ κ°μ²΄λ₯Ό μμ±νλ€κ³ μ΄μΌκΈ° νμλ€.
function User () {}
const evan = new User();
μ΄λ User
ν¨μλ₯Ό μμ±μλ‘ νΈμΆνλ©΄μ μμ±λ evan
κ°μ²΄λ User.prototype
κ°μ²΄λ₯Ό μλ³Έ κ°μ²΄λ‘ νμ¬ λ³΅μ λ κ°μ²΄μ΄λ€.
μ΄λ λ κ°μ§ λ°©λ²μ μ¬μ©νμ¬ μλ‘κ² μμ±λλ κ°μ²΄λ€μκ² νλ‘νΌν°λ λ©μλλ₯Ό λΆμ¬ν μ μλλ°, 첫 λ²μ§Έλ μμ±μ ν¨μ λ΄μμ this
λ₯Ό μ¬μ©νμ¬ μ μΈνλ λ°©λ², λ λ²μ§Έλ μλ‘κ² μμ±λλ κ°μ²΄λ€μ΄ 볡μ¬ν μλ³Έ κ°μ²΄μΈ νλ‘ν νμ
κ°μ²΄
μ μ μΈνλ λ°©λ²μ΄λ€.
λ¨Όμ , this
λ₯Ό μ¬μ©νμ¬ νλ‘νΌν°λ λ©μλλ₯Ό μ μνλ λ°©λ²μ λν΄μ μ΄ν΄λ³΄μ.
μμ±μ ν¨μ λ΄μμ thisλ₯Ό μ¬μ©νλ λ°©λ²
μλ°μ€ν¬λ¦½νΈλ μμ±μ μν μ νλ ν¨μ λ΄μμ this
λ₯Ό μ¬μ©νμ¬ λ€λ₯Έ μΈμ΄μ λΉμ·ν λλμΌλ‘ κ°μ²΄λ€μκ² νλ‘νΌν°λ λ©μλλ₯Ό λΆμ¬ν μ μλ€.
function User (name) {
'use strict';
this.say = function () {
console.log('Hello, World!');
};
}
const evan = new User();
console.log(evan.say());
Hello, World!
μ°Έκ³ λ‘ μμ±μ ν¨μ λ΄μμ strict
λͺ¨λλ₯Ό μ¬μ©ν μ΄μ λ, ν΄λΉ μμ±μ ν¨μκ° μ€μλ‘ new
μμ½μ΄ μμ΄ νΈμΆλμ΄ this
κ° μ μ κ°μ²΄λ‘ νκ°λλ λΆμμ¬λ₯Ό λ°©μ΄νκΈ° μν΄μμ΄λ€.(μ΄ λ΄μ©μ νλ‘ν νμ
κ³Όλ κ΄λ ¨μ΄ μκΈ° λλ¬Έμ μμΈν λ€λ£¨μ§λ μκ² λ€)
μ΄ λ°©λ²μ μΌλ°μ μΈ μμ±μμ μ¬μ© λ°©λ²κ³Ό λΉμ·ν΄μ μ§κ΄μ μΌλ‘ μ΄ν΄κ° λλ νΈμ΄λ€. μ΄λ μμ±μ ν¨μ μμ this
λ μλ‘κ² μμ±λ κ°μ²΄λ₯Ό μλ―ΈνκΈ° λλ¬Έμ, ν¨μ λ΄μμ this
λ₯Ό ν΅ν΄ μ μν νλ‘νΌν°λ λ©μλλ μ΄ μμ±μ ν¨μλ₯Ό μ¬μ©νμ¬ κ°μ²΄κ° μμ±λ λλ§λ€ μλ‘κ² μ μλλ€.
λ¬΄μ¨ λ§μΈμ§ μ‘°κΈ λ μ½κ² μμ보기 μν΄ μμ±μ ν¨μλ₯Ό ν΅ν΄ λ κ°μ μλ‘μ΄ κ°μ²΄λ₯Ό μμ±νκ³ , μ΄ κ°μ²΄λ€μ λ©μλλ₯Ό λΉκ΅ν΄λλ‘ νμ.
const evan = new User();
const john = new User();
console.log(evan.say === john.say);
false
μμ±μ ν¨μκ° νΈμΆλ λ this
λ κ°κ° evan
κ°μ²΄μ john
κ°μ²΄λ₯Ό μλ―Ένμ κ²μ΄κ³ , say
λ©μλ λν μ΄ κ°μ²΄λ€μκ² μ§μ ν λΉλμμ κ²μ΄λ€. μλ°μ€ν¬λ¦½νΈμ μμ ν λΉμ°μ°μ(===)
λ λ€λ₯Έ λ©λͺ¨λ¦¬μ μ μ¬λ κ°μ²΄λ λ€λ₯΄λ€κ³ νκ°νλ―λ‘ μ΄ λ κ°μ²΄μ λ©μλλ€μ κ°μ λ€λ₯Έ λ©λͺ¨λ¦¬μ λ΄κΈ΄, μ ν λ€λ₯Έ ν¨μλΌκ³ ν μ μλ€.
μ΄λ evan
κ°μ²΄λ john
κ°μ²΄λ₯Ό μΆλ ₯ν΄λ³΄λ©΄, κ°μ²΄ λ΄λΆμ say
λ©μλκ° μ μλμ΄ μλ λͺ¨μ΅ λν νμΈν΄λ³Ό μ μλ€.
console.log(evan);
User {say: function}
μ΄ λΉμ°ν μ΄μΌκΈ°λ₯Ό νλ μ΄μ λ λ°λ‘ λ°μμ νμ ν νλ‘ν νμ
κ°μ²΄μ μ μνλ λ°©λ²
κ³Ό μ°¨μ΄μ μ λΆλͺ
ν νκΈ° μν΄μμ΄λ€. νλ‘ν νμ
κ°μ²΄λ₯Ό μ¬μ©ν΄μ νλ‘νΌν°λ λ©μλλ₯Ό μ μνκ²λλ©΄ μ§κΈκ³Όλ μ ν λ€λ₯Έ κ²°κ³Όκ° λμ¨λ€.
νλ‘ν νμ κ°μ²΄μ μ μνλ λ°©λ²
μ΄λ²μλ User
μμ±μ ν¨μμ νλ‘ν νμ
κ°μ²΄μΈ User.prototype
μ μ¬μ©νμ¬ λ©μλλ₯Ό νλ² μ μν΄λ³΄λλ‘ νμ. this
λ₯Ό ν΅ν΄μ μ μνλ λ°©λ²κ³Ό μ΄λ€ μ°¨μ΄κ° μμκΉ?
function User (name) {}
User.prototype.say = function () {
console.log('Hello, World!');
}
const evan = new User();
console.log(evan.say());
Hello, World!
μΌλ¨ this
λ₯Ό μ¬μ©νμ¬ μ μνλ λ©μλμ λμΌν λλμΌλ‘ μλνκ³ μλ€. κ·Έλμ λμΌν λμμ΄λΌκ³ μκ°ν μλ μμ§λ§, μ¬μ€ λ λ°©λ²λ€ μ¬μ΄μλ μ€μν μ°¨μ΄κ° μ‘΄μ¬νλ€.
λ°λ‘ μμ±μ ν¨μλ₯Ό ν΅ν΄ μμ±λ λͺ¨λ κ°μ²΄λ€μ΄ ν΄λΉ λ©μλλ₯Ό 곡μ νκ³ μλ, μλ
μ μ°¨μ΄μ΄λ€. μ΄μ κ³Ό λ§μ°¬κ°μ§λ‘ λ κ°μ κ°μ²΄λ₯Ό μμ±νκ³ , λ κ°μ²΄μ λ©μλλ₯Ό λΉκ΅ν΄λ³΄μ.
const evan = new User();
const john = new User();
console.log(evan.say === john.say);
true
μ? μ΄λ²μλ μκΉμλ λ€λ₯΄κ² λ κ°μ²΄μ λ©μλκ° κ°λ€κ³ νλ€. λ°©κΈ μ κ³Όλ λ€λ₯΄κ² μ΄λ²μλ evan.say
μ john.say
κ° κ°μ²΄μ λ°λ‘λ°λ‘ μ μλ λ©μλκ° μλ, μλ³Έ κ°μ²΄μ λ©μλλ₯Ό 곡μ νκ³ μλ μν©μ΄κΈ° λλ¬Έμ΄λ€.
μμ±λ evan
κ°μ²΄λ₯Ό νλ² μ½μμ μΆλ ₯ν΄λ³΄λ©΄, μλ³Έ κ°μ²΄μ νλ‘νΌν°λ λ©μλλ₯Ό 곡μ νκ³ μλ€λ λ§μ΄ 무μμΈμ§ μ μ μλ€.
console.log(evan);
User {}
evan
κ°μ²΄λ₯Ό μΆλ ₯ν΄λ³΄λ, μ΄ κ°μ²΄λ μ무 λ©μλλ νλ‘νΌν°λ κ°μ§κ³ μμ§ μκ³ ν
λΉμ΄μλ μΉκ΅¬λ€.
μ¦, μμ±μ ν¨μ λ΄μμ this
λ₯Ό μ¬μ©νμ§ μκ³ , μλ³Έ κ°μ²΄μ λ©μλλ νλ‘νΌν°λ₯Ό μ μνκ² λλ©΄ κ°μ²΄λ€μκ²λ ν΄λΉ νλ‘νΌν°κ° μκ³ , μλ³Έ κ°μ²΄μ νλ‘νΌν°λ λ©μλλ₯Ό μ°Έμ‘°νλ€λ κ²μ΄λ€.
μ΄ νΉμ§μ μ λλ‘ μΈμ§νμ§ λͺ»νλ©΄ μ΄λ° μν©λ λ°μν μ μλ€.
User.prototype.name = 'Evan';
console.log(evan.name);
console.log(john.name);
Evan
Evan
κ·Έλ κΈ° λλ¬Έμ κ° κ°μ²΄λ§λ€ κ³ μ ν νλ‘νΌν°λ₯Ό λΆμ¬νκ³ μΆλ€λ©΄ μλ³Έ κ°μ²΄μ μ μνλ κ²μ΄ μλλΌ, μμ±μ ν¨μ λ΄μμ this
λ₯Ό μ¬μ©νμ¬ μ μν΄μΌνλ€. λ€μ λ§νμ§λ§ μλ³Έ κ°μ²΄μ μ μν νλ‘νΌν°λ λ©μλλ μμ±λ κ°μ²΄λ€ λΌλ¦¬ 곡μ
λλ€.
ν κ°μ§ μ΄μν μ μ, λΆλͺ
ν evan
κ°μ²΄μλ μλ¬΄λ° νλ‘νΌν°λ λ©μλλ μμλλ°, νμλ λΆλͺ
ν evan.say
λ₯Ό ν΅ν΄ ν΄λΉ λ©μλμ μ κ·Όν μ μμλ€λ κ²μ΄λ€. μ΄λ»κ² μ΄λ° μΌμ΄ κ°λ₯ν κ²μΌκΉ?
νλ‘ν νμ 룩μ
κ·Έ μ§λ¬Έμ λν ν΄λ΅μ λ°λ‘ μλ°μ€ν¬λ¦½νΈκ° κ°μ²΄ λ΄μμ νλ‘νΌν°λ₯Ό μ°Ύλ λ°©λ² μ€ νλμΈ νλ‘ν νμ
룩μ
(Prototype Lookup)
μμ μμλ³Ό μ μλ€. λ°©κΈ μ μλ°μ€ν¬λ¦½νΈκ° evan
κ°μ²΄μμ say
λ©μλλ₯Ό μ°Ύμλλ κ³Όμ μ λ€μκ³Ό κ°λ€.

evan.say
λ‘ μ κ·Ό μλ- μ΄,
say
νλ‘νΌν°κ° μλ€?__proto__
λ₯Ό ν΅ν΄ μλ³Έ κ°μ²΄λ‘ μ¬λΌκ°λ³΄μ!User.prototype
κ°μ²΄μΌ, λλsay
νλ‘νΌν° κ°μ§κ³ μλ?- μλ€? Profit!
μ΄λ° μμΌλ‘ μ°λ¦¬κ° μ΄λ€ κ°μ²΄μ νλ‘νΌν°μ μ κ·Όμ μλνμ λ, μλ°μ€ν¬λ¦½νΈλ λ¨Όμ κ·Έ κ°μ²΄κ° ν΄λΉ νλ‘νΌν°λ₯Ό κ°μ§κ³ μλμ§λ₯Ό νμΈνκ³ , ν΄λΉ νλ‘νΌν°κ° μλ€λ©΄ κ·Έ κ°μ²΄μ μλ³Έ κ°μ²΄λ‘ κ±°μ¬λ¬ μ¬λΌκ°μ λ€μ νμΈνκ² λλ€.
μ΄ μ§μν νμΈ κ³Όμ μ λͺ¨λ κ°μ²΄μ μ‘°μμΈ Object.prototype
μ λ€λ€λ₯Ό λκΉμ§ κ³μλκ³ , λ§μ½ μ¬κΈ°μλ μ‘΄μ¬νμ§ μλ νλ‘νΌν°λΌλ©΄ κ·ΈλμμΌ undefined
λ₯Ό λ°ννκ² λλ€.
μ΄ λ§μΈ μ¦μ¨, λͺ¨λ κ°μ²΄λ μμ μ νλ‘ν νμ μ²΄μΈ λ΄μ μλ λͺ¨λ μλ³Έ κ°μ²΄λ€μ νλ‘νΌν°λ λ©μλμ μ κ·Όν μ μλ€λ λ»μ΄λ€.
μ½κ² λ§ν΄, λ°©κΈ μμ±ν evan
κ°μ²΄λ μ무 νλ‘νΌν°λ λ©μλλ κ°μ§κ³ μμ§ μμ§λ§, μμ μ μλ³Έ κ°μ²΄μΈ User.prorotype
μ μ μλ say
λ©μλλ μ¬μ©ν μ μκ³ , Object.prototype
μ μλ toString
μ΄λ hasOwnProperty
μ κ°μ λ©μλλ μ¬μ©ν μ μλ€λ κ²μ΄λ€.
μ΄ νλ‘ν νμ 룩μ κ³Όμ μ κ°μ²΄μ νλ‘νΌν°λ λ©μλμ μ κ·Όνλ κ·Έ μκ°λ§λ€ μνλκΈ° λλ¬Έμ, ν΄λμ€κ° μ μλ λ λͺ¨λ μμκ΄κ³κ° ν¨κ» νκ°λλ ν΄λμ€ κΈ°λ° μΈμ΄μ μμκ³Όλ μ‘°κΈ λ€λ₯Έ λλμ΄λ€.
κ·Έλ¬λ μΆμμ μΌλ‘ μκ°ν΄λ³΄λ©΄ μλ³Έ κ°μ²΄(λΆλͺ¨)μ μμ±μ λ¬Όλ €λ°κ³ μλ€λ μ μμ μ°©μνμ¬, νλ‘ν νμ 룩μ μ ν λλ‘ μμμ ꡬνν μ μλ€.
νλ‘ν νμ μ μ¬μ©ν μμ
μλ°μ€ν¬λ¦½νΈμμ νλ‘ν νμ
μ μ¬μ©νμ¬ μμμ ꡬννλ λ°©λ²μ ν¬κ² Object.create
λ©μλλ₯Ό μ¬μ©νλ λ°©λ²κ³Ό μ΄ λ©μλλ₯Ό μ¬μ©νμ§μλ (λλ¬μ΄) λ°©λ², λ κ°μ§λ‘ λλμ΄μ§ μ μλ€.
μ¬μ€ Object.create
λ§ μ¬μ©ν΄λ νλ‘ν νμ
μ μ¬μ©ν μμμ μΆ©λΆν ꡬνμ΄ κ°λ₯νλ€. νμ§λ§ κ΅³μ΄ λ κ°μ§λ₯Ό λλ μ μ΄μΌκΈ°ν μ΄μ λ, Object.create
λ©μλκ° Internet Explorer 9
λΆν° μ§μμ΄ λκΈ° λλ¬Έμ΄λ€.
νμ§λ§ νμλ νμμ ν볡μ μν΄ μ°λ ν¬μ€ν
μμ IE 8
μ΄ν νκ²½μ λν μμΈν μ΄μΌκΈ°λ λ³λ‘ νκ³ μΆμ§ μμΌλ―λ‘ Object.create
λ₯Ό μ¬μ©νμ§ μλ λ°©λ²μ λν μ½λλ₯Ό κ°λ¨νκ² νμμ Github Gist λ§ν¬λ‘ 첨λΆνκ² λ€.
Object.createλ₯Ό μ¬μ©νμ
Object.create
λ©μλλ 첫 λ²μ§Έ μΈμλ‘ μμ±ν κ°μ²΄μ μλ³Έ κ°μ²΄κ° λ κ°μ²΄, λ λ²μ§Έ μΈμλ‘ μλ‘ μμ±ν κ°μ²΄μ μΆκ°ν νλ‘νΌν°λ₯Ό κ°μ²΄ νμ
μΌλ‘ λ°λλ€.
Object.create(proto: Object, properties?: Object);
μ΄λ λ λ²μ§Έ μΈμλ μ νμ¬νμ΄λ©°, λ¨μνκ² { test: 1 }
μ²λΌ λκΈ°λ κ²μ΄ μλλΌ, Object.defineProperties
λ©μλλ₯Ό μ¬μ©ν λ μ²λΌ λ°μ΄ν° μμ μμ μ κ·Ό μμ μλ₯Ό μ§μ ν΄μ€μΌνλ€.
Object.create(User.prototype, {
foo: {
configurable: false,
enumerable: true,
value: 'I am Foo!',
}
});
μμΈν νλ‘νΌν°λ€μ μλ―Έλ MDN Web Docs: Object.definePropertiesμμ νμΈν΄λ³΄λλ‘ νμ.
μ΄ λ©μλμμ μ€μν ν¬μΈνΈλ κ°μ²΄μ νλ‘ν νμ
κ°μ²΄
λ₯Ό μ§μ ν μ μλ€λ κ²μ΄λ©°, μ΄ λ§μΈ μ¦μ¨ κ°μ²΄μ νλ‘ν νμ
체μΈμ λ΄ λ§λλ‘ λ§μ Έμ€ μ μλ€λ κ²μ΄λ€. μ¬μ§μ΄ λμ μΌλ‘ λ³κ²½λ κ°λ₯νλ€.(μ¬μ€ μ΄κ² JSμ λ³νμ μΈ λ©΄β¦)
κ·ΈλΌ μ΄μ Object.create
λ©μλμ νλ‘ν νμ
μ μ¬μ©νμ¬ μμμ νλ² κ΅¬νν΄λ³΄λλ‘ νμ.
function SuperClass (name) {
this.name = name;
}
SuperClass.prototype.say = function () {
console.log(`I am ${this.name}`);
}
μ°μ λΆλͺ¨ ν΄λμ€ μν μ ν SuperClass
μμ±μ ν¨μλ₯Ό μμ±νκ³ , μ΄ ν¨μμ νλ‘ν νμ
κ°μ²΄μ say
λ©μλλ₯Ό μ μνλ€. κ·ΈλΌ μ΄μ μμ ν΄λμ€ μν μ ν μμ±μ ν¨μλ₯Ό ꡬννκ³ , μ΄ λ κ°μ ν¨μμ μμ κ΄κ³λ ν¨κ» μ μν΄λ³΄μ.
function SubClass (name) {
SuperClass.call(this, name);
}
SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;
SubClass.prototype.run = function () {
console.log(`${this.name} is running`);
}
λ μ΄κ²μ κ² λ§μ΄ λ§μ§ κ² κ°μ§λ§, λ§μ νλνλ λ―μ΄λ³΄λ©΄ λ³ κ±° μλ€.
SuperClass.call(this)
Function.prototype.call
λ©μλλ νΈμΆλ ν¨μμ μ€ν 컨ν
μ€νΈλ₯Ό 첫 λ²μ§Έ μΈμλ‘ λ°μ λ
μμΌλ‘ λ³κ²½νλ€. μ¦, this
μ νκ²μ λ³κ²½νλ κ²μ΄λ€.
μ¦, SuperClass.call(this, name)
μ μλ―Έλ λΆλͺ¨ μμ±μ ν¨μμ μμ±μλ₯Ό νΈμΆνλ, μ€ν 컨ν
μ€νΈλ₯Ό μμ μμ±μ ν¨μλ‘ λ³κ²½νλΌλ μλ―Έμ΄λ€. μλ°λ‘ μΉλ©΄ super
λ©μλλ₯Ό νΈμΆνλ κ²κ³Ό λΉμ·ν λλμ΄λκΉ.
νμλ μ΄λ call
λ©μλλ₯Ό μ¬μ©νμ§λ§, λκ° λλ λΆλͺ¨ μμ±μ ν¨μμ μ€ν 컨ν
μ€νΈλ§ λ³κ²½ν΄μ£Όλ©΄ μ₯λ‘μ΄κΈ° λλ¬Έμ apply
λ bind
λ©μλλ₯Ό μ¬μ©ν΄λ μκ΄μλ€.
SubClass.prototype λ³κ²½
κ·Έ ν Object.create
λ©μλλ₯Ό μ¬μ©νμ¬ SuperClass.prototype
κ°μ²΄λ₯Ό μλ³Έ κ°μ²΄λ‘ νλ μλ‘μ΄ κ°μ²΄λ₯Ό μμ±νκ³ , μ΄ κ°μ²΄λ₯Ό SubClass
μ νλ‘ν νμ
κ°μ²΄λ‘ ν λΉν΄μ€λ€. μμ μμ±μ ν¨μμ νλ‘ν νμ
κ°μ²΄μ λΆλͺ¨ μμ±μ ν¨μμ νλ‘ν νμ
κ°μ²΄ κ°μ νλ‘ν νμ
체μΈ, μ½κ² λ§ν΄ λΆλͺ¨ μμ κ΄κ³λ₯Ό λ§λ€μ΄ μ£Όλ κ²μ΄λ€.
SubClass.prorotype.constructor λ³κ²½
μ°λ¦¬λ λΆλͺ¨ μμ±μ ν¨μμ νλ‘ν νμ
κ°μ²΄λ₯Ό ν μ¨ νλ μλ°κΎΈκ³ κ·Έλλ‘ λ³΅μ νκΈ° λλ¬Έμ, μλ‘κ² μμ±ν μμ μμ±μ ν¨μμ νλ‘ν νμ
κ°μ²΄μ constructor
νλ‘νΌν°λ μ¬μ ν λΆλͺ¨ μμ±μ ν¨μμΈ SuperClass
λ₯Ό μ°Έμ‘°νκ³ μλ€.
νμ§λ§ μμ μμ±μ ν¨μμΈ SubClass
λ₯Ό ν΅ν΄ μμ±λ κ°μ²΄κ° SuperClass
λ₯Ό μ¬μ©νμ¬ μμ±λ κ²μ²λΌ μ²λ¦¬λλ©΄ μλλ―λ‘, λ€μ constructor
νλ‘νΌν°λ₯Ό SubClass
λ‘ λ³κ²½ν΄μ€μΌνλ€.
μ΄λ° κ³Όμ λ€μ κ±°μΉλ©΄ λ€μκ³Ό κ°μ κ΄κ³κ° μ±λ¦½λλ€.

μ΄μ νλ² SubClass
μμ±μ ν¨μλ₯Ό μ¬μ©νμ¬ κ°μ²΄λ₯Ό μμ±ν΄λ³΄κ³ , μ λλ‘ λΆλͺ¨ μμ±μ ν¨μμ μμ±λ€μ λ¬Όλ €λ°μλμ§ νμΈν΄λ³΄μ.
const evan = new SubClass('Evan');
console.log(evan);
console.log(evan.__proto__);
console.log(evan.__proto__.__proto__)
SubClass { name: 'Evan' } // μλ° κ°μ²΄
SubClass { constructor: [Function: SubClass], run: [Function] } // μλ° κ°μ²΄μ μλ³Έ κ°μ²΄
SuperClass { say: [Function] } // μλ° κ°μ²΄μ μλ³Έ κ°μ²΄μ μλ³Έ κ°μ²΄
evan
κ°μ²΄λ SubClass
μ νλ‘ν νμ
κ°μ²΄λ₯Ό 볡μ ν΄μ μ μμ μΌλ‘ μμ±λμκ³ , evan
κ°μ²΄μ μλ³Έ κ°μ²΄μ μλ³Έ κ°μ²΄μ μλ³Έ κ°μ²΄λ μ 체μ΄λλμ΄μλ€.
μ¦, evan -> SubClass.prototype -> SuperClass.prototype
μΌλ‘ μ΄μ΄μ§λ νλ‘ν νμ
체μΈμ΄ μμ±λ κ²μ΄λ€. μ΄λ evan
κ°μ²΄μ run
μ΄λ say
λ©μλλ₯Ό νΈμΆνλ©΄, μμμ μΈκΈν νλ‘ν νμ
룩μ
μ ν΅ν΄ μλ³Έ κ°μ²΄μ λ©μλλ₯Ό νΈμΆν μ μλ€.
λ§μΉλ©°
μ΄μ ν¬μ€ν μ μ΄μ΄ μ΄λ²μλ μλ°μ€ν¬λ¦½νΈμμ νλ‘ν νμ μ νμ©ν μμ ν¨ν΄μ λν λ΄μ©μ νλ² λ€λ€λ³΄μλ€.
μμ§ν λ§ν΄μ, νμκ° μ€λ¬΄μμ μ΄λ¬ν ν¨ν΄μ μ¬μ©ν΄μ μμμ ꡬνν΄λ³Έ κ²½νμ κ±°μ μλ€. νμκ° κ°λ°μλ‘ μΌμ μμνκ³ μΌλ§ λμ§ μμ ES6κ° λμ€κΈ°λ νμκ³ , νμλ λΉμ μλ°κ° λ μ΅μνκΈ° λλ¬Έμ μλ‘ μΆκ°λ class
ν€μλμ ν λ» λΉ μ Έμμλ€.
νμ§λ§ μΌμ μμνκ³ λͺ λ μ΄ μ§λλ©΄μ λ κ±°μ μ½λμμ μ΄ μμ ν¨ν΄μ κ½€ λ§μ£ΌμΉκΈ°λ νκ³ , λ©΄μ μμ μ΄λ° ν¨ν΄μ λν΄μ λ¬Όμ΄λ³΄λ κ²½μ°λ μμκΈ° λλ¬Έμ νμ€ν 곡λΆν νμλ μλ κ² κ°λ€.
μ무리 μμ¦ ES5λ₯Ό κ±°μ μ¬μ©νμ§ μλλ€κ³ νμ§λ§, μ¬μ€ μ΄λ° μμ ν¨ν΄μ΄ μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©ν νλ‘κ·Έλ¨ μν€ν μ²μ κ·Όκ°μ΄κΈ°λ νλ λ§μ΄λ€.
μ΄μμΌλ‘ νλ‘ν νμ μ μ¬μ©νμ¬ μμνκΈ° ν¬μ€ν μ λ§μΉλ€.
- νλ‘ν νμ
- μλ°μ€ν¬λ¦½νΈ
- JavaScript
- Prototype
- μλ°μ€ν¬λ¦½νΈ κΈ°μ΄
- νλ‘ νΈμλ κΈ°μ΄
- μλ°μ€ν¬λ¦½νΈ μμ
- μλ°μ€ν¬λ¦½νΈ ν΄λμ€
κ΄λ ¨ ν¬μ€ν 보λ¬κ°κΈ°
![[JS νλ‘ν νμ
] μλ°μ€ν¬λ¦½νΈμ νλ‘ν νμ
νμ΄λ³΄κΈ° [JS νλ‘ν νμ
] μλ°μ€ν¬λ¦½νΈμ νλ‘ν νμ
νμ΄λ³΄κΈ°](/static/c4c3f4bd82adfc1f6422180eedbd4fb0/4e277/thumbnail.png)
[JS νλ‘ν νμ ] μλ°μ€ν¬λ¦½νΈμ νλ‘ν νμ νμ΄λ³΄κΈ°
νλ‘κ·Έλλ°/μλ°μ€ν¬λ¦½νΈ
V8 μμ§μ μ΄λ»κ² λ΄ μ½λλ₯Ό μ€ννλ κ±ΈκΉ?
νλ‘κ·Έλλ°/μλ°μ€ν¬λ¦½νΈ
JavaScriptμ letκ³Ό const, κ·Έλ¦¬κ³ TDZ
νλ‘κ·Έλλ°/μλ°μ€ν¬λ¦½νΈ
λ‘μ° λ λ²¨λ‘ μ΄ν΄λ³΄λ Node.js μ΄λ²€νΈ 루ν
νλ‘κ·Έλλ°/μλ°μ€ν¬λ¦½νΈ![[JavaScript μ€λμ€ μ΄νν° λ§λ€κΈ°] μ€λμ€ μ΄νν°λ‘ λλ§μ μ리 λ§λ€κΈ° [JavaScript μ€λμ€ μ΄νν° λ§λ€κΈ°] μ€λμ€ μ΄νν°λ‘ λλ§μ μ리 λ§λ€κΈ°](/static/026a9fe9c894f201ec1e45217221447c/163a5/thumbnail.jpg)
[JavaScript μ€λμ€ μ΄νν° λ§λ€κΈ°] μ€λμ€ μ΄νν°λ‘ λλ§μ μ리 λ§λ€κΈ°
νλ‘κ·Έλλ°/μ€λμ€