🪴 성장일지

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

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

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

⭐⭐⭐ JavaScript 프로토타입

개념

자바스크립트는 클래스 기반 언어가 아닌 프로토타입 기반 언어

• prototype : 생성자(Constructor)가 갖는 프로퍼티로, 해당 생성자의 method가 담긴 객체(object)
• __proto__ : new 연산자로 생성자를 호출해서 만들어진 인스턴스(instance)가 갖는 프로퍼티로, 생성자의 prototype을 참조하는 객체

var instance = new Constructor();

instance.__proto__ === Constructor.prototype;
// __proto__가 prototype을 참조하기 때문

instance.__proto__ === Object.getPrototypeOf(instance);
// 사실 가급적이면 Object.getPrototypeOf()를 사용하도록 하자

new 연산자로 Constructor를 호출하면 instance가 만들어지고, 이 instance의 생략 가능한 프로퍼티인 __proto__는 Constructor의 prototype을 참조함

// 다음 5가지는 모두 생성자(Constructor)를 가리킵니다.
[Constructor] // 생성자 그 자체
[Constructor].prototype.constructor // 생성자의 프로토타입의 생성자
[instance].__proto__.constructor // 인스턴스의 __proto__가 곧 생성자의 프로토타입을 참조하므로
[instance].constructor // __proto__는 생략가능
Object.getPrototypeOf([instance]).constructor

프로토타입 체인

어떤 데이터의 __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것<br/> 이 체인을 따라가며 객체를 검색하는 것을 프로토타입 체인이라고 함

메서드 오버라이드

스코프 체인에서처럼, 특정 인스턴스에서 어떤 메서드를 실행했을 때 가까운 __proto__에서 먼저 찾아서 그 메서드를 실행

var test = new Array(5);
test.__proto__; // Array의 prototype을 참조하므로 Array 관련 메서드가 있음
test.__proto__.__proto__; // test.__proto__가 결국 Object이기에 Object의 prototype을 참조하므로 Object 관련 메서드가 있음

var Dog = function (name) {
  this.name = name;
  this.bark = function () {
    return this.name + ' 멍멍!';
  };
};

// 같은 이름의 메서드를 prototype에 추가
Dog.prototype.bark = function () {
  return this.name + ' 왈왈!';
};

var hodu = new Dog('hodu');
hodu.bark(); // 'hodu 멍멍!'을 반환 -> prototype에 있는 메서드는 덮어짐(인스턴스에 직접 접근이 더 가깝기 때문)

hodu.__proto__.bark();
// undefined -> 덮어지는 것이기 때문에 왈왈 메서드가 사라지는 건 아님! 단, this가 hodu가 아닌 hodu.__proto__를 가리키기 때문에 undefined
hodu.__proto__.bark.call(hodu); // 'hodu 왈왈!' 반환

프로토타입 체인 구조 상, 어떤 생성자 함수든 그 끝에는 Object.prototype을 참조하게 되어있음 그러므로 Object.prototype에 Object만의 메서드를 둘 수가 없음(그러면 문자열, 숫자형, 배열 등등 모든 자료형이 그 메서드를 사용가능 -> 프로토타입 체인) 이를 해결하기 위해 Object 자체에 static method로 부여할 수 밖에 없는 메서드들이 존재 ex) Object.freeze()

다중 프로토타입 체인

위에서 본 것처럼 프로토타입 체인은 계속 이어질 수 있음(보통 정의된 데이터 타입은 해봐야 2체인 정도 ex. Array는 Object를 기반으로 하기에 Array -> Object로 체이닝)<br/> 이를 활용하면 조금 재미있는 짓을 해볼 수 있음

var test = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; // 이런 유사배열이 있을 때
test.__proto__ = []; // test의 __proto__객체를 배열 리터럴로 바꿔버리면?

// [].__proto__는 Array의 prototype을 참조하므로 Array의 메서드를 사용가능해짐
test.push(11); // 배열 형태가 되면서 배열의 메서드를 사용할 수 있게 됨!

undefined