Javascrip 객체 지향 프로그래밍 : 객체 다루기, 생성자 함수

객체, 생성자 함수

---

내가 이해한 '객체' 정의

1. 한 대상이 있고, 그 대상에 대한 다양한 정보/데이터/함수들을 따로 관리/활용할 수 있는 기능(?)

2. 이름을 한 개 붙여서, 그 이름 안에 다양한 정보/데이터/함수들을 묶어서 관리/활용할 수 있는 기능이다.

예. 곰인형(객체) - 색상, 재질, 음성 녹음 기능, 가격 등(데이터/정보)...

 

 

1. 객체 만들기

var teddyBear = { 
  colour: 'black', 
  texture: 'soft',
  recording: true,
  price: '10,000',
  record = function() { return true },
  me = function() { console.log(this); }
}

 

 

2. 객체 정보 읽기(불러오기)

방법1

teddyBear.colour
//(결과. black);

 

방법2

teddyBear['colour']
//(결과. black);

 

 

3. 객체 정보 수정

teddyBear.price = '9,000';
//(결과. price가 9,000으로 변경됨)

 

 

4. 객체 정보 삭제

delete teddyBear.texture;
//(결과. texture가 undefined로 변경됨)

 

 

5. 객체 내부 함수

함수지만 객체 내부에 값으로 들어가 있는 경우

이름이 함수에서 메서드로 바뀐다.

teddyBear의 record는 '메서드'라고 불리고

teddyBear.record()라고 불러온다.

 

 

6. 객체 메서드의 this

this는 해당 메서드가 속해있는 객체.

(예. teddyBear 메서드에서 this는 teddyBear)

'나'라는 대명사로 메서드(객체 내부에 정의된 함수) 내부에서 사용하고, 해당 객체를 가리킨다.

teddyBear.me()
//(결과. {  colour: 'black',  texture: 'soft',  recording: true,  price: '10,000',  record = function() { return true },  me = function() { console.log(this); } })

 

7. 생성자 함수(Constructor Function)

동일한 내용의 객체를 1억 개 수동으로 만들고 수정하기 어려우니 생성자 함수를 사용한다.

도장을 파서 꽝꽝꽝 찍어내듯 생성자 함수(=도장)로 쉽게 객체를 찍어낸다.

 

7.1 생성자 함수 만들기

step1. 일반 함수 만들기

생성자 함수명은 대문자로 시작

여러 객체를 찍어내야 하니, this로 각 객체를 가리키게 만든다.

function TeddyBear() {
  this.colour = 'Black';
  this.texture = 'Plastic';
  this.recording = true;
  this.price = '19,000';
  this.record = function() { return true };
  this.me = function() { console.log(this); }
}

 

step2. new로 일반 함수를 객체로 변신

함수를 만들고 new를 붙이면 객체로 바로 변신

new를 안 붙임

console.log(TeddyBear());
//(결과. undefined)
//그냥 일반 함수를 불러온 것이고, 함수 내부에 return하는 값이 없어서 undefined

new를 붙임

console.log(new TeddyBear());
//(결과. {colour : 'Black', texture : 'Plastic', recording : true, price : '19,000', record : [function]...})

 

 

step3. 매개변수를 추가해서 객체를 다양하게 찍어낼 수 있다.

function TeddyBear(colour, texture, recording, price) {
  this.colour = colour;
  this.texture = texture ;
  this.recording = recording;
  this.price = price;
  this.record = function() { return true };
  this.me = function() { console.log(this); }
}

 

var product1 = new TeddyBear('Purple', 'Soft', true, '10,000');
console.log(product1);
//(결과. {colour : 'Purple', texture : 'Soft', recording : true, price : '10,000', record : [function]...})

var product2 = new TeddyBear('Black', 'Plastic', false, '5,000');
console.log(product2);
//(결과. {colour : 'Black', texture : 'Plastic', recording : false, price : '5,000', record : [function]...})

 

변수에 생성자 함수를 담아내서 새로운 인수를 넣어 다양한 객체를 찍어낸다.

 

step4. 불러오기

console.log(product1.colour);
//(결과. Purple)

console.log(product2.record());
//(결과. true);

 

생성자 함수 Person으로 만든 객체 product1, product2가 있다.

 

 

참조 : https://opentutorials.org/module/4047/24602

실습준비 - JavaScript 객체 지향 프로그래밍