[JS] 프로토타입 간단 정리

이채현

💡 Javascript Prototype

자바스크립트는 프로토타입 기반의 언어다.

constructor (생성자)

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

class Paerson {
	constructor() {

	}
}

생성자함수는 프로토타입이 모든 자바스크립트에 들어있듯이 생성자도 모든 자바스크립트에서 확인가능하다.

const one = new Person('one', 1);
const two = new Person('two', 2);

console.log(one.constructor); // [Function: Person]
console.log(two.constructor.name); // Person

어떠한 생성자로부터 생성되었는지 유추할 수 있다.

instanceof로 식별

object instanceof constructor

proto

브라우저에서 비표준으로 제공했던…

array.__proto__ ...로 array의 프로토타입에 접근

자바스크립트의 프로토타입에 직접 접근이 아니라 접근제어자로 접근할 수 있도록 도와주는 것으로 생각하면 됨. ⇒ 하지만 사용하지 않는 것이 좋음

ECMA Script2015부터는 표준화 된

• getPrototypeOf()
• setPrototypeOf()

를 사용하는 것을 추천

프로토타입 체인

const animal = {
    sayName() {
        return 'ANIMAL';
    }
}

console.log(animal.sayName()); // ANIMAL
const dog = Object.create(animal);
console.log(dog.sayName()); // ANIMAL

프로토타입 확장 (extends, 상속)

부모 ⇒ 자식 … 상속보단 확장이란 개념이 더 이해하기 쉽다. 부모가 가진 기능보다 자식이 더 많이 가질 수 있기 때문

// Super Class
function Animal(name, sound) {
    this.name = name
    this.sound = sound;
}

Animal.prototype.getInfo = function () {
    return this.name + '가(이)' + this.sound + '소리를 낸다.';
}

// Sub Class
function Friends(name, sound) {
    Animal.call(this, name, sound); // 명시적 바인딩 -> Animal함수의 this를 Friends로 바인딩
}

Friends.prototype = Object.create(Animal.prototype);
Friends.prototype.constructor = Friends;

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냐옹');

console.log(dog.getInfo()); // 개가(이)멍멍소리를 낸다.
console.log(cat.getInfo()); // 고양이가(이)냐옹소리를 낸다.

-------

dog.contructor.name // Friends

dog instanceof Friends // true
dog instanceof Animal // true