2023.10.25 JS 학습 키워드 및 복습

오늘의 키워드

• 프로토타입 참조 취득 : Object.getPrototypeOf(객체명)
• 상속하도록 만드는 구문 : Sedan.prototype = Object.create(Vehicle.prototype);
• 상속 공부!

  function Vehicle(name, speed) {
    this.name = name;
    this.speed = speed;
  }
  Vehicle.prototype.drive = function () {
    console.log(this.name + ' runs at ' + this.speed)
  };
  var tico = new Vehicle('tico', 50);
  tico.drive(); // 'tico runs at 50'
  function Sedan(name, speed, maxSpeed) {
    Vehicle.apply(this, arguments);
    this.maxSpeed = maxSpeed;
  }
  Sedan.prototype = Object.create(Vehicle.prototype);
  Sedan.prototype.constructor = Sedan;
  Sedan.prototype.boost = function () {
    console.log(this.name + ' boosts its speed at ' + this.maxSpeed);
  };
  var sonata = new Sedan('sonata', 100, 200);
  sonata.drive(); // 'sonata runs at 100'
  sonata.boost(); // 'sonata boosts its speed at 200'

  
  라인 별 설명
  11 : Vehicle의 this들을 그대로 받으라는 뜻. 입력받은 인자를 고대로 전달함.
  12 : maxSpeed 변수는 Vehicle에 없어서 위에서 전달해도 무시되므로 따로 추가
  14 : 본격적으로 상속하도록 만드는 부분! 이래야 Vehicle의 메소드인 drive()를 쓸 수 있음.
  Object.create는 Vehicle.prototype을 상속하는 새로운 객체를 만드는 메소드. 그 상속한걸 대입하니까 Sedan이 Vehicle을 상속!
  * Object.create(Vehicle.prototype)과 new Vehicle()의 차이는 Object.create()는 객체를 만들되 생성자는 실행하지 않는다는 것! 그냥 프로토타입만 넣는 것임.
  15 : 오류를 수정하기 위한 코드. Vehicle을 상속하게 만들면서 자기 자신의 생성자도 Vehicle이 되어버렸기 때문에 원래 생성자인 Sedan을 넣어줌.
  코드 출처 : https://www.zerocho.com/category/JavaScript/post/573d812680f0b9102dc370b7

  ---

• (복습) 내부 슬롯, 프로퍼티 어트리뷰트, 프로퍼티 디스크립터, 데이터 프로퍼티, 접근자 프로퍼티 간의 관계

 

---

복습 내용

내부 슬롯, 프로퍼티 어트리뷰트, 프로퍼티 디스크립터, 데이터 프로퍼티, 접근자 프로퍼티... 이런 처음 듣는 복잡한 이름들을 마구 접하니 개념에 혼란이 왔다. 그래서 다시 공부해보려 한다.

 

프로퍼티란 객체 내부의 속성을 의미한다.

프로퍼티 어트리뷰트란 프로퍼티의 상태에 대한 값을 의미한다. (상태는 Value, Writable, Enumerable, Configurable가 있다.)

프로퍼티 디스크립터 객체란 프로퍼티 어트리뷰트를 포함하는 객체.

데이터 프로퍼티란 객체의 속성 중 하나로, 직접적인 값을 가지는 것

접근자 프로퍼티란 객체의 프로퍼티 종류 중 새로운 종류의 프로퍼티로, 함수처럼 정의되며 호출은 데이터 프로퍼티에 접근하는 것 처럼 호출할 수 있음.

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 pseudo property, pseudo method.

내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님.

가령 모든 객체는 [[Prototype]] 라는 내부 슬롯을 가진다. 자바스크립트 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수는 없지만, 내부 슬롯의 경우 , __proto__를 통해 간접적으로 접근할 수 있음.