JS_객체와 프로토타입

TIL/프로그래머스 웹 데브코스

JS_객체와 프로토타입

codermun 2021. 8. 4. 10:39

728x90

자바스크립트의 객체

클래스 기반 언어처럼 속성과 행동으로 정의할 수 있다.

자바스크립트에서는 기본 데이터 타입을 제외한 모든 것이 객체이다.

JS 객체 생성 방법

기본적인 생성방법이다.

정확하게 JS에서는 객체를 생성할때 프로토타입을 사용해 객체를 생성하는게 효율적이다.

1. 객체 리터럴

객체를 직접 정의

const person = {
  name: 'ㅁㅁㅁ',
  age: 99,
  move: function(des){
    console.log(`이동 : ${des}`);
  },
  eat: function(food){
    console.log(`Eat : ${food}`);
  }
}

console.log(person.name);
console.log(person.age);
person.move('우리집');
person.eat('카스테라');

2. Object 생성자 함수

const person = new Object();
...
...
...
...

const person = new Object();
person.name = 'ㅁㅁㅁ';
person.age = 199;
person.move = function(des){
  console.log(`Obj 생성자 move : ${des}`);
}
person.eat = function(food){
  console.log(`Obj 생성자 eat : ${food}`);
}

console.log(person.name);
console.log(person.age);
person.move('우리집');
person.eat('카스테라');

3. 생성자 함수

객체를 생성할때 사용하는 함수

Python에서의 Class 역할과 비슷함.

var, let, const mun = new Person(params);

function Person(name, age, move, eat){
  this.name = name;
  this.age = age;
  this.move = function(des){
    console.log(`생성자 함수 move : ${des}`);
  }
  this.eat = function(food){
    console.log(`생성자 함수 Eat : ${food}`)
  }
  this.getName = function(){
  	return this.name;
  }
}

const mun = new Person('ㅁㅁㅁ', 199, '우리집', '카스테라');
console.log(mun)
console.log(mun.__proto__); // mun은 Person의 하위객체
console.log(mun.name);
console.log(mun.age);
mun.move('우리집');
mun.eat('카스테라');
mun.getName();

위에서 언급했듯이, 자바스크립트에서 객체 지향 프로그래밍으로 작업하고자 할때는 프로토타입을 사용해야한다.

위와 같이,

Person이라는 객체에

move, eat 그리고 getName의 메소드를 정의한 상태로 서로 다른 2개의 객체를 생성자 함수를 이용해 생성하였다.

그 결과로 두 객체 모두 다 메소드가 따로 정의되어 있음을 볼 수 있다(Red)0

즉, 객체에 들어있는 프로퍼티와 함수가 복사한 객체의 갯수 만큼 생성이 된다.

여기서 메소드의 경우, 각 객체체의 메소드의 경우 같은 함수이므로

이는 같은 내용을 2번 생성한 꼴로 메모리가 낭비된다고 한다!!

이에 대한 해결책으로 프로토타입이 필요한 것이다.

위의 코드를 프로토타입을 사용해 수정해보도록 하자.

prototype

기존의 객체를 복사하여 새로운 객체를 생성하는 방식으로

생성된 객체 들이 프로퍼티와 메서드를 공유하기 위해 사용하는 객체이다.

위와 같이 객체를 만들면 사용된 원형(부모, 상위)인 프로토 타입 객체를 이용해 객체를 만드는데

이때 만들어진 객체 들은 __proto__라는 객체를 내부적으로 갖게 되는데

_proto__속성이 자신의 원형(부모, 상위)를 의미하는 프로토타입 객체를 참조하는 숨겨진 링크를 가지고 있으며, 이를 프로토타입이라 정의한다.

(자바스크립트에서는 기본 데이터 타입을 제외한 모든 것이 객체이므로 함수도 프로퍼티로 가질 수 있다.)

프로토타입을 이용해 상위 객체를 참조하여 객체를 이용해 새로운 객체를 추가적으로 만들 수 있다 (붕어빵 틀)

이렇게 생성된 객체는 상위 객체를 바라보는 하위 객체로 상위 객체의 프로퍼티와 메소드를 사용할 수 있게 된다. (상속과 비슷하다.)

function Person(name, age, move, eat){
  this.name = name;
  this.age = age;
  Person.prototype.move = function(des){
    console.log(`생성자 함수 move : ${des}`);
  }
  Person.prototype.eat = function(food){
    console.log(`생성자 함수 Eat : ${food}`)
  }
  Person.prototype.getName = function(){
  	return this.name;
  }
}

const mun = new Person('ㅁㅁㅁ', 199, '우리집', '카스테라');
const kim = new Person('ㄱㄱㄱ', 200, '너내집', '테라와 카스');
console.log(mun);
console.log(kim);