[JS] 상속, 프로토타입 Prototype, 인스턴스 instance

 

 

hasOwnProperty : 객체에 특정 프로퍼티를 가지고 있는지 확인하는 메서드

const user = {
  name: "aoto",
};

console.log(user.name); // aoto
console.log(user.hasOwnProperty("name")); // true
console.log(user.hasOwnProperty("age")); // false

 

이 hasOwnProperty는 만든 적이 없는데 어디에 있는걸까?

>> __proto__ 객체 안에 있다!

const user = {
  name: "aoto",
  // __proto__: Object 이런 식으로 생각하면 된다.
};

 

❗️ 객체에서 특정 프로퍼티를 읽으려 할 때 없으면, __proto__ 안에서 찾는다.

❗️ 만약 hasOwnProperty가 객체 안에 있다면?

const user = {
  name: "aoto",
  hasOwnProperty: function () {
    console.log("hi");
  },
};

console.log(user.hasOwnProperty()); // hi

>> user 내에 있으니 거기서 탐색을 멈춤

 

❗️ 다음 코드에서 wheels, drive 처럼 공통된 부분을 없애고 싶다면?

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..");
  },
};

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; // car가 bmw의 프로토타입이 되었다! = bmw는 car의 상속을 받는다!
benz.__proto__ = car;
audi.__proto__ = car;

console.log(bmw); // {color: 'red', navigation: 1}
console.log(bmw.color); // "red" bmw에서 탐색을 멈춤
console.log(bmw.wheels); // 4 __proto__까지 탐색함

 

Prototype chain

❗️ 상속은 계속 이어질 수 있다.

❗️ x5 > bmw > car 순으로 탐색

const car = {
  wheels: 4,
};

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

bmw.__proto__ = car;

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

x5.__proto__ = bmw;

console.log(x5.navigation); // 1
console.log(x5.wheels); // 4

 

❗️ x5 객체의 프로퍼티를 순회해 보면 상속받은 프로퍼티들까지 다 나온다.

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

 

❗️ 하지만 키, 값과 관련된 내장 메서드는 상속된 프로퍼티는 나오지 않는다.

console.log(Object.keys(x5)); // ['color', 'name']
console.log(Object.values(x5)); // ['white', 'x5']

 

❗️ 만약 for in에서 이러한 값들을 구분하고 싶다면?

for (p in x5) {
  if (x5.hasOwnProperty(p)) {
    console.log("O", p);
  } else {
    console.log("X", p);
  }
  // O color
  // O name
  // X navigation
  // X wheels
}

 

생성자 함수를 이용해 보자!

: 생성자 함수를 이용하면 비슷한 객체들을 쉽게 만들 수 있다.

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

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

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

console.log(x5); // Bmw {color: 'red'}
console.log(z4.wheels); // 4

Bmw.protoype.wheels = 4;

>> 생성자 함수(Bmw)가 생성하는 객체(x5)의 __proto__ 를 저렇게 설정하겠다는 의미이다.

 

❗️ 위에서 작성한 x5.__proto__ = car 처럼

만들어지는 객체마다 프로토타입을 지정해 줄 필요가 없다.

 

 

 

instance : 생성자 함수가 새로운 객체를 만들어낼 때 그 객체는 생성자의 인스턴스라고 불린다.

instanceof : 객체와 생성자를 비교, 해당 객체가 그 생성자에게서 생성된건지 판별 가능

constructor : 만들어진 인스턴스 객체는 constructor라는 프로퍼티를 가지는데 이는 생성자를 가리킨다.

console.log(z4 instanceof Bmw); // true
console.log(z4.constructor === Bmw); // true

// 생성자 함수 이용 코드 중 이 부분을
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
  console.log("drive..");
};

// 이렇게 쓰게 되면
Bmw.prototype = {
  wheels: 4,
  drive() {
    console.log("drive...");
  },
};

// constructor를 찾을 때 false가 반환된다.
console.log(z4.constructor === Bmw); // false

 

❗️ 그러니 프로토타입을 덮어씌우지 말고, 하나씩 프로퍼티를 등록하는게 좋다.

아니면 프로토타입을 전체 작성한 부분에 constructor 프로퍼티를 더해준다.

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

 

클로저와 활용해 보자!

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");
console.log(x5.getColor());
// "red"
// undefinde

x5.color = "black";
console.log(x5.getColor());
// "red"
// undefinde

 

❗️ 초기에 세팅했던 color 값을 얻을 수만 있고, 수정은 불가하다.

❗️ getColor 함수는 생성될 당시의 컨텐스트를 기억한다.

 

 

 

🔗 https://youtu.be/ddJcDZHBRm0?si=4DaUPYcTNuUE-oF0