[TIL / JavaScript] this (2)

4. ‘new’ keyword

---

function foo () {
	console.log(this);
}

new foo();

• 생성자(new) 뒤에 함수를 호출하면 this는 빈 객체가 된다.
• 어떤 함수든 new를 통해 함수를 실행할 수 있다.

function foo () {
	this.name = '바닐라코딩';
}

var vanillaCoding = new foo();

console.log(vanillaCoding);
/*
{
	name: '바닐라코딩'
}
*/

1. 빈 객체가 할당된다. this = {}
2. this(빈 객체)의 프로퍼티에 값을 넣어준다.
3. 키와 값이 있는 객체가 반환된다.

• 원래 함수는 리턴 값이 있어야 값을 반환하지만 생성자를 통해 함수를 실행시키면 리턴 값이 없어도 자동으로 this 객체가 리턴된다.

function Person (name, age) {
	this.name = name;
	this.age = age;
}

var ken = new Person('ken huh', 34);
var wan = new Person('wan huh', 30);

console.log(ken);
/*
{
	name: 'ken huh'
	age: 34
}
*/
console.log(wan);
/*
{
	name: 'wan huh'
	age: 30
}
*/

new를 통해 함수를 실행시킬 때마다 this에 빈 객체가 만들어진다.

• new를 사용해서 실행하는 함수를 생성자 함수라 한다.
• 생성자 함수는 첫 글자를 대문자로 표기한다.
• 생성자 함수를 통해 만들어진 빈 객체를 인스턴스라 한다.
• 생성자 함수도 인자로 값을 넣어줄 수 있다.

이벤트 핸들러 내부의 this

---

let element = document.querySelector('#vanila');

element.addEventListener('click', function onClick(ev){
    console.log(this);
    console.log(ev.currentTarget);
});

• 이벤트 핸들러 내부의 this는 전역 객체가 아닌 이벤트 객체의 currentTarget 프로퍼티와 같다.
• 이벤트 핸들러에서 this는 절대 추천하지 않는다. 명료하게 작성하는 편이 좋다.

P.S.

✍️ 요즘 미니프로젝트를 하면서 내가 아직 문법적인 지식이 많이 부족하다는 생각이 들었다. 자바스크립트의 핵심적인 원리를 이해하는 방향으로 공부를 더 많이 해야겠다😶

Reference

---

• 자바스크립트 "this" 정리 - Part 5 ~ 6 by 바닐라코딩