diff --git "a/docs/25_\355\201\264\353\236\230\354\212\244/\354\265\234\354\243\274\354\232\251.md" "b/docs/25_\355\201\264\353\236\230\354\212\244/\354\265\234\354\243\274\354\232\251.md" new file mode 100644 index 00000000..e9bc63ae --- /dev/null +++ "b/docs/25_\355\201\264\353\236\230\354\212\244/\354\265\234\354\243\274\354\232\251.md" @@ -0,0 +1,302 @@ +# πŸ“Œ 25μž₯ 클래슀 + +**TIL 기둝일** : 2023.12.19 (25.1 ~ 25.5) + +## λͺ©μ°¨ + +[1. ν΄λž˜μŠ€λŠ” ν”„λ‘œν† νƒ€μž…μ˜ 문법적 섀탕인가?](#-251-ν΄λž˜μŠ€λŠ”-ν”„λ‘œν† νƒ€μž…μ˜-문법적-섀탕인가) +[2. 클래슀 μ •μ˜](#-252-클래슀-μ •μ˜) +[3. 클래슀 ν˜Έμ΄μŠ€νŒ…](#-253-클래슀-ν˜Έμ΄μŠ€νŒ…) +[4. μΈμŠ€ν„΄μŠ€ 생성](#-254-μΈμŠ€ν„΄μŠ€-생성) +[5. λ©”μ„œλ“œ](#-255-λ©”μ„œλ“œ) + +## πŸ‘‰ 25.1 ν΄λž˜μŠ€λŠ” ν”„λ‘œν† νƒ€μž…μ˜ 문법적 섀탕인가? + +μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ 언어이닀. + +ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ μ–Έμ–΄λŠ” ν΄λž˜μŠ€κ°€ ν•„μš”μ—†λŠ” 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‹€. + +```javascript +// ES5 μƒμ„±μž ν•¨μˆ˜ +var Person = (function () { + function Person(name) { + this.name = name; + } + + // ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ + Person.prototype.sayHi = function () { + console.log(`Hi! My name is ` + this.name); + }; + + // μƒμ„±μž ν•¨μˆ˜ λ°˜ν™˜ + return Person; +})(); + +var me = new Person("Lee"); +me.sayHi(); // Hi! My name is Lee +``` + +ES6에 λ„μž…λœ ν΄λž˜μŠ€λŠ” κΈ°μ‘΄ ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°λ³΄λ‹€ μžλ°”λ‚˜ C#κ³Ό 같은 클래슀 기반 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ° 언어와 맀우 ν‘μ‚¬ν•œ μƒˆλ‘œμš΄ 객체 생성 λ§€μ»€λ‹ˆμ¦˜μ„ μ œμ‹œν•œλ‹€. + +κ·Έλ ‡λ‹€κ³  ES6의 ν΄λž˜μŠ€κ°€ 기쑴의 ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ λͺ¨λΈμ„ νμ§€ν•˜λŠ” 것은 μ•„λ‹ˆλ‹€. 사싀 ν΄λž˜μŠ€λŠ” ν•¨μˆ˜μ΄λ©° κΈ°μ‘΄ ν”„λ‘œν† νƒ€μž… 기반 νŒ¨ν„΄μ„ 클래슀 기반 νŒ¨ν„΄μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•˜λŠ” 문법적 섀탕syntactic sugar 이라고 λ³Ό μˆ˜λ„ μžˆλ‹€. + +ν΄λž˜μŠ€μ™€ μƒμ„±μž ν•¨μˆ˜ λͺ¨λ‘ ν”„λ‘œν† νƒ€μž… 기반의 μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜μ§€λ§Œ, ν΄λž˜μŠ€λŠ” λ”μš± μ—„κ²©ν•˜λ©° μƒμ„±μž ν•¨μˆ˜μ—μ„œλŠ” μ œκ³΅ν•˜μ§€ μ•ŠλŠ” κΈ°λŠ₯도 μ œκ³΅ν•œλ‹€. + +1. 클래슀λ₯Ό `new` μ—°μ‚°μž 없이 ν˜ΈμΆœν•˜λ©΄ μ—λŸ¬κ°€ λ°œμƒν•œλ‹€. + +2. ν΄λž˜μŠ€λŠ” 상속을 μ§€μ›ν•˜λŠ” `extends`와 `super` ν‚€μ›Œλ“œλ₯Ό μ œκ³΅ν•œλ‹€. + +3. ν΄λž˜μŠ€λŠ” ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•œλ‹€. ν•˜μ§€λ§Œ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜λœ μƒμ„±μž ν•¨μˆ˜λŠ” ν•¨μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄, ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ μ •μ˜ν•œ μƒμ„±μž ν•¨μˆ˜λŠ” λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•œλ‹€. + +4. 클래슀 λ‚΄μ˜ λͺ¨λ“  μ½”λ“œμ—λŠ” μ•”λ¬΅μ μœΌλ‘œ `strict mode`κ°€ μ§€μ •λ˜μ–΄ μ‹€ν–‰λ˜λ©° strict modeλ₯Ό ν•΄μ œν•  수 μ—†λ‹€. + +5. 클래슀의 `constructor`, ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ, 정적 λ©”μ„œλ“œλŠ” λͺ¨λ‘ ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈ [[Enumerable]]의 값이 falseλ‹€. λ‹€μ‹œ 말해, μ—΄κ±°λ˜μ§€ μ•ŠλŠ”λ‹€. + +이와 같이 ν΄λž˜μŠ€λŠ” μƒμ„±μž ν•¨μˆ˜ 기반의 객체 생성 방식보닀 κ²¬κ³ ν•˜κ³  λͺ…λ£Œν•˜λ‹€. λ”°λΌμ„œ 문법적 섀탕이라고 λ³΄κΈ°λ³΄λ‹€λŠ” **μƒˆλ‘œμš΄ 객체 생성 λ§€μ»€λ‹ˆμ¦˜**이라 λ³΄λŠ” 것이 μ’€ 더 ν•©λ‹Ήν•˜λ‹€. + +## πŸ‘‰ 25.2 클래슀 μ •μ˜ + +ν΄λž˜μŠ€λŠ” `class` ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ •μ˜ν•œλ‹€. 클래슀 이름은 μƒμ„±μž ν•¨μˆ˜μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ 파슀칼 μΌ€μ΄μŠ€λ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€. + +ν΄λž˜μŠ€λŠ” ν•¨μˆ˜μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ ν‘œν˜„μ‹μœΌλ‘œ μ •μ˜ν•  수 있으며, μ΄λŠ” ν΄λž˜μŠ€κ°€ κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 일급 κ°μ²΄λΌλŠ” 것을 μ˜λ―Έν•œλ‹€. λ”°λΌμ„œ λ‹€μŒκ³Ό 같은 νŠΉμ§•μ„ κ°–λŠ”λ‹€. + +- 무λͺ…μ˜ λ¦¬ν„°λŸ΄λ‘œ 생성할 수 μžˆλ‹€. 즉 λŸ°νƒ€μž„μ— 생성이 κ°€λŠ₯ν•˜λ‹€. + +- λ³€μˆ˜λ‚˜ μžλ£Œκ΅¬μ‘°μ— μ €μž₯ κ°€λŠ₯ν•˜λ‹€.. + +- ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ 전달할 수 μžˆλ‹€. + +- ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€. + +--- + +클래슀 λͺΈμ²΄μ—μ„œ μ •μ˜ν•  수 μžˆλŠ” λ©”μ„œλ“œλŠ” `constructor`(μƒμ„±μž), ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ, 정적 λ©”μ„œλ“œ μ„Έ 가지가 μžˆλ‹€. + +```javascript +class Person { + // μƒμ„±μž + constructor(name) { + // μΈμŠ€ν„΄μŠ€ 생성 및 μ΄ˆκΈ°ν™” + this.name = name; + } + + // ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ + sayHi() { + console.log(`Hi! My name is ${this.name}`); + } + + // 정적 λ©”μ„œλ“œ + static sayHello() { + console.log("Hello!"); + } +} + +const me = new Person("Lee"); + +// μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œνΌν‹° μ°Έμ‘° +console.log(me.name); // Lee +// ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ 호좜 +me.sayHi(); // Hi! My name is Lee +// 정적 λ©”μ„œλ“œ 호좜 +Person.sayHello(); // Hello! +``` + +ν΄λž˜μŠ€μ™€ μƒμ„±μž ν•¨μˆ˜μ˜ μ •μ˜ 방식을 λΉ„κ΅ν•˜λ©΄ λ‹€μŒκ³Ό κ°™λ‹€. + +![](https://velog.velcdn.com/images/wuzoo/post/684b6601-b86b-4a93-b7cc-3927e934a822/image.png) + +## πŸ‘‰ 25.3 클래슀 ν˜Έμ΄μŠ€νŒ… + +ν΄λž˜μŠ€λŠ” ν•¨μˆ˜λ‘œ ν‰κ°€λœλ‹€. + +```javascript +class Person {} + +console.log(typeof Person); // function +``` + +클래슀 μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜ν•œ ν΄λž˜μŠ€λŠ” ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό 같이 μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ •, 즉 λŸ°νƒ€μž„ 이전에 λ¨Όμ € ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체λ₯Ό μƒμ„±ν•œλ‹€. μ΄λ•Œ ν΄λž˜μŠ€κ°€ ν‰κ°€λ˜μ–΄ μƒμ„±λœ ν•¨μˆ˜ κ°μ²΄λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œμ„œ ν˜ΈμΆœν•  수 μžˆλŠ” ν•¨μˆ˜, 즉 constructor이닀. + +클래슀 선언문은 마치 ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” κ²ƒμ²˜λŸΌ λ³΄μ΄λ‚˜ 그렇지 μ•Šλ‹€. + +```javascript +const Person = ""; + +{ + // ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ ''이 좜λ ₯λ˜μ–΄μ•Ό ν•œλ‹€. + console.log(Person); + // Reference: Cannot access 'Person' before initialization + + // 클래슀 μ„ μ–Έλ¬Έ + class Person {} +} +``` + +λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ ν•΄λ‹Ή μŠ€μ½”ν”„μ— `Person` μ‹λ³„μžκ°€ λ“±λ‘λ˜μ§€ μ•Šμ•˜μœΌλ―€λ‘œ μ „μ—­ λ³€μˆ˜μ˜ Person을 좜λ ₯ν•˜κ² μ§€λ§Œ, 클래슀 선언문이 ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ—¬ 아직 μ΄ˆκΈ°ν™”λ˜μ§€ μ•Šμ•˜λ‹€λŠ” **"μΌμ‹œμ  μ‚¬κ°μ§€λŒ€"**λ₯Ό μ˜λ―Έν•˜λŠ” 문ꡬ가 좜λ ₯λœλ‹€. + +var, let, const, function, class ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ„ μ–Έλœ λͺ¨λ“  μ‹λ³„μžλŠ” ν˜Έμ΄μŠ€νŒ…λœλ‹€. + +## πŸ‘‰ 25.4 μΈμŠ€ν„΄μŠ€ 생성 + +ν΄λž˜μŠ€λŠ” μƒμ„±μž ν•¨μˆ˜μ΄λ©° 항상 `new` μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœλ˜μ–΄ μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•œλ‹€. + +```javascript +class Person {} + +// μΈμŠ€ν„΄μŠ€ 생성 +const me = new Person(); +console.log(me); // Person {} +``` + +ν΄λž˜μŠ€λŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜λŠ” 것이 μœ μΌν•œ 쑴재 μ΄μœ μ΄λ―€λ‘œ, `new` μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ§€ μ•ŠμœΌλ©΄ μ—λŸ¬κ°€ λ°œμƒν•œλ‹€. + +```javascript +class Person {} + +const me = Person(); +// TypeError: Class constructor Person cannot be invoked without 'new' +``` + +## πŸ‘‰ 25.5 λ©”μ„œλ“œ + +### 25.5.1 constructor + +`constructor`λŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜κ³  μ΄ˆκΈ°ν™”ν•˜κΈ° μœ„ν•œ νŠΉμˆ˜ν•œ λ©”μ„œλ“œλ‹€. constructorλŠ” 이름을 λ³€κ²½ν•  수 μ—†λ‹€. + +```javascript +class Person { + // μƒμ„±μž + constructor(name) { + this.name = name; + } +} +``` + +ν΄λž˜μŠ€κ°€ μƒμ„±ν•œ μΈμŠ€ν„΄μŠ€μ˜ λ‚΄λΆ€λ₯Ό λ“€μ—¬λ‹€λ³΄μž. + +```javascript +// μΈμŠ€ν„΄μŠ€ 생성 +const me = new Person("Lee"); +console.log(me); +``` + +![](https://velog.velcdn.com/images/wuzoo/post/25f04bf1-4a02-46e1-b5da-37fa9de3973f/image.png) + +Person 클래슀의 constructor λ‚΄λΆ€μ—μ„œ this에 μΆ”κ°€ν•œ name ν”„λ‘œνΌν‹°κ°€ ν΄λž˜μŠ€κ°€ μƒμ„±ν•œ μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œνΌν‹°λ‘œ μΆ”κ°€λœ 것을 확인할 수 μžˆλ‹€. 즉, μƒμ„±μž ν•¨μˆ˜μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ constructor λ‚΄λΆ€μ—μ„œ this에 μΆ”κ°€ν•œ ν”„λ‘œνΌν‹°λŠ” μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°κ°€ λœλ‹€. constructor λ‚΄λΆ€μ˜ thisλŠ” μƒμ„±μž ν•¨μˆ˜μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ ν΄λž˜μŠ€κ°€ μƒμ„±ν•œ μΈμŠ€ν„΄μŠ€λ₯Ό 가리킨닀. + +μΈμŠ€ν„΄μŠ€λ₯Ό 생성할 λ•Œ 클래슀 μ™ΈλΆ€μ—μ„œ μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°μ˜ μ΄ˆκΈ°κ°’μ„ μ „λ‹¬ν•˜λ €λ©΄ λ‹€μŒκ³Ό 같이 `constructor`에 λ§€κ°œλ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³  μΈμŠ€ν„΄μŠ€λ₯Ό 생성할 λ•Œ μ΄ˆκΈ°κ°’μ„ μ „λ‹¬ν•œλ‹€. μ΄λ•Œ μ΄ˆκΈ°κ°’μ€ constructor의 λ§€κ°œλ³€μˆ˜μ—κ²Œ μ „λ‹¬λœλ‹€. + +### 25.5.2 ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ + +클래슀 λͺΈμ²΄μ— μ •μ˜ν•œ λ©”μ„œλ“œλŠ” μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성 λ°©μ‹κ³ΌλŠ” λ‹€λ₯΄κ²Œ 클래슀의 `prototype` ν”„λ‘œνΌν‹°μ— λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•˜μ§€ μ•Šμ•„λ„ 기본적으둜 ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œκ°€ λœλ‹€. + +```javascript +class Person { + // μƒμ„±μž + constructor(name) { + this.name = name; + } + + // ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ + sayHi() { + console.log(`Hi! My name is ${this.name}`); + } +} + +const me = new Person("Lee"); +me.sayHi(); // Hi! My name is Lee +``` + +### 25.5.3 정적 λ©”μ„œλ“œ + +정적static λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜μ§€ μ•Šμ•„λ„ ν˜ΈμΆœν•  수 μžˆλŠ” λ©”μ„œλ“œλ₯Ό λ§ν•œλ‹€. + +μƒμ„±μž ν•¨μˆ˜μ˜ 경우 정적 λ©”μ„œλ“œλ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ‹€μŒκ³Ό 같이 λͺ…μ‹œμ μœΌλ‘œ μƒμ„±μž ν•¨μˆ˜μ— λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•΄μ•Ό ν•œλ‹€. + +```javascript +// μƒμ„±μž ν•¨μˆ˜ +function Person(name) { + this.name = name; +} + +// 정적 λ©”μ„œλ“œ +Person.sayHi = function () { + console.log("Hi!"); +}; + +Person.sayHi(); // Hi! +``` + +ν΄λž˜μŠ€μ—μ„œλŠ” λ©”μ„œλ“œμ— `static` ν‚€μ›Œλ“œλ₯Ό 뢙이면 정적 λ©”μ„œλ“œκ°€ λœλ‹€. + +```javascript +class Person { + // ... + static sayHi() { + console.log("Hi"); + } +} +``` + +정적 λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€λ‘œ ν˜ΈμΆœν•  수 μ—†λ‹€. μΈμŠ€ν„΄μŠ€μ˜ ν”„λ‘œν† νƒ€μž… 체인 μƒμ—λŠ” ν΄λž˜μŠ€κ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μΈμŠ€ν„΄μŠ€λ‘œ 클래슀의 λ©”μ„œλ“œλ₯Ό 상속받을 수 μ—†λ‹€. + +```javascript +// μΈμŠ€ν„΄μŠ€ 생성 +const me = new Person("Lee"); +me.sayHi(); // TypeError: me.sayHi is not a function +``` + +### 25.5.4 정적 λ©”μ„œλ“œμ™€ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œμ˜ 차이 + +두 λ©”μ„œλ“œμ˜ μ°¨μ΄λŠ” λ‹€μŒκ³Ό κ°™λ‹€. + +1. 정적 λ©”μ„œλ“œμ™€ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλŠ” μžμ‹ μ΄ 속해 μžˆλŠ” ν”„λ‘œν† νƒ€μž… 체인이 λ‹€λ₯΄λ‹€. +2. 정적 λ©”μ„œλ“œλŠ” 클래슀둜 ν˜ΈμΆœν•˜κ³  ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€λ‘œ ν˜ΈμΆœν•œλ‹€. +3. 정적 λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•  수 μ—†μ§€λ§Œ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•  수 μžˆλ‹€. + +```javascript +class Square { + // 정적 λ©”μ„œλ“œ + static area(width, height) { + return width * height; + } +} + +console.log(Square.area(10, 10)); // 100 +``` + +정적 λ©”μ„œλ“œ areaλŠ” 2개의 인수λ₯Ό 전달받아 면적을 κ³„μ‚°ν•œλ‹€. μ΄λ•Œ μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•˜μ§€ μ•ŠλŠ”λ‹€. λ§Œμ•½ μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•΄μ•Ό ν•œλ‹€λ©΄ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•œλ‹€. + +```javascript +class Square { + constructor(width, height) { + this.width = width; + this.height = height; + } + + // ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ + area() { + return this.width * this.height; + } +} + +const square = new Square(10, 10); +console.log(square.area()); // 100 +``` + +22절 "ν•¨μˆ˜ 호좜 방식과 this 바인딩"μ—μ„œ μ‚΄νŽ΄λ³΄μ•˜λ“―μ΄ λ©”μ„œλ“œ λ‚΄λΆ€μ˜ `this`λŠ” λ©”μ„œλ“œλ₯Ό μ†Œμœ ν•œ 객체가 μ•„λ‹Œ λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ 객체, 즉 λ©”μ„œλ“œ 이름 μ•žμ˜ λ§ˆμΉ¨ν‘œ(.) μ—°μ‚°μž μ•žμ— κΈ°μˆ ν•œ 객체에 λ°”μΈλ”©λœλ‹€. + +μœ„ 예제의 경우 `square` 객체둜 ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œ `area`λ₯Ό ν˜ΈμΆœν–ˆκΈ° λ•Œλ¬Έμ— area λ‚΄λΆ€μ˜ thisλŠ” square 객체λ₯Ό 가리킨닀. + +정적 λ©”μ„œλ“œλŠ” 클래슀둜 ν˜ΈμΆœν•΄μ•Ό ν•˜λ―€λ‘œ 정적 λ©”μ„œλ“œ λ‚΄λΆ€μ˜ thisλŠ” μΈμŠ€ν„΄μŠ€κ°€ μ•„λ‹Œ 클래슀λ₯Ό 가리킨닀. 즉, ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œμ™€ 정적 λ©”μ„œλ“œ λ‚΄λΆ€μ˜ this 바인딩이 λ‹€λ₯΄λ‹€. + +λ©”μ„œλ“œ λ‚΄λΆ€μ—μ„œ μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•  ν•„μš”κ°€ μžˆλ‹€λ©΄ `this`λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•˜λ―€λ‘œ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•˜μ§€λ§Œ, μΈμŠ€ν„΄μŠ€ ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•΄μ•Ό ν•  ν•„μš”κ°€ μ—†λ‹€λ©΄ thisλ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ²Œ λœλ‹€. +λ”°λΌμ„œ thisλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•œ ν›„ μΈμŠ€ν„΄μŠ€λ‘œ ν˜ΈμΆœν•΄μ•Ό ν•˜λ―€λ‘œ thisλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 정적 λ©”μ„œλ“œλ‘œ μ •μ˜ν•˜λŠ” 것이 μ’‹λ‹€. + +### 25.5.5 ν΄λž˜μŠ€μ—μ„œ μ •μ˜ν•œ λ©”μ„œλ“œμ˜ νŠΉμ§• + +1. `function` ν‚€μ›Œλ“œλ₯Ό μƒλž΅ν•œ λ©”μ„œλ“œ μΆ•μ•½ ν‘œν˜„μ„ μ‚¬μš©ν•œλ‹€. +2. 객체 λ¦¬ν„°λŸ΄κ³ΌλŠ” λ‹€λ₯΄κ²Œ ν΄λž˜μŠ€μ— λ©”μ„œλ“œλ₯Ό μ •μ˜ν•  λ•ŒλŠ” 콀마(,)κ°€ ν•„μš” μ—†λ‹€. +3. μ•”λ¬΅μ μœΌλ‘œ `strict mode`둜 μ‹€ν–‰λœλ‹€. +4. `for ... in`λ¬Έμ΄λ‚˜ `Object.keys` λ©”μ„œλ“œ λ“±μœΌλ‘œ μ—΄κ±°ν•  수 μ—†λ‹€. 즉, ν”„λ‘œνΌν‹°μ˜ μ—΄κ±°κ°€ λΆˆκ°€λŠ₯ν•˜λ©° ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈ [[Enumerable]]의 값이 falseλ‹€. +5. λ‚΄λΆ€ λ©”μ„œλ“œλŠ” [[Constructor]]λ₯Ό 갖지 μ•ŠλŠ” non-constructorλ‹€. λ”°λΌμ„œ `new` μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•  수 μ—†λ‹€.