CodeStates/learning contents

S2) Unit 2. [JS] ν”„λ‘œν† νƒ€μž…

Jieunny 2023. 1. 13. 14:07

πŸ“Œ JSλŠ” ν”„λ‘œν† νƒ€μž… 기반의 언어이닀.

πŸ“£ ν”„λ‘œν† νƒ€μž…

βœ”οΈ μ›ν˜•μ΄λΌλŠ” 뜻 (객체의 μ›ν˜•, 즉 객체의 λΆ€λͺ¨)
βœ”οΈ κ°μ²΄λŠ” ν”„λ‘œνΌν‹°λ₯Ό κ°€μ§ˆ 수 μžˆλŠ”λ°, ν”„λ‘œν† νƒ€μž… μ΄λΌλŠ” ν”„λ‘œνΌν‹°λŠ” 객체가 생성될 λ•Œ ν”„λ‘œν† νƒ€μž…μ— μ €μž₯된 속성듀이 κ·Έ 객체에 μ—°κ²°λœλ‹€.
βœ”οΈ λͺ¨λ“  κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž…μ— μ ‘κ·Όν•  수 μžˆλ‹€.

πŸ“£ ν”„λ‘œν† νƒ€μž…κ³Ό 클래슀

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 μž μ— λ“€μ—ˆμŠ΅λ‹ˆλ‹€`);
  }
}

let kimcoding = new Human('κΉ€μ½”λ”©', 30);

// μ‹€μŠ΅ν•΄λ³΄μ„Έμš”
Human.prototype.constructor === Human; 		// true
Human.prototype === kimcoding.__proto__; 	// true
Human.prototype.sleep === kimcoding.sleep;	// true

➰ Human 클래슀의 μƒμ„±μž ν•¨μˆ˜λŠ” Human이닀
➰ Human 클래슀의 ν”„λ‘œν† νƒ€μž…μ€ Human 클래슀의 μΈμŠ€ν„΄μŠ€μΈ kimcoding의 __proto__ 이닀.
βž• __proto__

더보기

μƒˆλ‘œμš΄ 객체λ₯Ό 생성할 λ•Œ 객체의 ν”„λ‘œνΌν‹°μ™€ ν•¨κ»˜ __proto__ ν”„λ‘œνΌν‹°κ°€ 같이 μƒμ„±λœλ‹€.

__proto__λŠ” kimcodingμ΄λΌλŠ” 객체λ₯Ό μƒμ„±ν•œ Human 객체의 prototype 객체λ₯Ό 가리킨닀.

➰ Human 클래슀의 sleep λ©”μ„œλ“œλŠ” ν”„λ‘œν† νƒ€μž…μ— 있으며,
Human 클래슀의 μΈμŠ€ν„΄μŠ€μΈ kimcodingμ—μ„œ kimcoding.sleep으둜 μ‚¬μš©ν•  수 μžˆλ‹€.

βœ”οΈ Human ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€, ν”„λ‘œν† νƒ€μž…μ˜ 관계


βœ”οΈ Array ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€, ν”„λ‘œν† νƒ€μž…μ˜ 관계

μƒμ†μ˜ 경우

✏️ .prototype은 'μ•„λž˜'둜, .__proto__λŠ” 'μœ„'둜 라고 μƒκ°ν•˜μž.

πŸ“£ ν”„λ‘œν† νƒ€μž… 체인

βœ”οΈ JSμ—μ„œ 상속을 κ΅¬ν˜„ν•  λ•Œ ν”„λ‘œν† νƒ€μž… 체인을 μ‚¬μš©ν•œλ‹€.

// Human 클래슀
let kimcoding = new Human('κΉ€μ½”λ”©', 30);

// 속성
kimcoding.age;
kimcoding.gender;
// λ©”μ„œλ“œ
kimcoding.eat();
kimcoding.sleep();


// Student 클래슀
let parkhacker = new Student('박해컀', 22);

// 속성
parkhacker.grade;
// λ©”μ„œλ“œ
parkhacker.learn();

➰ Student ν΄λž˜μŠ€λŠ” Human 클래슀 + 좔가적인 νŠΉμ§•
➰ λΆ€λͺ¨ 클래슀(Human) / μžμ‹ 클래슀(Student) => μ΄λ ‡κ²Œ λ¬Όλ €λ°›λŠ” 과정이 상속
➰ JSμ—μ„œλŠ” extends와 super ν‚€μ›Œλ“œλ₯Ό 톡해 상속을 κ΅¬ν˜„ν•  수 μžˆλ‹€.

// Person 클래슀
class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  };

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}


// Teacher 클래슀
class Teacher extends Person {
      constructor(first, last, age, gender, interests, subject, grade) {
          super(first, last, age, gender, interests);

          // subject and grade are specific to Teacher
          this.subject = subject;
          this.grade = grade;
  	}
}

➰ super() : μƒμœ„ 클래슀의 μƒμ„±μžλ₯Ό ν˜ΈμΆœν•˜μ—¬ super()의 λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 μƒμœ„ 클래슀의 멀버λ₯Ό 상속받을 수 μžˆλŠ” μ½”λ“œ
➰ Teacher의 μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜λ©΄ μ˜λ„ν•œλŒ€λ‘œ Teacher와 Person μ–‘ μͺ½μ˜ λ©”μ†Œλ“œμ™€ 속성을 μ‚¬μš©ν•  수 μžˆλ‹€.

✏️ 문제

let div = document.createElement('div');

div.__proto__.__proto__	// HTMLElement
div.__proto__.__proto__.__proto__// Element

✏️ 문제

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 μž μ— λ“€μ—ˆμŠ΅λ‹ˆλ‹€`);
  }
}

let kimcoding = new Human('κΉ€μ½”λ”©', 30);

➰ Human은 μ΅œμƒμœ„ 클래슀둜써 λΆ€λͺ¨ ν΄λž˜μŠ€κ°€ μ—†λ‹€. (❌)
-> μ΅œμƒμœ„ ν΄λž˜μŠ€λŠ” Object둜, Human의 λΆ€λͺ¨ ν΄λž˜μŠ€λŠ” Object 이닀.

✏️ 문제

let div = document.createElement('div');
document.body.append(div);
div.textContent = 'μ½”λ“œμŠ€ν…Œμ΄μΈ μ—μ„œλŠ” λͺ°μž…μ˜ 즐거움을 λŠλ‚„ 수 μžˆμŠ΅λ‹ˆλ‹€.';
div.addEventListener('click', () => console.log('λͺ°μž…을 ν•˜λ©΄ λ†€λΌμš΄ 일이 μƒκΉλ‹ˆλ‹€.'));

➰ EventTarget의 prototype에 addEventListener λ©”μ„œλ“œκ°€ μžˆλ‹€.
divλŠ” HTMLDivElement의 μΈμŠ€ν„΄μŠ€μ΄κ³  EventTarget을 μƒμ†λ°›μ•˜κΈ° λ•Œλ¬Έμ— addEventListenerλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.
보톡 클래슀의 μΈμŠ€ν„΄μŠ€λŠ” new ν‚€μ›Œλ“œλ‘œ μƒμ„±ν•˜μ§€λ§Œ, DOMμ—μ„œλŠ” createElementλ₯Ό μ‚¬μš©ν•œλ‹€.

✏️ 문제

class Human {
    constructor(name, age){
        this.name = name; 
        this.age = age;
    }
    sleep(){ return `${this.name}이(κ°€) μž μ„ μž‘λ‹ˆλ‹€.`}
}

class Student extends Human{
    constructor(name, age, grade){
        super(name, age);
        this.grade = grade;
    }
    study(num){
        this.grade = this.grade + num;
        return `${this.name}의 성적이 ${num}만큼 올라 ${this.grade}이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.`
    }
}

class ForeignStudent extends Student{
    constructor(name, age, grade, country){
        super(name, age, grade);
        this.country = country;
    }
    speak(){
        return `${this.country} μ–Έμ–΄λ‘œ μˆ˜μ—…μ„ μ§„ν–‰ν•©λ‹ˆλ‹€.`
    }
}

let americanStudent = new ForeignStudent('jake', 23, 80, 'λ―Έκ΅­');

➰ ForeignStudent의 λΆ€λͺ¨ ν΄λž˜μŠ€λŠ” Student, Human 두 κ°œμ΄λ‹€.