this
javascript의 this 키워드는 다른 언어와는 조금 다르게 동작한다.
실행컨텍스트(EC, Execution Context)가 생성될때마다 this의 바인딩이 일어나며 우선순위가 있다.
대부분은 함수를 호출한 방법에 의해 this가 결정된다. 따라서 함수의 호출때마다 다를수도 있다.
1. new 는 해당객체
2. call, apply, bind 같은 명시적 바인딩일 경우 인자로 전달된 객체
3. 객체의 메소드로 호출한 경우 해당 객체
4. 그외 엄격모드는 undefined로 초기화 됨 (엄격, 비엄격에 차이가 있다)
5. 글로벌에서 일반 브라우저는 window, 노드는 global
전역 문맥
전역 실행 문맥에서의 this는 엄격모드 여부에 관계없이 전역 객체를 참조합니다.
// 브라우저 전역 객체는 window
console.log(this === window); // true
함수 문맥
호출한 방법에 의해 this가 결정된다.
같은 코드라도 엄격모드 비엄격모드에서 달라질 수 있다.
// 비엄격모드
function test() {
return this;
}
test() === window; // true
// 엄격모드
functiontest(){
"use strict";
return this;
}
test() === undefined; // truethis의 값을 한 문맥에서 다른 문맥으로 넘기려면 call, apply 메서드를 사용할 수 있습니다.
bind
ECMAScript 5에서는 Function.prototype.bind를 도입
bind는 함수를 어떻게 호출했는지 상관하지 않고 this를 설정할 수 있다.
this는 bind()의 첫 번째 매개변수로 고정.
function test() {
return this.a;
}
var test1 = f.bind({a: 'azerty'});
console.log(g()); // azerty
var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty
var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
arrow function
ES6에서는 스스로 this 바인딩을 제공하지 않는 화살표 함수를 추가.
이때는 실행컨텍스트안의 this값을 유지.
const car = {
name : avante,
getPrice: function() {
return this.name;
},
};
console.log(car.name()); // avante
this의 바인딩
https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/this.md
mdn
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
'~2022 > 아티클' 카테고리의 다른 글
| [아티클 프로젝트 060] 콜 스택(Call stack)과 힙(Heap) (0) | 2020.11.05 |
|---|---|
| [아티클 프로젝트 059] 모듈 시스템: CommonJS, AMD, UMD, ES6 (0) | 2020.11.04 |
| [아티클 프로젝트 058] 즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression) (0) | 2020.11.03 |
| [아티클 프로젝트 057] 취준생이 반드시 알아야 할 프론트엔드 지식들 (var va let va const) (0) | 2020.11.02 |
| [아티클 프로젝트 051] User-Agent Client Hints의 도입, UA 프리징을 대비하라 (0) | 2020.10.14 |
| [아티클 프로젝트 049] Chrome is deploying HTTP/3 and IETF QUIC (0) | 2020.10.08 |
| [아티클 프로젝트 047] 취준생이 반드시 알아야 할 프론트엔드 지식들 -CSS (0) | 2020.10.06 |
| [아티클 프로젝트 045] ORM이란 (0) | 2020.09.24 |
