코딩앙마 자바스크립트 중급 강의 11. 상속, 프로토타입

hasOwnProperty

Object.hasOwnProperty('확인할 키')

객체에서 프로퍼티를 가지고 있는지 확인하는 메소드

불리언 값을 반환함

 

__proto__에서 확인할 수 있음

 

__proto__ => 프로토 타입이라고 함

객체에서 프로퍼티를 읽으려고 하는데 없으면 여기서 읽음

 

객체에 hasOwnProperty로 찾는 키가 있으면 그게 실행되고 없으면 프로토타입에서 찾음

---

상속

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

const bmw = {
  color: 'red',
}

const benz = {
  color: 'black',
}

const audi = {
  color: 'white',
}

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

bmw.color; // 'red'
bmw.wheels; // 4

 

상속은 계속 이어질 수 있음

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

const benz = {
  color: 'red',
}

benz.__proto__ = car;

const gClass = {
  color: 'black',
  name: 'G Class'
}

gClass.__proto__ = benz;

gClass.color; // 'black'
gClass.wheels; // 4

계속 위에 있는 프로토타입에 있는 값을 찾음

> 프로토타입 체이닝

 

Object.kes나 Object.values를 사용하면 상속된 프로퍼티는 나오지 않음

for in문을 사용하면 프로토타입에 있는 프로퍼티까지 모두 보여줌

 

---

생성자함수를 사용할 때

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

// prototype => 생성자 함수의 __proto__에 프로퍼티를 설정함
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
  console.log('drive');
};

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

prototype을 이용하면 중복코드를 줄일 수 있음

 

생성자함수가 새로운 객체를 만들어 낼 때 그 객체는 생성자의 인스턴스로 불려짐

> instanceof를 사용하여 이를 편리하게 확인할 수 있음

객체와 생성자를 가려낼 수 있음

 

생성자의 인스턴스로 만들어진 객체에는 constructor라는 프로퍼티가 존재함

constructor는 생성자를 가리킴

 

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

// 이렇게 쓸 수도 있음
Bmw.prototype = {
  wheels = 4;
  drive() {
    console.log('drive');
  },
};

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

코드를 이렇게 줄일 수도 있음, 그러면 constructor가 사라짐

이런 현상을 방지하기 위해 덮어쓰지 말고 하나하나 쓰는 것이 좋음

 

또는 constructor를 수동으로 명시해줘도 됨

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

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

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

자바스크립트는 명확한 constructor를 보장하지는 않음, 개발자에 의해서 언제든지 수정될 수 있음

---

아무나 생성된 인스턴스의 의 값을 맘대로 바꿔버릴 수가 있음

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

const x5 = new Bmw('red');

console.log(x5.color) // 'red'

x5.color = "black";

console.log(x5.color) // 'black'

 

그래서 임의로 값을 바꿀 수 없도록 클로저를 이용할 수 있음

const Bmw = function (color) {
  const c = color;
  this.getColor = function () {
    console.log(c);
  };
}

const x5 = new Bmw('red');

이렇게 하면 초기에 세팅한 값을 받을 수만 있고 바꿀 수는 없음