JS Study 3주차 ( 프로토타입 3 )

jaehan·2023년 5월 1일

JavaScript

목록 보기

22/33

프로토타입

프로토타입 교체

프로토타입도 객체이기 떄문에 그냥 객체로 바꿀 수가 있다.

function Person(name) {
  this.name = name
}

const me = new Person('Kim');

위 그림은 이 코드의 결과이고 Person의 프로토타입을 바꾸는 방법은

const Person = (function(){
  function Person(name){
    this.name=name;
  }

  Person.prototype = {
    sayHello(){
      console.log(this.name)
    }
  }
  
  return Person
})

이렇게 코드를 짜서 me에 Person객체를 할당하면 Person.prototype는 constructor는 없고 sayHello만 있는 객체로 교체된다.

그래서 아래처럼 constructor연결해주는 코드를 추가해 줘야한다.

const Person = (function(){
  function Person(name){
    this.name=name;
  }

  Person.prototype = {
    constructor: Person
    sayHello(){
      console.log(this.name)
    }
  }
  
  return Person
})

다른방법으로는 Object.setPrototypeOf()를 사용하는 방법이다

const parent = {
  sayHello(){
    console.log(this.name)
  }
};

Object.setPrototypeOf(me, parent);

이렇게 하면 Person.prototype이 parent객체로 바뀌는데 앞에서 생성자 함수 내부에 정의한것과는 결과가 다르다.

어떻게 다르냐면

생성자 함수로 프로토타입을 교체한것은 Person의 프로토타입의 속성만 바꿧다고 생각할 수 있다.
Object.setPrototypeOf()은 프로토타입 자체를 다른 객체로 교체하는 것이라 Person 생성자 함수가 교체된 프로토타입인 parent객체를 모른다.

그래서 생성자 함수에서 했던것 처럼 프로토타입이랑 생성자 함수랑 연결을 해줘야 한다.

const parent = {
  constructor: Person
  sayHello(){
    console.log(this.name)
  }
};

Person.prototype = parent

Object.setPrototypeOf(me, parent);

정적 프로퍼티 / 메소드

정적 프로퍼티 메소드는 생성자 함수로 인스턴스를 생성하지 않아도 참조, 호출할 수 있는 프로퍼티 메소드 이다.

Person.staticProp = 'static prop';
Person.staticMethod = function (){
  console.log('static method')
}

Person.staticMethod();

me.staticMethod(); // TypeError

이렇게 하면 Person객체가 자기만의 값을 가지기 때문에 me에 이 정적 프로퍼티 메소드를 넘겨주지 않는다.

📌 이름을 굳이 staticMethod, staticProp 이렇게 안해도 잘된다.

프로퍼티 열거

파이썬의 for in 처럼 자바스크립트에도 for in이 있는데 좀 다르다

파이썬은 for in 하면 배열의 요소를 순회하지만 자바스크립트의 for in은 객체의 모든 프로퍼티를 순회한다.

파이썬의 for in과 같은건 for of 라고 따로 있다.

const person = {
  name: 'Kim',
  address: 'Seoul'
};

for(const key in person){
  console.log(key + ': ' + person[key]);
}

// name: Kim
// address: 'Seoul