Object 생성하는 기계 constructor

Jo yun hee·2022년 6월 5일
0

javaScript

목록 보기
14/17

constructor란?

objest를 복사하고 싶을때 사용한다.
비슷한 object를 여러개 만들고 싶을 때!!!

사람이라는 오브젝트를 여러개 만들고 싶다~~~ 아래 처럼 만들면 될까?

let 사람 = { name : 'Kim' };
let 사람 = { name : 'Kim' };
let 사람 = { name : 'Kim' };

let 사람 = { name : 'Kim' };
let 사람2 = 사람;

각각 독립적인 오브젝트가 생성되는 것이 아니라 값을 공유한다

그러면 오브젝트를 복사해서 만들고 싶다면 어떻게 만들면 좋을까?

오브젝트를 생성하는 기계를 만들자!!

예시를 통해 이해를 해보자.

학생 출석부를 만들어보자.

let 학생1 = { name : 'Kim', age : 15 };
let 학생2 = { name : 'Park', age : 15 };
//이렇게 만들면 너무 힘들다

비슷한 학생 오브젝트를 여러개 만들려면?
constructor라는 오브젝트 생성기계를 만들자!

let 학생1 = { name : 'Kim', age : 15 };

function Student () {
	this.name = 'Kim'; //새로 생성되는 오브젝트에 이름이라는 속성을 넣고 값을 넣었다
  	this.age = 15;
  	this.sayHi = function(){
    console.log('안녕하세요' + this.name + ' 입니다');
  }
}

let 학생1 = new Student();
let 학생2 = new Student();

기계를 만드는 방법

  • 함수명의 첫글자는 대문자로 이름을 짓는다

  • this가 필요하다
    this는 새로생성되는 오브젝트를 가리킨다

이것이 바로 constructor이다. 오브젝트 복사를 해준다~

새로 생성되는 오브젝트에 이름과 나이가 모두 같다! 이것을 변수로 바꿔보자~ 유연하게 만들어보자!


function Student (name) { //파라미터 여러개 가능하다
	this.name = name; 
  	this.age = 15;
  	this.sayHi = function(){
    console.log('안녕하세요' + this.name + ' 입니다');
  }
}

Student('Park')

let 학생1 = new Student('Park'); //{name: 'Park', age: 15, sayHi:f}
let 학생2 = new Student(); //파라미터자리에 값을 적지 않으면 undefined 출력

this는 기계에서 새로생성되는 오브젝트 (instance)

Student는 오브젝트 생성기계 (constructor, 생성자)

문제를 통해 잘 이해했는지 확인해보자!

var product1 = { name : 'shirts', price : 50000 };
var product2 = { name : 'pants', price : 60000 };
Q1. 위처럼 생긴 상품오브젝트들을 뽑아낼 수 있는 constructor를 제작해보세요.

그리고 실제 상품 두개를 뽑아보십시오.

Q2. 상품마다 부가세() 라는 내부 함수를 실행하면 콘솔창에 상품가격 * 10% 만큼의 부가세금액이 출력되도록 하고 싶으면

constructor를 어떻게 수정해야할까요?

예를 들면 product1.부가세() 이렇게 쓰면 콘솔창에 5000이 출력되어야합니다.

function Product (name, price) {
	this.name = name;
  	this. price = price;
  	this.부가세 = function(){
    console.log(this.price * 0.1);
    }
}

let products1 = new Product('shirts', 5000);
let products2 = new Product('pants', 6000);

0개의 댓글