[js] 자바스크립트 DeepDive 19장 (6) ~ (10) 요약

* 본 내용은 자바스크립트 DeepDive 내용을 참고하여 정리한 것입니다.

 

19장. 프로토타입 (6) ~ (10)

 

6. 객체 생성 방식과 프로토타입의 결정 (p.280 ~ 284)

- 객체 생성을 하기 위한 방법으로는 다음과 같이 있다.

1. 객체 리터럴을 통한 생성
2. object생성자 함수를 통한 생성
3. 생성자 함수를 통한 생성
4. object.create 메서드
5. 클래스(ES6)

- 이렇게 다양한 방식으로 생성된 모든 객체는 추상 연산 OrdinaryObjectCreate에 의해 생성된다는 공통점.

- 프로토타입은 OrdinaryObjectCreate에 전달되는 인수에 의해 결정됨

- 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정됨.

 

 

● 6.1) 객체 리터럴에 의해 생성된 객체의 프로토타입

- 객체 리터럴에 의해 생성되는 객체의 프로토타입은 object.prototype이다.

 

// 19-24 객체 리터럴에 의해 생성된 객체의 프로토타입

// 추상연산에 의해 object생성자 함수와 object.prototype과 생성된 객체 사이 연결이 됨.
const obj = { x:1 };
// obj객체는 object.prototype을 상속받음.
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty('x')); //true

 

 

● 6.2) object생성자 함수에 의해 생성된 객체의 프로토타입

- object 생성자 함수에 의해 생성되는 객체의 프로토타입은 object.prototype이다.

 

// 19-26 object생성자 함수의 의해 생성된 객체의 프로토타입
const obj = new Object;
obj.x = 1; // object생성자 함수와, object.prototype간의 연결

// object.prototype을 프로토타입으로 가지며, object.prototype을 상속받음.
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty('x')); //true

 

● 6.3) 생성자 함수에 의해 생성된 객체의 프로토타입

- 생성자 함수에 의해 생성되는 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어있는 객체이다.

- 아래 코드에서 const city까지 실행되면, OrdinaryObjectCreate에 의해 생성자 함수와 생성자 함수의 prototype프로퍼티에 바인딩되어있는 객체와 생성된 객체 사이에 연결이 만들어진다.

- 아래 코드에서 region.prototype에 프로퍼티를 추가하여 자식객체가 상속받을 수 있도록 하였다. 그러면 아래 결과 같이 프로토타입에서도 프로퍼티를 추가 및 삭제할 수 있고, 이는 프로토타입 체인에 즉각반영된다.

 

// 19-28 생성자 함수에 의해 생성된 객체의 프로토타입
function region(name) {
    this.name = name;
}

region.prototype.say = function () {
    console.log(`${this.name} is good`);
};

const city = new region ('busan');
city.say();

//// busan is good

 

7. 프로토타입 체인 (p.285 ~ 288)

- 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속과 프로퍼티 검색을 구현하는 메카니즘이다.

- 프로토타입 체인이란, 객체의 프로퍼티에 접근 시 해당 객체에 접근하려는 프로퍼티가 없다면 [[prototype]] 내부 슬롯 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는 것이다.

 

// 19-29
function region(name) {
    this.name = name;
}

region.prototype.say = function () {
    console.log(`${this.name} is good`);
};

const city = new region ('busan');
// hasOwnProperty는 object.prototype의 메소드이다.
console.log(city.hasOwnProperty('name')); // true

Object.getPrototypeOf(city) === region.prototype; // true
Object.getPrototypeOf(region.prototype) === Object.prototype; // true

 

- 위 예제에서, city객체는 object.prototype의 메소드인 hasOwnProperty를 호출할 수 있음.

- 이 의미는 region.prototype뿐만 이나라, object.prototype도 상속받았음을 의미함.

 

● 체인의 종점

- 프로토타입 체인의 최상위에 위치하는 객체는 언제나 object.prototype이므로, 모든 객체는 object.prototype을 상속받는다. 여기서 object.prototype을 프로토타입 체인의 종점이라고 말한다.

- 프로토타입 체인 종점인 object.prototype에서도 프로퍼티를 검색할 수 없을 경우, undefined를 반환한다.

 

console.log(city.seoul) // undefined

 

● 스코프 체인

- 프로퍼티가 아닌 식별자를 검색할 경우, 스코프 체인에서 검색한다.

- 그러므로 스코프 체인은 식별자 검색을 위한 메카니즘이다.

- 스코프 체인과 프로토타입의 체인은 서로 협력하여 식별자와 프로퍼티를 검색하는데 사용된다.

 

 

8. 오버라이딩과 프로퍼티 섀도잉 (p.288 ~ 290)

- 오버라이딩: 상위 클래스가 가지고 있는 메소드를 하위 클래스가 재정의하여 사용하는 것

- 오버로딩: 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메소드를 구현하고 매개변수에 의해 메소드를 구별하여 호출하는 방식. 자바스크립트에서는 arguments객체를 사용하여 구현 가능

- 프로퍼티 섀도잉: 상속 관계에 의해 프로퍼티가 가려지는 현상

 

● 프로토타입 프로퍼티의 추가와 삭제

- 프로토타입 프로퍼티를 변경 또는 삭제하려면 하위 객체를 통해 프로토타입 체인으로 접근하는 것이 아닌, 프로토타입에 직접 접근해야함.

- 즉, 위 예제에서, delete region.prototype.say;라고 직접적으로 입력해주어야 say에 들어간 말인 "busan is good"이 삭제되어 typeError가 출력된다.

 

 

9. 프로토타입의 교체 (p.291 ~ 295)

- 프로토타입은 임의의 다른 객체로 변경할 수 있다. 

- 프로토타입은 객체 간의 상속 관계를 동적으로 변경할 수 있다.

- 프로토타입은 생성자 함수 또는 인스턴스에 의해 교체할 수 있다.

 

● 9.1) 생성자 함수에 의한 프로토타입 교체

- 아래 예시에서, 프로토타입을 object에서 region으로 교체하여 다음과 같은 결과를 얻을 수 있다.
- 프로토타입을 교체하면 constructor프로퍼티와 생성자 함수 간의 연결이 파괴된다. 이를 다시 붙이기 위해서는 교체한 객체 리터럴에 constructor프로퍼티를 추가하여 되살릴 수 있다.

// 19-42 생성자 함수에 의한 프로퍼티 교체
const region = (function () {
    function region(name) {
        this.name = name;
    }

    // 생성자 함수의 prototype프로퍼티를 통해 프로토타입을 교체
    region.prototype = {
        //constructor 프로퍼티와 생성자 함수 간의 연결 설정
        constructor: region,
        say() {
            console.log(`${this.name} is good`);
        }
    };

    return region;
}());

const city = new region('busan');

// constructor프로퍼티는 생성자 함수를 가리킨다.
console.log(city.constructor === region); // true
console.log(city.constructor === Object); //false

 

● 9.2) 인스턴스에 의한 프로토타입 교체

- 프로토타입은 인스턴스의 __proto__접근자 프로퍼티 또는 object.getprototypeOf메소드를 통해 접근할 수 있다. 따라서 이를 통해 프로토타입을 교체할 수 있다.

- 생성자 함수의 prototype프로퍼티에 다른 임의 객체를 바인딩하는 것은 생성될 프로퍼티를 교체하는 것이다. 즉, 이는 이미 생성된 객체의 프로토타입을 교체하는 것이라고 할 수 있다.

 

// 19-45
function region(name) {
    this.name = name;
}
const city = new region ('busan');

// 프로토타입으로 교체할 객체
const country = {
    // constructor프로퍼티와 생성자 함수 간 연결 설정
    constructor:region,
    say() {
        console.log(`${this.name} is good`); // busan is good
    }
};

// 생성자 함수의 prototype프로퍼티와 프로토타입 간 연결 설정
region.prototype = country;

// city객체의 프로토타입을 country객체로 교체
Object.setPrototypeOf(city, country);
city.say();

// constructor프로퍼티가 생성자 함수를 가리킨다.
console.log(country.constructor === region);  // true
console.log(country.constructor === Object);  // false

// 생성자 함수의 prototype프로퍼티가 교체된 프로토타입을 가리킨다.
console.log(region.prototype === Object.getPrototypeOf(city)); // true

- 프로토타입 교체는 번거로우므로, 직접 교체하지 않는 것이 좋다.

- 직접 상속방식이 더욱 안전하며, es6에서 도입된 클래스를 사용하면 더욱 간편하게 상속관계를 구현할 수 있다.

 

 

10.instanceof 연산자 (p.296 ~ 299)

 

● instanceof 연산자

- 이항 연산자

- 좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자(피연산자)

- 우변의 피연산자가 함수가 아닐 경우, TypeError가 발생

객체 instanceof 생성자 함수

- 우변의 생성자 함수와 prototype에 바인딩된 객체가 좌변의 프로토타입 체인 상에 존재하면 true로 평가, 존재하지 않을 경우 false로 평가됨

// 19-48 

// 생성자 함수
function region (name) {
    this.name = name;
}
const city = new region('busan');

//프로토타입으로 교체할 객체
const country = {};

// 프로토타입 교체
Object.setPrototypeOf(city, country);

// region생성자와 country생성자는 연결되어 있지 않음
console.log(region.prototype === country); // false
console.log(city.constructor === city); // false

// country객체를 region생성자 함수의 prototype프로퍼티에 바인딩
region.prototype = country;

// region.prototype이 city객체의 프로토타입 체인 상에 존재하므로 true반환
console.log(city instanceof region); // true

// object.prototype이 city객체의 프로토타입 체인 상에 존재하므로 true반환
console.log(city instanceof Object); // true

 

- instanceof 연산자는 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인함.

- 생성자 함수에 의해 프로토타입이 교체되어 constructor프로퍼티와 생성자 함수 간의 연결이 파괴되어도 생성자 함수의 prototype프로퍼티와 프로토타입 간의 연결은 파괴되지 않으므로 instanceof는 아무런 영향을 받지 않음.

 

 

 

끝.

 

다음 내용: 자바스크립트 DeepDive 19장 (11)~(14) 요약 (p.299~312)