JavaScript 예습

19장 프로토타입

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다.

자바스크립트를 이루고 있는 거의 모든 것이 객체다.

원시타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식)은 모두 객체다.

19.1 객체 지향 프로그래밍

전통적 명령형 프로그래밍

프로그램을 명렁어 또는 함수의 목록으로 보는, 절차지향적 관점

객체지향 프로그래밍

여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임.

전통적 명령형 프로그래밍 관점에서 벗어나려함.

속성 attribute/ property

실체(사물이나 개념)을 인식하기 위해서, 실체는 특징이나 성질을 나타내는 속성을 가지고 있다.

예) 사람

사람은 이름, 주소, 성별, 나이 ... 등의 속성을 가진다.

"이름은 강희고 성별은 여자고 나이는 20대인 사람" 과 같이 속성을 구체적으로 표현하면,

특정 사람과 다른 사람을 구별하여 인식할 수 있다.

추상화 abstraction

다양한 속성 중에서 프로그래밍에 필요한 속성만 간추려 내어 표현하는 것

예) 사람의 속성은 매우 다양한데, 그 중 이름, 성별, 나이만 가지고 사람을 표현하는 것

객체 object

속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조
상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조

객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.

원Circle을 객체로 만들어 보자.

  const circle = {
    radius: 5, // 반지름
    getDiameter() {
      // 원의 지름
      return 2 * this.radius;
    }
  };
  console.log(circle); // { radius: 5, getDiameter: [Function: getDiameter] }

  console.log(circle.getDiameter()); // 10

객체의 상태를 나타내는 데이터와

상태 데이터를 조작할 수 있는 동작을

하나의 논리적인 단위로 묶어서 생각한다.

객체는

자신의 고유한 기능을 수행하면서 다른 객체와 관계성을 가짐
다른 객체와 메시지를 주고 받거나 데이터를 처리함
다른 객체의 상태 데이터나 동작을 상속받아 사용

19.2 상속과 프로토타입

상속 inheritance는 객체지향 프로그래밍의 핵심 개념

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

생성자 함수가 프로퍼티 값으로 함수를 가지는 경우

// 생성자 함수
  function Circle(radius) {
    this.radius = radius;
    this.getArea = function () {
      // getArea 메서드
      return Math.PI * this.radius ** 2;
    };
  }
  const circle1 = new Circle(1);
  const circle2 = new Circle(2);

  // Circle 생성자 함수는 함수 인스턴스를 생성할 때마다
  // 동일한 동작을 하는 getArea 메서드를 중복 생성하고, 모든 인스턴스가 중복 소유한다.
  console.log(circle1.getArea === circle2.getArea); // false

생성자 함수는 모든 인스턴스가 동일한 내용의 메서드를 가지게 중복 생성해서는 안된다.

getArea 메서드는 모든 인스턴스가 동일한 내용의 메서드를 사용하므로

단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.

프로토타입을 기반으로 상속을 구현

// 생성자 함수
  function Circle(radius) {
    this.radius = radius;
  }
  Circle.prototype.getArea = function () {
    return Math.PI * this.radius ** 2;
  };

  // 인스턴스 생성
  const circle1 = new Circle(1);
  const circle2 = new Circle(2);

  // Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 
  // 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
  // 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
  console.log(circle1.getArea === circle2.getArea); // true

Circle 생성자 함수가 생성한 모든 인스턴스는

자신의 프로토타입, 즉 상위 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받는다.

Circle.prototype은 공유제!!

19.3 프로토타입 객체

프로토타입 객체, 즉 프로토타입

객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다.

프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공한다.

[[Prototype]]

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다.

이 내부 슬롯은 프로토타입의 참조다.

[[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다.

즉, 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정된다.

프로토타입

모든 객체는 하나의 프로토타입을 가진다.

그리고 모든 프로토타입은 생성자 함수랑 연결되어있다.

[[Prototype]] 내부 슬롯에 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 자신의 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 간접적으로 접근
프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근
생성자 함수는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근

19.3.1 proto 접근자 프로퍼티

모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

const person = { name: 'Lee' };

person의 프로토타입인 Object.prototype을 확인한 결과는 다음이다.

1. proto 는 접근자 프로퍼티다

[[Prototype]] 내부 슬롯에 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 간접적으로 [[Prototype]] 내부 슬롯의 값, 즉 프로토타입에 접근할 수 있다.

*접근자 프로퍼티는 자체적으로 값을 가지지 않고, 다른 데이터 프로퍼티 값을 읽거나 저장할 때 사용하는 접근자 함수다. 즉, [[Get]], [[Set]] 프로퍼티 어트리뷰트로 구성되어있다.

접근자 프로퍼티로 프로토타입에 접근

내부적으로 __proto__ 접근자 프로퍼티의 getter 함수가 호출된다.

접근자 프로퍼티를 통해 새로운 프로토타입을 할당

내부적으로 __proto__ 접근자 프로퍼티의 setter 함수가 호출된다.

2. proto 접근자 프로퍼티는 상속을 통해 사용된다.

__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라, Object.prototype의 프로퍼티다.

모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.

Object.prototype

모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여있다.

자바스크립트 엔진은 프로퍼티에 접근하려고 할 때, 해당 객체에 프로퍼티가 없다면 __proto__ 접근자가 가리키는 참조를 따라 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.

프로토타입 체인의 종점, 프로토타입 체인의 최상위 객체는 Object.prototype이다.

이 객체의 프로퍼티와 메서드는 모든 객체에게 상속된다.

3. proto 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

[[Prototype]] 내부 슬롯의 값, 즉 프로토타입에 접근하기 위해 접근자 프로퍼티를 사용하는 이유

상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지

위와 같이 서로가 자신의 프로토타입이 되면 프로토타입에 종점이 존재하지 않아서 계속해서 순환 참조를 하게된다.

따라서 프로토타입 체인은 단방향 링크드 리스트로 구현해야 한다.

__proto__ 접근자 프로퍼티는 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입이 만들어지지 않게 에러를 발생시킨다.

4. proto 접근자 프로퍼티를 코드 내에 직접 사용하는 것은 권장하지 않는다

__proto__ 접근자 프로퍼티는 ES5까지 비표준

ES6에서 표준으로 채택함.

모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아님.

직접 상속을 한 경우, Object.prototype을 상속받지 않을 수도 있어서 __proto__를 사용할 수 없다.

따라서 __proto__접근자 프로퍼티 대신 다음 메서드를 사용하는게 좋다.

프로토타입 참조 : Object.getPrototypeOf
프로토타입 교체 : Object.setPrototypeOf

  const obj = {};
  const parent = { x: 1 };

// 프로토타입 참조
  Object.getPrototypeOf(obj); // obj.__proto__; 와 동일
// 프로토타입 교체
  Object.setPrototypeOf(obj, parent); // obj.__proto__ = parent; 와 동일

19.3.2 함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

non-constructor 인 화살표 함수와 ES6 메서드 축약표현으로 정의한 메서드는 prototype을 소유하지 않는다.

prototype 프로퍼티와 proto 접근자 프로퍼티

__proto__ 접근자 프로퍼티

모든 객체가 가지고 있음. Object.prototype으로부터 상속받음

객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용

prototype 프로퍼티

함수 객체만이 가지고 있음, 생성자 함수가 가지고 있음

생성자 함수가 자신이 생성할 인스턴스의 프로토타입을 할당하기 위해 사용

이 두가지 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

  function Person(name) {
    this.name = name;
  }
  const me = new Person('Lee');

  console.log(Person.prototype === me.__proto__); // true

19.3.3 프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 갖는다

이 constructor 프로퍼티는 (prototype 프로퍼티로 자신을 참조하고 있는) 생성자 함수를 가리킨다.

  function Person(name) {
    this.name = name;
  }
  const me = new Person('Lee');

  console.log(me.constructor === Person); // true

이때 me 객체는 프로토타입의 constructor 프로퍼티를 통해 생성자 함수와 연결된다.

me 객체는 프로토타입인 Person.prototype의 constructor 프로퍼티를 상속받아 사용한다.

19.4 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

리터럴 표기법으로 생성된 객체도 프로토타입이 존재한다.

하지만 리터럴 표기법에 의해 생성된 객체는 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 함수는 아니다.

객체 리터럴

  const obj = {};
  
  // obj 객체는 객체 리터럴로 생성됨
  // obj 객체의 constructor 프로퍼티는 Object 생성자 함수와 연결됨
  console.log(obj.constructor === Object); // true

Object 생성자 함수 호출과 객체 리터럴의 평가는

추상 연산 OrdinaryObjectCreate를 호출하여 빈 객체를 생성하는 점은 동일하지만

new.target의 확인이나 프로퍼티를 추가하는 처리 등 세부 내용은 다르다.

따라서 객체 리터럴에 의해 생성된 객체는 Object 생성자 함수가 생성한 객체가 아니다.

함수 객체

함수 선언문과 함수 표현식은 Function 생성자 함수가 생성하지 않는다.

하지만 constructor 프로퍼티는 Function 생성자 함수를 가리킨다.

리터럴 표기법으로 생성된 객체도 상속을 위해 프로토타입이 필요하다.

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.

리터럴 표기법	생성자 함수	프로토타입
객체 리터럴	Object	Object.prototype
함수 리터럴	Function	Function.prototype
배열 리터럴	Arrya	Arrya.prototype
정규 표현식 리터럴	RegExp	RegExp.prototype

19.5 프로토타입 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재하기 때문이다.

19.5.1 사용자 정의 생성자 함수와 프로토타입 생성 시점

생성자 함수로서 호출할 수 있는 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.

non-constructor는 프로토타입이 생성되지 않는다.

  console.log(Person.prototype); // {constructor: ƒ} => Person

  function Person(name) {
    this.name = name;
  }

함수 선언문

런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어, 함수 객체가 된다. 이때 프로토타입도 더불어 생성한다.

프로토타입은 Person 생성자 함수의 prototype 프로퍼티에 바인딩 된다.

19.5.2 빌트인 생성자 함수와 프로토타입 생성 시점

모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성되고, 프로토타입도 생성된다.

프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩된다.

19.6 객체 생성 방식과 프로토타입의 결정

추상연산 OrdinaryObjectCreate는 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달받는다.

프로토타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다.

객체가 생성되는 시점에 객체 생성 방식에 의해 결정된다.

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

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

const obj = {x: 1};

19.6.2 Object 생성자 함수에 의해 생성된 객체의 프로토타입

Object 생성자 함수를 인수 없이 호출하면 빈 객체가 생성되고, 추상연산 OrdinaryObjectCreate가 호출되어 Object.prototype이 전달된다.

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

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

new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하면

추상연산 OrdinaryObjectCreate가 호출되어 생성자 함수의 prototype 프로퍼티에 바인딩 되어있는 객체가 전달된다.

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

사용자 정의 생성자 함수 Person과 더불어 생성된 Person.prototype의 프로퍼티는 constructor 뿐이다.

Person.prototype에 프로퍼티를 추가하여 하위 객체가 상속받을 수 있다.

프로토타입에 프로퍼티를 추가/ 삭제가능

  function Person(name) {
    this.name = name;
  }

  // 프로토타입에 메서드 추가
  Person.prototype.sayHello = function () {
    console.log(`Hi!`, this.name);
  };

  const me = new Person('Lee');
  const you = new Person('Kim');

  me.sayHello();
  you.sayHello();

19.7 프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면

[[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.

이를 프로토타입 체인이라고 한다.

프로토타입 체인은 자바스크립트가 객체 지향 프로그램의 상속을 구현하는 메커니즘이다.

프로토타입 체인의 종점

Object.prototype은 프로토타입 체인의 종점으로,

Object.prototype의 프로토타입, 즉 [[Prototype]] 내부 슬롯의 값은 null이다.

프로토타입 체인 종점까지가도 프로퍼티가 없다면 undefined를 반환한다. 에러가 발생하지 않는다.

프로토타입 체인과 스코프 체인

프로토타입 체인	상속과 프로퍼티 검색을 위한 메커니즘
스코프 체인	식별자 검색을 위한 메커니즘

스코프 체인과 프로토타입 체인은 서로 연관없이 별도로 동작하는 것이 아니라 서로 협력하여 식별자와 프로퍼티를 검색하는데 사용된다.

me.hasOwnProperty('name');

1. 스코프 체인에서 me 식별자를 검색

2. me 객체의 프로토타입 체인에서 hasOwnProperty 메서드를 검색

19.8 오버라이딩과 프로퍼티 섀도잉

프로토타입의 프로퍼티 수정/삭제

하위 객체를 통해 프로토타입의 프로퍼티를 변경 또는 삭제하는 것은 불가능하다.

하위 객체를 통해 프로토타입에 get 액세스는 허용되나, set은 허용하지 않는다.

프로토타입에 직접 접근해야 가능하다.

오버 라이딩

상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

프로퍼티 섀도잉

상속 관계에 의해 프로퍼티가 가려지는 현상

오버라이딩에 의해 프로퍼티 섀도잉이 발생한다.

 const Person = (function () {
    // 생성자 함수
    function Person(name) {
      this.name = name;
    }

    // 프로토타입 메서드 => 프로퍼티 섀도잉이 일어날 예정
    Person.prototype.sayHello = function () {
      console.log(`Hi!`, this.name);
    };

    // 생성자 함수 반환
    return Person;
  })();

  const me = new Person('Lee');

  // 인스턴스 메서드 => 오버 라이딩
  me.sayHello = function () {
    console.log(`hey!`);
  };
  me.sayHello(); // hey!

19.9 프로토타입의 교체

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

객체 간의 상속 관계를 동적으로 변경할 수 있다.

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

19.9.1 생성자 함수에 의한 프로토타입 교체

  const Person = (function () {
    function Person(name) {
      this.name = name;
    }
    // ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
    Person.prototype = {
      sayHello() {
        console.log(`Hi! My name is ${this.name}`);
      }
    };
    return Person;
  })();
  const me = new Person('Lee');
  console.log(me.constructor === Person); // false
  console.log(me.constructor === Object); // true

Person.prototype = { }

생성자 함수는 prototype 프로퍼티가 교체된 프로토타입을 가리키긴 하지만, constructor 프로퍼티가 없다.

따라서 constructor 프로퍼티를 추가해서 프로토타입의 constructor 프로퍼티를 살려야한다.

  const Person = (function () {
    function Person(name) {
      this.name = name;
    }
    // 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
    Person.prototype = {
      // constructor 프로퍼티와 생성자 함수 간의 연결을 설정
      constructor: Person,
      sayHello() {
        console.log(`Hi! My name is ${this.name}`);
      }
    };
    return Person;
  })();
  const me = new Person('Lee');
  // constructor 프로퍼티가 생성자 함수를 가리킨다.
  console.log(me.constructor === Person); // true
  console.log(me.constructor === Object); // false

19.9.2 인스턴스에 의한 프로토타입 교체

  function Person(name) {
    this.name = name;
  }
  const me = new Person('Lee');
  // 프로토타입으로 교체할 객체
  const parent = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  };
  // ① me 객체의 프로토타입을 parent 객체로 교체한다.
  Object.setPrototypeOf(me, parent);
  // 위 코드는 아래의 코드와 동일하게 동작한다.
  // me.__proto__ = parent;
  me.sayHello(); // Hi! My name is Lee

Object.setPrototypeOf(me, parent);

인스턴스의 __proto__ 접근자 프로퍼티나 Object.setPrototypeOf를 이용해 프로토타입을 교체할 수 있다.

교체한 객체에는 constructor 프로퍼티가 없고, 생성자 함수의 prototype과 연결도 파괴된다.

따라서 constructor 프로퍼티도 추가하고 생성자 함수의 prototype과도 연결해야한다.

  function Person(name) {
    this.name = name;
  }
  const me = new Person('Lee');
  // 프로토타입으로 교체할 객체
  const parent = {
    constructor: Person,
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  };
  Person.prototype = parent;
  Object.setPrototypeOf(me, parent);
  // 위 코드는 아래의 코드와 동일하게 동작한다.
  // me.__proto__ = parent;
  
  me.sayHello(); // Hi! My name is Lee

19.10 intanceof 연산자

객체 instanceof 생성자 함수

instanceof 연산자는 이항 연산자

좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자

우변의 피연산자가 함수가 아니면 TypeError 가 발생함.

우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체 프로토타입 체인상에 존재하면 true

프로토타입의 constructor과 생성자 함수의 연결이 파괴되어도 instanceof는 아무런 영향을 받지 않는다.

19.11 직접 상속

19.11.1 Object.create에 의한 직접 상속

Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다.

추상 연산 OrdinaryObjectCreate를 호출한다.

첫 번째 매개변수

생성할 객체의 프로토타입으로 지정할 객체, 즉 생성할 객체의 [[Prototype]]의 참조를 설정

두 번째 매개변수

생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체, 즉 생성할 객체의 프로퍼티들을 추가

  // 1. 프로토타입이 null인 객체.
  // 프로토타입 체인의 종점에 존재
  // obj => null
  let obj = Object.create(null);
  console.log(obj); // [Object: null prototype] {}
  console.log(Object.getPrototypeOf(obj) === null); // true
  // Object.prototype을 상속받지 못함.
  // console.log(obj.toString()); // TypeError: obj.toString is not a function

  // 2. 프로토타입이 Object.prototype
  // obj = {}; 와 동일
  // obj => Object.prototype => null
  obj = Object.create(Object.prototype);
  console.log(obj); // {}
  console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

  // 3. 프로토타입이 Object.prototype
  // obj = { x: 1 }; 와 동일
  // obj => Object.prototype => null
  obj = Object.create(Object.prototype, {
    x: { value: 1, writable: true, enumerable: true, configurable: true }
  });
  console.log(obj.x); // 1
  console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

  // 4. 임의의 객체를 직접 상속받음
  // obj => myProto => Object.prototype => null
  const myProto = { x: 10 };
  obj = Object.create(myProto);
  console.log(obj.x); // 10
  console.log(Object.getPrototypeOf(obj) === myProto); // true

  // 5. 생성자 함수
  // obj => Person.prototype => Object.prototype => null
  function Person(name) {
    this.name = name;
  }
  // obj = new Person('Lee') 와 동일하다.
  obj = Object.create(Person.prototype);
  obj.name = 'Lee';
  console.log(obj.name);
  console.log(Object.getPrototypeOf(obj) === Person.prototype); // true

Object.create 의 장점

new 연산자 없이 객체 생성
프로토타입을 지정하면서 객체를 생성
객체 리터럴에 의해 생성된 객체도 상속받을 수 있음

1번 예제의 경우 Object.prototype의 빌트인 메서드를 직접 사용할 수 없으므로

다음과 같이 간접적으로 호출하는 것을 권장한다.

// console.log(obj.hasOwnProperty('a')); => 이렇게 직접 호출하지 않는다.
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // 간접적으로 호출!

19.11.2 객체 리터럴 내부에서 proto에 의한 직접 상속

Object.create의 3번 예제와 같이 두 번째 인자로 프로퍼티를 정의하는 것이 번거롭다.

ES6에서 객체 리터럴 내부에 __proto__ 접근자 프로퍼티를 사용하여 직접 상속을 구현할 수 있다.

  const myProto = { x: 10 };

  const obj = {
    y: 20,
    __proto__: myProto // 직접 상속!!
  };
  /* 아래와 동일하다.
    obj = Object.create(myProto, {
    y: { value: 20, writable: true, enumerable: true, configurable: true }
  });
  */

  console.log(obj.x, obj.y); // 10, 20
  console.log(Object.getPrototypeOf(obj) === myProto); // true

'JavaScript > JavaScript 예복습' 카테고리의 다른 글

JavaScript 예습 \| 27장 배열 (0)	2021.09.26
JavaScript 예습 \| 16~18장 (0)	2021.09.14
JavaScript 예습 \| [deep dive] 13 ~ 15장 (0)	2021.09.12
JavaScript 예습 \| [deep dive] 10 ~ 12장 (0)	2021.09.09
JavaScript 예습 \| [deep dive] 6장~9장 (0)	2021.09.07

JavaScript 예습 | 19~21장