7. this

7-1. this란?

this;
// Window

7-2. 함수 호출 방식

• 일반 함수

• 메서드

• 생성자 함수

• call(), apply(), bind()

7-2-1. 일반 함수

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

a();
// Window

function a() {
  'use strict';
  console.log(this);
}

a();
// undefined

엄격 모드

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었죠. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다.

https://ko.javascript.info/strict-mode

function a() {
	console.log(this); // window
	function b() {
		console.log(this); // window
	}
	b();
}
a();

function a() {
'use strict';

	console.log(this); // undefined
	function b() {
		console.log(this); // undefined
	}
	b();
}
a();

const arr = ["apple", "banana", "graph"];

// this가 window를 가리키지 않음
arr.map(function() { console.log(this); }, { a : 1 });

{ a: 1 }
{ a: 1 }
{ a: 1 }
(3) [undefined, undefined, undefined]

7-2-2. 메서드 호출

let fruit = {
	name: 'Apple',
	price: 500,
};

// 메서드 : 상태 데이터를 참조하고 조작하는 동작
fruit.fruitName = function() {
	alert("사과입니다.");
};

fruit.fruitName(); 
// 사과입니다.

let fruit = {
	//...
};

// 함수 선언
function fruitName() {
	alert("사과입니다.");
};

// 선언된 함수를 메서드로 등록
fruit.fruitName = fruitName;

fruit.fruitName();
// 사과입니다.

let fruit = {
	// 프로퍼티 : 객체 고유의 상태 데이터
	name: "Apple",
	price: 500,
	
	// 'this'는 '현재 객체'를 가리킵니다.
	fruitName: function() {
		alert( this.name );
	}
};

fruit.fruitName();
// Apple

let fruit = {
	name: "Apple",
	price: 500,

	fruitName() {
		alert( this.name );
	}
};

fruit.fruitName();
// Apple

let anotherFruit = { 
	name: "Strawberry" 
};

// fruitName 메서드를 anotherFruit 객체의 메서드로 할당
anotherFruit.fruitName = fruit.fruitName;

// fruitName 메서드를 호출한 객체는 anotherFruit이다.
console.log(anotherFruit.fruitName()); // Strawberry

// fruitName 메서드를 변수에 할당
let fruitName = fruit.fruitName;

// fruitName 메서드를 일반 함수로 호출
console.log(fruitName()); // ''

// this.name = window.name
// window.name은 빌트인 프로퍼티로 브라우저 창의 이름을 나타내며 기본값은 ''이다.

let obj = {
	word: 'world',
	sayhello() {
		return `hello ${this.word}`;
	}
}

// 선언된 함수를 메서드로 등록
let sayhello = obj.sayhello;

console.log(sayhello()); 
// hello undefined

let obj = {
	word: 'world',
	sayhello() {
		console.log(this);
		return `hello ${this.word}`;
	}
}
// 선언된 함수를 메서드로 등록
let sayhello = obj.sayhello;

console.log(obj.sayhello()); 
// hello world

7-2-3. 생성자 함수 호출

1. 생성자함수.prototype을 상속하는 빈 객체가 생성된다. 이때 빈 객체는 생성자함수.prototype을 상속하므로 빈 객체에 생성자 함수의 메서드들이 프로토타입 체인을 통해 연결된다.

2. 생성자 함수 코드를 실행한다. 보통 이 단계를 통해서 생성된 객체에 필요한 프로퍼티를 연결시켜준다. (경우에 따라서 메서드도 추가가 가능하다.)

3. 함수 실행이 끝나면 프로퍼티와 메서드가 연결된 완성된 객체(인스턴스)를 new 연산의 결괏값으로 반환한다.

// 전체 코드
function NormalFunction(arg1, arg2) {

	...
    // 생성자함수.prototype.메서드이름
    NormalFunction.prototype.normalMethod = function () {
        console.log("노말 메서드 예시입니다.");
    };
}

const normal = new NormalFunction(10, 20);

// 인스턴스.메서드이름()
normal.normalMethod();    

노말 메서드 예시입니다.

7-2-3-1. 생성자 함수 내 this의 부재

// 전체 코드
function NormalFunction(arg1, arg2) {

		// 빈 객체 {}가 생성되고 함수 함수 코드를 실행하여도 {}를 가리키는 것이 없다면 {}에 프로퍼티와 메서드를 추가할 수 있는 방법도 {}를 반환할 방법도 없다.
    const normalArg1 = arg1;
    const normalArg2 = arg2;

    const normalMethod = function () {
        console.log("노말 메서드 예시입니다.");
    };
}

const normal = new NormalFunction(10, 20);
console.log(normal);

💡

Tip: this 확인하기

• 코드를 수행하는 동안 console.dir 명령어로 NormalFunction의 구조 안에서는 this를 찾아볼 수 없다.

• this의 존재는 개발자 도구 > 소스에서 디버깅을 통해 로컬 스코프에 있는 this를 확인할 수 있다.

 

7-2-3-2. 생성자 함수 코드 내 this

// 전체 코드
function NormalFunction(arg1, arg2) {
    console.log(this);    // this가 가리키는 것이 무엇인지 확인

    this.normalArg1 = arg1;
    this.normalArg2 = arg2;

    this.normalMethod = function () {
        console.log("노말 메서드 예시입니다.");
    };

    console.log(this);   // 함수 수행을 통해 this가 어떻게 변화하였는지 확인
}

const normal = new NormalFunction(10, 20);
console.dir(normal);

1. new 키워드와 함께 함수를 호출하면 생성자 함수로 함수를 호출하여 인스턴스로 쓸 빈 객체를 생성한다. 이때 생성자 함수 내의 this에 빈 객체를 바인딩 한다.

// 전체 코드
function NormalFunction(arg1, arg2) {
		// 2. this는 아직 프로퍼티와 메서드가 추가되지 않은 빈 객체 {}를 가리킨다.
    console.log(this);    
    ...
}

// 1. 빈 객체 {}가 생성되고 {}를 NoramlFunction의 this가 가리키게 된다.
const normal = new NormalFunction(10, 20);   
...

 

2. 함수 내 코드를 수행하며 빈 객체에 프로퍼티와 메서드를 추가시켜준다.

// 전체 코드
function NormalFunction(arg1, arg2) {
    console.log(this);    

    this.normalArg1 = arg1;  // {}.normalArg1 = arg1;처럼 동작
    this.normalArg2 = arg2;  // {}.normalArg2 = arg2;처럼 동작

		// {}.normalMethod = function(){...} 처럼 동작
    this.normalMethod = function () {
        console.log("노말 메서드 예시입니다.");
    };

		// 함수 수행을 통해 this가 어떻게 변화하였는지 확인
    console.log(this);   
}

const normal = new NormalFunction(10, 20);

 
콘솔 창에 출력된 결과는 다음과 같다.
 

1. 그리고 마지막으로 생성자 함수의 코드 수행이 완료되었다면 this 가리키고 있는 채워진 객체를 반환한다.

// 전체 코드
function NormalFunction(arg1, arg2) {
...
}

const normal = new NormalFunction(10, 20);
console.dir(normal);

// 전체 코드
function NormalFunction(arg1, arg2) {
    console.log(this);    // this가 가리키는 것이 무엇인지 확인

    this.normalArg1 = arg1;
    this.normalArg2 = arg2;

    this.normalMethod = function () {
        console.log("노말 메서드 예시입니다.");
    };

    console.log(this);   // 함수 수행을 통해 this가 어떻게 변화하였는지 확인
}

console.log(window.normalArg1, window.normalArg2);  // undefined, undefiend

NormalFunction(10, 20);

console.log(window.normalArg1, window.normalArg2);  // 10, 20

7-3. call(), apply(), bind()

7-3-1. call()

// mdn에서 정의하는 call 함수 구문
// func.call(thisArg[, arg1[, arg2[, ...]]])

function printThis(arg1, arg2) {
    console.log(this); // 일반 함수로 호출되면 this는 window를 가리켜야 한다.
    console.log(`call을 통해 넘겨 받은 인자들: ${arg1}, ${arg2}`);
}

const setThisValue = {};

printThis.call(setThisValue, "첫 인수", "둘째 인수");

{}
call을 통해 넘겨 받은 인자들: 첫 인수, 둘째 인수 

7-3-2. apply()

// mdn에서 정의하는 apply 함수 구문
// func.apply(thisArg, [argsArray])

function printThis(arg1, arg2) {
    console.log(this); // 일반 함수로 호출되면 this는 window를 가리켜야 한다.
    console.log(`apply을 통해 넘겨 받은 인자들: ${arg1}, ${arg2}`);
}

const setThisValue = {};

printThis.apply(setThisValue, ["첫 인수", "둘째 인수"]);

{}
apply를 통해 넘겨 받은 인자들: 첫 인수, 둘째 인수 

7-3-3. bind()

// mdn에서 정의하는 bind 함수 구문
// func.bind(thisArg[, arg1[, arg2[, ...]]])

function printThis(arg1, arg2) {
    console.log(this); // 일반 함수로 호출되면 this는 window를 가리켜야 한다.
    console.log(`call을 통해 넘겨 받은 인자들: ${arg1}, ${arg2}`);
}

const setThisValue = {};

// 함수를 호출(실행)하지 않고 새로운 함수를 생성해준다.
// 초기 인수로 "첫 인자"를 지정해준다.
const newPrintThis = printThis.bind(setThisValue, "첫 인수");

// 초기 인수로 "첫 인수"를 넘겨주어 함수 호출 시 ("첫 인수", 함수 호출 시 넘겨준 인수들)를 인수로 함수를 호출시켜 준다.
newPrintThis(); // newPrintThis("첫 인자");로 함수를 호출
newPrintThis("둘째 인자"); // newPrintThis("첫 인자", "둘째 인자");로 함수를 호출

// bind를 통해 새 함수를 생성했기 때문에 기존의 함수는 원래대로 동작한다. this 값과 초기인수가 다름
printThis();

{}
bind을 통해 넘겨 받은 인자들: 첫 인자, undefined
{}
bind을 통해 넘겨 받은 인자들: 첫 인자, 둘째 인자
window
bind을 통해 넘겨 받은 인자들: undefined, undefined

7-4. 화살표 함수의 this

function () {
	console.log("hi");
}

// 위의 함수와 동일하게 동작
() => { console.log("hi") };

7-4-1. 화살표 함수에서의 this

“ 화살표 함수에서 this는 자신을 감싼 정적 범위입니다. 전역 코드에서는 전역 객체를 가리킵니다. ” 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this#화살표_함수

// var를 통해 변수를 선언하면 전역객체 window의 프로퍼티로 저장된다.
var fruitName = "apple";
const obj = { fruitName: "banana" };

function nestedFunc() {
    function normalFunc() {
        console.log(this.fruitName);
    }
    const arrowFunc = () => {
        console.log(this.fruitName);
    };
    const nestedArrowFunc = () => {
        const arrowFunc2 = () => {
            console.log(this.fruitName);
        };
        arrowFunc2();
    };
    normalFunc();
    arrowFunc();
    nestedArrowFunc();
}

// call 메서드를 통해서 nestedFunc의 this 값을 obj로 명시해준다.
nestedFunc.call(obj);

apple
banana
banana

7-4-2. 화살표 함수 내 this 사용 시 주의사항

// var를 통해 변수를 선언하면 전역객체 window의 프로퍼티로 저장된다.
var fruitName = "apple";
const obj = { fruitName: "banana" };

function nestedFunc() {
    normalFunc();
    arrowFunc();
    nestedArrowFunc();
}

function normalFunc() {
    console.log(this.fruitName);
}
const arrowFunc = () => {
    console.log(this.fruitName);
};
const nestedArrowFunc = () => {
    const arrowFunc2 = () => {
        console.log(this.fruitName);
    };
    arrowFunc2();
};

// call 메서드를 통해서 nestedFunc의 this 값을 obj로 명시해준다.
nestedFunc.call(obj);

apple
apple
apple

7-4-3. this의 활용

// 전역 객체에 fruitName 프로퍼티 추가한다.
var fruitName = "apple";

function Fruit() {
	this.fruitName = "banana";
	
  // setTimeout의 인수로 "일반 함수"를 사용
	// 생성된 인스턴스에서 makeFruitChip1을 사용할 수 있도록 prototype에 함수 등록한다.
	Fruit.prototype.makeFruitChip1 = function() {
		console.log(`I will make ${this.fruitName} chips by makeFruitChip1`);  // this는 함수를 호출한 인스턴스를 가리킨다.
		console.log("making fruit chips..");
		setTimeout(function(){
			// this 값은 전역 객체 window를 가리킨다.
			console.log(this.fruitName + "chips is Done! by makeFruitChip1");  // apple chip
		}, 1000);
	}
	
  // setTimeout의 인수로 "화살표 함수"를 사용
	// 생성된 인스턴스에서 makeFruitChip2를 사용할 수 있도록 prototype에 함수 등록한다.
	Fruit.prototype.makeFruitChip2 = function() {
		console.log(`I will make ${this.fruitName} chips by makeFruitChip2`);  // this는 함수를 호출한 인스턴스를 가리킨다.
		console.log("making fruit chips..");
		setTimeout(() => {
			// this 값은 전역 객체 window를 가리킨다.
			console.log(this.fruitName + "chips is Done! by makeFruitChip2");  // banana chip
		}, 1000);
	}
}

const fruit = new Fruit();
fruit.makeFruitChip1();
fruit.makeFruitChip2();

7-5. 이벤트 핸들러 함수의 this

7-5-1. addEventListener 방식

    <button class="banana-btn">🍌</button>

const bananaBtn = document.querySelector(".banana-btn");

function handleBanana() {
    console.log("바나나입니다. 🍌");
		console.log(this);
}

// 이벤트 핸들러 등록: addEventListener
bananaBtn.addEventListener("click", handleBanana);

바나나 버튼 누를 시 출력 : 
바나나입니다. 🍌
<button class="banana-btn">🍌</button>

7-5-2. event handler property 방식

    <button class="graph-btn">🍇</button>

const graphBtn = document.querySelector(".graph-btn");

function handleGraph(event) {
    console.log("포도 버튼을 눌렀습니다. 🍇");
    console.log(this);
}

// 이벤트 핸들러 등록: onclick 프로퍼티
graphBtn.onclick = handleGraph;

포도 버튼 누를 시 출력 : 
포도입니다. 🍇
<button class="graph-btn">🍇</button>

7-5-3. event handler attribute 방식

<button class="apple-btn" onclick="handleApple()">🍎</button>

// 이벤트 핸들러 함수
function handleApple() {
    console.log("사과 버튼을 눌렀습니다. 🍎");
    console.log(this);
}

사과 버튼 누를 시 출력 : 
사과입니다. 🍎
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

<button class="apple-btn" onclick="handleApple(this)">🍎</button>

// this 값을 인자로 받아오는 것
function handleApple(thisValue) {
    console.log("사과 버튼을 눌렀습니다. 🍎");
    console.log(thisValue);
}

사과 버튼 누를 시 출력 : 
사과입니다. 🍎
<button class="apple-btn" onclick="handleApple(this)">🍎</button>

<button class="apple-btn" onclick="handleApple.call(this)">🍎</button>

// 이벤트 핸들러 함수는 기존의 핸들러 함수와 동일하다.
function handleApple() {
    console.log("사과 버튼을 눌렀습니다. 🍎");
    console.log(this);
}

사과 버튼 누를 시 출력 : 
사과입니다. 🍎
<button class="apple-btn" onclick="handleApple.call(this)">🍎</button>

7-5-4. 차이가 발생하는 이유

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this 예제</title>
</head>

<body>
    <!-- 이벤트 핸들러 등록: HTML-->
    <button class="apple-btn" onclick="handleApple">🍎</button>
    <button class="banana-btn">🍌</button>
    <button class="graph-btn">🍇</button>
    <script>

    </script>
</body>

</html>

const appleBtn = document.querySelector(".apple-btn");
const bananaBtn = document.querySelector(".banana-btn");
const graphBtn = document.querySelector(".graph-btn");

// 이벤트 핸들러 함수
function handleApple() {
    console.log("사과 버튼을 눌렀습니다. 🍎");
    console.log(this);
}

function handleBanana(event) {
    console.log("바나나 버튼을 눌렀습니다. 🍌");
    console.log(this);
}
function handleGraph(event) {
    console.log("포도 버튼을 눌렀습니다. 🍇");
    console.log(this);
}

// 이벤트 핸들러 등록: addEventListener
bananaBtn.addEventListener("click", handleBanana);

// 이벤트 핸들러 등록: onclick 프로퍼티
graphBtn.onclick = handleGraph;

사과 버튼 누를 시 출력 : 
사과입니다. 🍎
window

바나나 버튼 누를 시 출력 : 
바나나입니다. 🍌
바나나 버튼 

포도 버튼 누를 시 출력 : 
포도입니다. 🍇
포토 버튼

💡

이벤트 핸들러 확인하기 크롬 개발자 도구에서는 자바스크립트 이벤트 모니터링을 위해서 몇몇 콘솔 유틸리티 API를 제공하는데 그중에서 getEventListener() API를 사용하면 DOM 요소에 부착된 이벤트 핸들러 함수 목록을 확인할 수 있다. 사용 방법은 크롬의 개발자 도구의 콘솔 창에서 getEventLis tener(확인할 DOM 요소)를 입력해주면 해당 DOM 요소에 부착된 이벤트 핸들러 함수 목록을 확인할 수 있다.

 

출처: https://developer.chrome.com/docs/devtools/console/utilities/#getEventListeners-function

Reference

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

2. https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

3. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions#바인딩_되지_않은_this

4. https://developer.mozilla.org/ko/docs/Glossary/Scope

5. https://developer.mozilla.org/ko/docs/Glossary/Identifier

6. https://developer.chrome.com/docs/devtools/console/utilities/#getEventListeners-function

7. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this#dom_이벤트_처리기로서