1. JavaScript에서의 this
JavaScript에서 함수의 this키워드는 다른 언어와 조금 다르게 동작합니다.
일반 함수의 this는 함수를 호출한 방법이 결정합니다. (동적 스코프 = Dynamic scope)
ES5에서 함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind 메서드가 도입됐습니다.
ES6에서는 this 바인딩을 제공하지 않는 화살표 함수를 추가됐습니다.
화살표 함수에서 this는 항상 상위 스코프의 this를 가리킵니다. (정적 스코프 = Lexical scope = Static scope)
2. 일반 함수의 this
var person = {
age: 27,
getAge: function() {
console.log(this); //{age: 27, getAge: ƒ}
setTimeout(function() {
console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
}, 1000)
}
}
person.getAge();6번 라인의 this도 person을 가리킬 것 같지만 콜백 함수 내부의 this는 전역 객체 Window를 가리킵니다.
3. 일반 함수의 bind
var person = {
age: 27,
getAge: function() {
console.log(this); //{age: 27, getAge: ƒ}
setTimeout(function() {
console.log(this); //{age: 27, getAge: ƒ}
}.bind(this), 1000)
}
}
person.getAge();6번 라인의 this가 person을 가리키게 하려면 7번 라인에서 this를 바인드시켜야 합니다.
이때 바인드 되는 this는 setTimeout함수 밖에 있으므로 4번 라인의 this와 동일합니다.
4. 화살표 함수의 this
var person = {
age: 27,
getAge: () => {
console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
setTimeout(() => {
console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
}, 1000)
}
}
person.getAge();화살표 함수에서는 this 바인딩을 제공하지 않으므로
4번 라인의 this와 6번 라인의 this가 모두 전역 객체 Window를 가리킵니다.
var person = {
age: 27,
getAge: function() {
console.log(this); //{age: 27, getAge: ƒ}
setTimeout(() => {
console.log(this); //{age: 27, getAge: ƒ}
}, 1000)
}
}
person.getAge();화살표 함수의 this는 항상 상위 스코프의 this를 가리키므로 6번 라인의 this는 4번 라인의 this와 동일합니다.
5. 참고 자료
this
JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.
developer.mozilla.org
Function.prototype.bind()
bind() 메서드는 새로운 함수를 생성합니다. bind() 가 호출된 함수의 this 키워드를 주어진 값으로 설정하고, 새로운 함수의 인수(argument) 앞에 지정한 인수 시퀀스가 사용됩니다.
developer.mozilla.org
화살표 함수
화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
| JavaScript width, height 구하기, jQuery width(), height() 구하기 (0) | 2019.08.29 |
|---|---|
| XMLHttpRequest, jQuery Ajax 예제 (0) | 2019.08.12 |
