This란 무엇일까?
this는 함수가 호출되는 시점의 실행 컨텍스트(Execution Context)이다.
이것도 프론트 엔드 면접의 단골 소재중 하나이다. this의 쓰임새가 여러가지 이기 때문이다!
그 이유는 정의를 보면 알 수 있는데, 실행컨텍스트=코드가 실행되는 환경, 실행하기 위해 필요한 환경이다.
그러므로, 함수를 실행하는 환경이 달라지면 this가 변한다는 의미이다. 그래서 this에 바인딩될 객체는 함수 호출 패턴에 의해 결정된다.
이는 자바스크립트 엔진이 수행하는 것이다. 이러한 자바스크립트 엔진의 암묵적 this 바인딩은 여러가지가 있다.
1. this를 전역에서 호출하면, window(전역객체)
this; // Window {}2. 함수(내부함수)에서 호출하면, window(전역객체)
var foo = function () {
console.dir(this);
};
// 1. 함수 호출
foo(); // window3. 메소드에서 호출하면, 해당 메소드를 소유한 객체
var obj = {
a: function() { console.log(this); },
};
obj.a(); // obj4.생성자에서 호출하면, 해당 함수는 생성자 함수로 동작
// 생성자 함수
function Person(name) {
// 생성자 함수 코드 실행 전 -------- 1
this.name = name; // --------- 2
// 생성된 함수 반환 -------------- 3
}
var me = new Person('Lee'); //일반 함수를 생성자 함수처럼 사용
console.log(me); // Person {name: "Lee"}
// new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수로 동작하지 않는다
일반 함수로서 호출되었기 때문에 객체를 암묵적으로 생성하여 반환하지 않는다..
var you = Person('Kim');
console.log(you); // undefined5. apply/call/bind 호출하면, 명시적으로 this를 바인딩 할 수 있다.
call()과 apply()는 유사하지만, 매개변수 처리 방법에서 차이가 있다.
이 두 메소드는 함수에서 접근할 this객체를 변경할 수 있었다.
func.call(thisArg[, arg1[, arg2[, ...]]]) 호출함수.call(this로_지정할_대상)
func.apply(thisArg, [argsArray]) 호출함수.apply(this로_지정할_대상 배열로, 값이 없는 경우 null 대신, 배열설정 안함)
만약 커스텀 this를 영구적으로 가리키도록 하는 함수를 만들려면,
func.bind(thisArg[, arg1[, arg2[, ...]]])
const dog = {
age: 12
}
function printDogAge(name, location) {
console.log(this.age, name, location)
}
printDogAge.call(dog, 'mike', 'seoul') // 12, mike, seoul
printDogAge.apply(dog, ['mike', 'seoul']) // 12, mike, seoul
const print = printDogAge.bind(dog);
print('lala', 'USA') //12 lala USA
//추가 예제
const log = console.log.bind(document);
log('test'); // test
log('helloooooo') // helloooooo6. 이벤트 핸들러안의 this => 이벤트를 받을 HTML DOM요소
<!DOCTYPE html>
<html>
<body>
<input type="button" value="click" id="btn" onclick="console.log(this)" />
</body>
</html>7. 화살표 함수의 this 바인딩 => 화살표 함수로 선언한 함수에는 this가 없습니다.
JavaScript에서는 어떤 식별자(변수)를 찾을 때 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색합니다. 그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 되는 것이죠. 화살표 함수에서의 this 바인딩 방식도 이와 유사합니다.
화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.
참고자료
this | PoiemaWeb
자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을
poiemaweb.com
https://mong-blog.tistory.com/entry/call-apply-bind%EC%9D%98-%EC%B0%A8%EC%9D%B4
call, apply, bind의 차이
이 포스팅은 call(), apply(), bind()에 대해 소개하고 있습니다. js에서는 함수 호출 방식과 상관없이 this에 접근할 수 있다. 그렇다면 this를 우리가 원하는 객체로 지정할 수는 없을까? 이번시간에는
mong-blog.tistory.com
[JavaScript] 화살표 함수와 this 바인딩
본래 JavaScript에서 함수를 선언할 땐 function 이란 키워드를 쓰죠. 하지만 ES6가 도입되면서 함수를 선언하는 새로운 문법이 등장했습니다. 바로 화살표 함수입니다.
velog.io
'개발 파운데이션 > JavaScript' 카테고리의 다른 글
| Javascript 호이스팅 (0) | 2023.05.12 |
|---|---|
| 자바스크립트 동작원리란? (0) | 2023.05.11 |
| 클로저(closure)의 개념 (0) | 2023.05.09 |
| 프로토타입과 프로토 타입 체인은 알자! (0) | 2023.05.08 |
| Javascript의 역사와 표준화 (0) | 2023.05.08 |
