JS. 코어 ('new'연산자와 생성자 함수)

Vorhandenheit ·2021년 6월 17일
0

JS.코어

목록 보기
7/29
post-custom-banner

'new' 연산자와 생성자 함수

'new'연산자와 생성자 함수를 사용하면 유사한 객체 여러개를 쉽게 만들 수 있음

1.생성자 함수

1)함수 이름의 첫 글자는 대문자로 시작
2) 반드시 "new"연산자를 붙여 실행

function User(name) {
	this.name = name;
  	this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); //Jack
alert(user.isAdmin);; //false

new User(...)를 써서 함수를 실행, 아래와 같은 알고리즘 동작

  • 빈 객체를 만들어 this에 할당
  • 함수 본문 실행, this에 새로운 프로퍼티 추가해 this를 수정
  • this를 반환
function User(name) {
	//this = {} (빈 객체가 암시적으로 만들어짐)
	/새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;
  //return this; (this가 암시적으로 반환됨)
}

<new functin() {...} >
재사용할 필요가 없는 복잡한 객체
코드를 익명 생성자 함수로 감싸주는 방식 사용할 수 있음
익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화할 수 있음

let user = new function() {
	this.name = "John"
    this.isAdmin = false;
};

2.new.target과 생성자 함수

function User() {
	alert(new.target);
}
// "new" 없이 호출함
User(); // undefined

// "new"를 붙여 호출함
new User(); // function User {...}
function User(name) {
	if (!new.target) { //new 없이 호출해도
      return new User(name); // new를 붙여줌
	}
  this.name = name;
}

let John = User("John"); //
alert(john.name); '//John

생성자와 return 문

생성자 함수에는 보통 return문이 없음
반환해야 할 것은 모두 this에 저장, this는 자동으로 반환되기 때문

만약에 return문이 있다면

  • 객체를 return 한다면, this대신 객체가 반환
  • 원시형을 return 한다면, return문이 무시
function BigUser() {
	this.name = 'John';
  	return {name: "Godzilla"}; // this가 아닌 새로운 객체를 반환
}
alert(new BigUser().name); // Godzilla

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있음
메서드를 더해주는 것도 가능
new User(name)은 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어줌

function User(name) {
	this.name = name
  	this.sayHi = function() {
    	alert("My name is: " + this.name);
    }
}

let john = new User("John");
john.sayHi(); // My name is: John

과제

1) 함수 두 개로 동일한 객체 만들기

2) 계산기 만들기

3) 누산기 만들기

profile
읽고 기록하고 고민하고 사용하고 개발하자!
post-custom-banner

0개의 댓글