생성자함수와 this - 풀스택개발 EastFlag

자바스크립트에서의 this

자바스크립트에서 this는 크게 3가지로 사용될 수 있다.

첫번째는 생성자함수에서 사용되는 this 이다. 여기서의 this는 자기 자신을 가르킨다.

두번째는 json 객체에서 사용되는 this이다. 여기서는 바로 위 parent를 가르킨다.

첫번째와 두번째 경우를 제외하고 사용되는 this는 global this 이다.

생성자 함수

Q: 자바스크립트에서 객체를 생성하는 방법은 무엇인가?

자바스크립트에서는 리터럴객체로 객체를 생성할 수도 있고, 생성자 함수로 객체를 생성할 수도 있습니다.

Q: 아래는 하드코딩된 리터럴 객체이다. name, email을 파라메터로 받아서 객체를 생성하도록 생성자 함수를 사용하시오. 만일 name, email 파라메터가 값이 넘어오지 않는 경우 ‘Tom’, ‘tom@gmail.com’의 기본값으로 초기화 하시오.

function Person(name, email) {
  this.name = name ? name : 'Tom';
  this.email = email ? email : 'tom@gmail.com'
}

let person1 = new Person();
console.log(person1);

function Person(name, email) {

this.name = name ? name : 'Tom';

this.email = email ? email : 'tom@gmail.com'

}

let person1 = new Person();

console.log(person1);

default parameter 문법을 이용하면 아래와 같이 간략이 할 수 있다.

function Person(name = 'Tom', email = 'tom@gmail.com') {
  this.name = name;
  this.email = email;
}

let person1 = new Person();
console.log(person1);

function Person(name = 'Tom', email = 'tom@gmail.com') {

this.name = name;

this.email = email;

}

let person1 = new Person();

console.log(person1);

Q: 생성자 함수 안에서 사용된 this는 무엇을 의미하는가?

new 라는 키워드를 사용해서 객체를 생성하게 되면 자기 자신을 가르키는 빈 객체인 {} 가 생성되고 this 는 이것을 가르킨다.

Q: 만일 생성자 함수 마지막에 return 1; 이라는 문장을 넣고 다시 객체를 생성하면 출력은 무엇인가? 1이 리턴되는가? 아니라면 이유는 무엇인가?

생성자 함수의 목적은 객체를 만들기 위해서이다. 리턴문이 없다면 this가 리턴되고 만일 return문이 객체를 리턴한다면 해당 객체가 반환되겠지만 1과 같이 객체가 아닌 타입이 리턴된다면 return이 없는것과 마찬가지로 this가 리턴된다.

See the Pen new function and this by LeeDongKee (@eastflag) on CodePen.0