220823(화)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 프로토타입(remind)

자바스크립트의 기반이 되는 개념으로 어떤 생성자 함수의 메서드를 담고 있는 특별한 객체
이 생성자 함수를 통해 instance를 만들게 되면 instance는 __proto__라는 객체를 통해 생성자의 prototype 객체를 참조하고 그 메서드를 사용할 수 있음

사실 instance.__proto__보다 Object.getPrototypeOf(instance)를 사용할 것을 권장

__proto__는 생략 가능한 프로퍼티 -> 자바스크립트 언어를 창시한 브랜든 아이크가 정한 것으로 이해의 영역이 아님! 그냥 그렇구나 하면 됨

var instance = new Constructor();
// 아래 5가지 모두 같은 Constructor를 가리키는 표현
Constructor;
instance.__proto__.constructor;
instance.constructor; // __proto__ 생략 가능
Object.getPrototype(instance).comstructor;
Constructor.prototype.constructor;

메서드 오버라이드

• 스코프 체이닝과 마찬가지로, 같은 이름의 메서드가 여러 곳에 있을 때 가장 가까운 곳에서 그 메서드에 접근

var Dog = function (name) {
  this.name = name;
};

Dog.prototype.bark = function () {
  return this.name + ' 왈왈~!';
};

var hodu = new Dog('hodu');
hodu.bark = function () {
  return this.name + ' 바우바우~!';
};

console.log(hodu.bark()); // hodu 바우바우~! -> 즉, protorype의 메서드보다 instance의 자체 메서드가 더 우선
console.log(hodu.__proto__.bark()); // undefined -> this가 hodu가 아닌 hodu__proto__를 가리키게 됨
console.log(hodu.__proto__.bark.call(hodu)); // hodu 왈왈~! -> call을 통해 this를 hodu로 바인딩해주면 해결

Object

• 모든 생성자 함수에 의해 생성된 객체들은 prototype이라는 프로퍼티 자체가 ‘Object’이므로 Object의 prototype에 있는 모든 메서드에 접근 가능
• 단, 정말 객체({})만이 가진 함수도 필요하므로 그 부분은 static method로 Object.freeze와 같은 형식으로 사용 가능

다중 프로토타입 체인

생성자의 prototype에 또다른 생성자의 인스턴스를 할당함으로써 그 생성자의 메서드도 사용할 수 있게 계속 체인하는 방법

• 이 개념 자체가 자바스크립트에서 클래스를 구현 시 사용됨

JavaScript 클래스(remind)

자바스크립트는 프로토타입 기반이기에 상속이라는 개념이 존재하지 않음
이렇듯 상속의 개념이 존재하는 클래스를 따라하기 위한 다양한 기법들이 생겼음
추후 ES6에서는 클래스 문법이 구현되었음(이마저도 프로토타입은 기반으로 한 것)

• superclass: 상위 클래스; super
• subclass: 하위 클래스; sub

현실 세계는 이미 존재하는 수많은 개체들의 공통점, 차이점을 분석하여 클래스를 하나하나 정의하는 식
프로그래밍에선 특정 클래스를 먼저 만든 후, 그 클래스의 성질과 각각이 갖는 개별 성질을 갖는 개체를 만들어내게 됨

• static method: 생성자 자체가 갖는 메서드(함수) ex) Array.from() -> instance가 활용 불가능
• prototype method: 생성자의 prototype이 갖는 메서드(함수) ex) Array.prototype.push() -> instance가 활용 가능
• instance method: instance가 갖는 메서드(함수)로 instance마다 직접 부여하는 메서드 함수

클래스 상속: 자바스크립트에서 클래스 상속을 구현 -> 프로토타입 체이닝을 잘 연결했다는 의미

var First = function (name) {
  this.name = name;
};

First.prototype = []; // 프로토타입에 Array의 instance(배열 리터럴 표현)을 할당

var jayden = new First('jayden');
jayden.push(); // 프로토타입 체이닝에 의해 Array의 prototype method를 사용 가능해짐

위의 경우 2가지의 문제가 존재

1. First.prototype에 []를 할당함으로써 [] 자체가 갖는 프로퍼티가 오류를 일으킬 가능성이 존재
2. jayden의 생성자인 First에 다시 접근할 방법이 없음(First.prototype = []으로 했기 때문)

1번 문제 해결법

• delete First.prototype.method 식으로 하나하나 지워주기
• 비어있는 생성자 함수 Bridge를 통해 연결
• Object.create(생성자.prototype)을 사용해서 연결

2번 문제 해결법

Subclass.prototype.constructor = Subclass 로 다시 constructor라는 프로퍼티를 재할당

ES6에 추가된 클래스 문법 예시

var ES6 = class {
  constructor(name) {
    this.name = name;
  }
  static staticMethod() {
    return this.name + ' staticMethod';
  }
  method() {
    return this.name + ' method';
  }
};

var es6Instance = new ES6('es6');