S2 unit2 | 프로토타입, 브라우저 속성 확인 루틴, 객체 속성과 요소

📌 프로토타입

: contructor(생성자) 함수를 가지는 클래스에 자동으로 부여되는 프로퍼티 

클래스에 메서드를 넣을 때, 메서드는 클래스의 prototype 객체 내부에 할당된다. (ES6도 자동으로 할당됨)

prototype 역시 객체이므로 자신의 prototype을 가지는데, 이것이 prototype chain을 생성하게 된다.

---

✔ 프로토타입의 사용

prototype은 클래스에서만 호출이 가능하다.

인스턴스에서는 prototype를 사용할 수 없고, 클래스에서만 사용할 수 있다.

대신, 인스턴스는 __proto__프로퍼티를 통해 함수의 prototype 프로퍼티를 참조한다.

클래스와 그 클래스의 인스턴스를 생성했다.

인스턴스를 보면, prototype은 없고 [[prototype]] 만 있다.

 

확인해봐도 undefined 만 나온다.

 

Student는 student1의 프로토타입 체인에 속해있다.

🔗Object.prototype.isPrototypeOf()

 

---

 

✔ static method (정적 메서드)

: 클래스 내부에서만 사용할 수 있는 메서드. 인스턴스에서 사용이 불가능.

ES5 : 클래스에 바로 정의되는 메서드

ES6 : static 키워드로 정의한 메서드

class와 instance에서 prototype과 constructor의 행동

✔ __proto__

: [[prototype]]에 접근하는 속성

[[prototype]]는 private 연결이므로 직접 접근할 수 없다.

instance는 class의 prototype를 참조하는 __proto__를 가진다.

=> 모든 객체는 생성자 함수로 만들어졌기 때문에(instance) 반드시 __proto__ 프로퍼티를 가진다.

따라서 instance에서도 class의 메서드를 사용할 수 있다.

---

📌 브라우저의 속성 확인 방법

1. 해당 인스턴스의 __proto__가 그 속성 갖는지 확인 => 있다면 종료

2. 해당 인스턴스의 __proto__의 __proto__가 그 속성을 갖는지 확인 => 있다면 종료

3. 인스턴스의 __proto__의 __proto__의 __proto__가 그 속성을 갖는지 확인할 수 없음 => undefined

인스턴스의 __proto__ = class의 prototype

인스턴스의 __proto__의 __proto__ = class의 prototype의 __proto__ = window.Object.prototype

❗ 기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 __proto__는 window.Object.prototype이다.

인스턴스의__proto__의__proto__의 __proto__ = Object.prototype의 __proto__

but, window.Object.prototype의 __proto__는 존재하지 않는다. (__proto__는 null)

---

📌 객체의 속성(attribute)과 요소(property)

속성 (attribute) : 단순한 값 ,정적인 속성

요소 (property) : 속성과 링크(두 객체 간의 연관관계)의 조합, 동적인 속성

ex)

class Student {
    constructor(name, age, grade){
        this.name = name;
        this.age = age;
        this.grade = grade;
        }
    study(){
        console.log(`${this.name}가 공부를 시작합니다`)
        }
}

let student1 = new Student('anna', '17', 'A') //instance

student1 객체의 name은 속성 (단순한 값)

student1 객체의 prototype는 요소 (동적으로 추가가 가능)