[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 상속, 프로토타입(Prototype)

1. hasOwnProperty

hasOwnProperty는 입력한 property가 있는지 확인해주는 메서드이다.

const user = {
	name: 'Mike'  
}
user.hasOwnProperty('name');   // true
user.hasOwnProperty('age');   // false

여기서 드는 의문점이 hasOwnProperty라는 메서드를 만들지 않았는데 어떻게 사용을 할까? __proto__ 라는 객체가 있는데 이것을 프로토타입이라고 한다.

만약에 user에 hasOwnProperty라는 메서드가 있었다면 어떻게 실행됐을까? 아마 정의해준 hasOwnProperty가 실행될 것이다. 즉, 객체 내에 해당 메서드가 있는지 확인을 먼저하고 없으면 proto로 넘어가는 것이다.

예제를 하나 살펴보자.

2. Prototype과 상속

const bmw = {
	color: "red",
  	wheels: 4,
  	navigation: 1,
  	drive() {
    	console.log("drive...");  
    }
};

const benz = {
	color: "black",
  	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }  
};

const audi = {
	color: "blue",
  	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }  
};

여기서 공통된 부분을 확인할 수 있다. 이 부분을 proto를 사용해서 해결할 수 있다.

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const bmw = {
	color: "red",
  	navigation: 1,
};
const benz = {
	color: "black",
};
const audi = {
	color: "blue",
};

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

이렇게 코드를 작성하게 되면 car가 bmw, benz, audi의 prototype이 되는 것이다. 다시 말해서 bmw는 car의 상속을 받게 되는 것이다.

여기서 bmw.wheels를 확인해보면 4가 나온다. 현재 bmw에 wheels라는 property가 없기 때문에 proto에 가서 확인을 한다.

추가로, 상속은 이어질 수 있다. 코드를 살펴보자

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const bmw = {
	color: "red",
  	navigation: 1,
};	

bmw.__proto__ = car;

const x5 = {
	color: 'white',
  	name: 'x5'
};

x5.__proto__ = bmw;

이렇게 코드를 작성하면 다음 그림과 같이 표현할 수 있다. (Prototype Chain)

for-in 구문을 사용해서 객체를 순회해보자.

for (p in x5) {
  console.log(p);   // color, name, navigation, wheels, drive
}

상속을 받았기 때문에 모든 property가 나오게 된다. 하지만 Object.keys 또는 values 메서드를 사용하게 되면 상속받은 property까지 나오지 않고 본래 가지고 있었던 것들만 출력이 된다. 이 점은 참고하자!
(코드로 작성할 때는 hasOwnProperty를 사용하면 본래 가지고 있던 property인지 아닌지 구분이 가능하다!)

3. 생성자 함수를 사용한 예제

const Bmw = function (color) {
	this.color = color;
  	this.wheels = 4;
  	this.drive = function() {
    	console.log("drive...");  
    };
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

위에서 x5와 z4에 wheels와 drive가 동일하게 포함이 되어있기 때문에 위와 마찬가지로 분류를 해주도록 하자.

const car = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
};

const Bmw = function (color) {
	this.color = color;
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

x5.__proto__ = car;
z4.__proto__ = car;

하지만 위와 같이 객체를 생성해 줄때마다 proto를 지정해줘야 하니 귀찮다. 따라서 다음과 같은 방법을 사용하면 편리하다. 기억해두도록 하자!

const Bmw = function (color) {
	this.color = color;
};

Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
	console.log("drive...");  
};

다음과 같이 사용하면 편리하게 적용시킬 수 있다.

생성자 함수가 새로운 객체를 만들어낼 때 그 객체는 생성자의 인스턴스라고 부른다. 자바스크립트에는 이를 편리하게 확인할 수 있는 instanceof라는 메서드가 있다.

다음 코드에서 "z4 instanceof Bmw"를 작성하면 true가 출력될 것이다. z4는 bmw의 인스턴스가 맞기 때문이다. (bmw를 이용해서 z4를 만들어냈는지 확인)

마찬가지로 "z4.constructor === Bmw"를 작성하면 true가 출력된다. 이렇게 생성자로 만들어진 인스턴스 객체는 constructor라는 property가 존재한다. 여기서 constructor는 bmw를 가리킨다.

4. 심화학습

위의 코드에서 prototype (wheels, drive)를 일일이 작성해줬는데 저것도 귀찮지 않은가?

Bmw.prototype = {
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
}

다음과 같이 작성하면 엄청 편할 것이다. 하지만 이렇게 작성하게 된다면 z4.constructor === Bmw는 false가 출력된다. 따라서 위와 같이 코드를 작성하는 것은 좋지 않다.

// 위와 같이 풀어서 쓰거나 혹은
Bmw.prototype = {
	constructor: Bmw,
	wheels: 4,
  	drive() {
    	console.log("drive...");  
    }
}

위와 같이 풀어서 쓰거나 다음과 같이 constructor를 선언해주면 된다.

(해당 포스팅의 내용은 유튜브 코딩앙마님의 영상을 참고했습니다)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4