[Javascript] #8. Javascript This

[Javascript] #8. Javascript This

안녕하세요, 개발자 iGon 곤잘레스입니다! 오늘의 포스팅할 내용은 자바스크립트의 this입니다. 자바스크립트의 this는 지난 Class 포스트와 Function 포스트에서 잠깐 알아봤었는데요. 어떤 상황에 따라 this가 다르게 나타나는 것을 확인하셨을 겁니다. 이번 시간에 이 this에 대해서 자세하게 알아보도록 하겠습니다.

1. 일반적 상황에서의 this

일반적으로 스크립트 작성 시에 this를 출력해보면, this 객체는 window 객체를 가리키는 것으로 나올 것입니다. 이는 this를 호출한 주체가 global object인 브라우저의 window 객체이기 때문입니다.

2. 함수 내에서의 단순 this 호출

함수 내에서 this를 단순하게 호출하게 되면 기본값으로 브라우저의 window 전역 객체를 참조하게 됩니다. 하지만 strict mode로 작성하게 되면 this는 undefined를 출력합니다.

function example() { console.log(this); } function exampleStrictMode() { 'use strict'; console.log(this); } example(); // window 객체 호출 exampleStrictMode(); // undefined 호출

3. this의 값을 다른 문맥으로 넘기기 위한 메서드: call(), apply()

call(), apply() 메서드를 사용하면 this 지시자가 가리키는 대상을 명시적으로 전달할 수 있습니다. 'strict mode'가 아닐 때, this로 전달된 값이 객체가 아닌 경우, 이를 객체로 변환합니다. 만약 전달된 값이 null 또는 undefined라면 this는 전역 객체를 반환합니다.

const item = { obj: "item" }; const obj = "object"; function callObj() { return this.obj; } callObj(); // this는 global object를 가리키며 이 때, obj는 'object' 출력 callObj.call(item); // this는 item object를 가리키며 이 때, obj는 'item' 출력 callObj.apply(item); // this는 item object를 가리키며 이 때, obj는 'item' 출력 function callNoneStrictMode() { console.log(Object.prototype.toString.call(this)); } callNoneStrictMode.call('string'); // [object String] callNoneStrictMode.call(0); // [object Number] callNoneStrictMode.call(undefined); // [object Window]

4. bind 메서드(ECMAScript5)

ECMAScript5에 도입된 bind()에 넘겨지는 객체의 this는 원본 함수를 가진 새로운 함수를 생성합니다. 이때, this는 호출 방식과 상관없이 bind()의 첫 번째 매개변수로 고정됩니다.

function bindTest() { return this.object; } const bindTestFirst = bindTest.bind({ object: 'test' }); console.log(bindTestFirst()); // test 출력 const bindTestSecond = bindTestFirst.bind({ object: 'test2' }); console.log(bindTestSecond()); // test 출력(bind는 한 번만 동작, 첫 번째로 넘긴 'test'값으로 고정)

5. 화살표 함수에서의 this

화살표 함수에서 this는 Function관련 포스팅에서 설명했듯이, 전역 객체를 가리킵니다. 화살표 함수는 call(), bind(), apply()를 사용해 호출하여 this의 값을 정해주더라도 이를 무시합니다.

const callThis = (() => this); console.log(callThis()); // window 객체 호출

6. 객체의 메서드에서의 this

어떤 객체를 생성하여, 객체 내 메서드에서 this를 호출하게 되면 this는 해당 객체를 가리킵니다.

const object = { item: 10, callItem: function() { return this.item; } } console.log(object.callItem()); // 이 때, this는 object 객체를 가리키며, 10을 출력

7. 생성자에서의 this

new 키워드를 사용하여 함수를 생성자로 사용하면 this는 새로 생긴 객체를 가리킵니다.

function createObject() { this.item = 10; } const obj = new createObject(); console.log(obj.item); //10 출력

8. 이벤트 처리기에서의 this

이벤트 처리기에서의 this는 이벤트를 발생시킨 요소를 가리킵니다. 하지만 일부 브라우저에서는 addEventListener() 외의 다른 방법으로 추가한 경우에는 이를 따르지 않는다는 점은 유의해주시기 바랍니다. 또한, HTML 문서에서 인라인 이벤트 처리기로 사용하게 되면 이벤트를 작성한 this는 DOM요소로 설정되나, 내부 함수를 작성하는 경우에는 전역 객체를 가리킵니다.(비 엄격 모드)

function btnEvent(e) { console.log(this); } let btn = document.createElement('button'); btn.addEventListener('click', btnEvent, false); btn.click(); // 요소 출력 //HTML 내부에서 button 표시 global object 표시 // 각 버튼 클릭 시, 위의 버튼은 출력하고 아래의 버튼은 window/global 객체 출력

지금까지 this에 대해 알아보았습니다. this를 정확하게 사용하기 위해서는 기본적으로 명시적으로 특정 객체를 호출하는 경우가 아니라면 window/global 객체를 가리킨다는 것을 유념하시고, 만약 명시적으로 지정이 필요한 경우에는 위에서 제시한 예제를 활용하여 call, apply, bind 등을 적절하게 사용하시면 됩니다. 다음 포스팅에서는 prototype에 대해 알아보도록 하겠습니다. 지금까지 긴 글 읽어주셔서 감사합니다.

from http://igonnnnn.tistory.com/15 by ccl(A) rewrite - 2021-12-30 00:01:31