this
- 함수를 호출할 때 생성되는 실행 컨텍스트 객체
실행 컨텍스트
- 자바스크립트의 코드들이 실행되기 위해서 변수객체, 스코프체인, this 정보들을 담고 있는 곳
- this 의 값은 함수를 호출하는 방법에 의해 결정된다.
상황별 this 의미
- 전역 공간 에서의 this
- 메서드로써 호출 할 때 내부에서의 this
- 함수로써 호출 할 때 내부에서의 this
- 콜백 함수 호출 시 내부에서의 this
- 생성자 함수 내부에서의 this
전역 공간에서의 this
- 전역 공간에서 this 는 전역 객체 (window) 를 가리킴
console.log(this) // {alert: f(), atob: f(), blur: f(), ...}
console.log(window) // {alert: f(), atob: f(), blur: f(), ...}
console.log(this === window) // true
메서드로써 호출 할 때의 this
- 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있음
- 모든 메서드는 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용함
- 메서드 내부에서 this 키워드를 사용하면 객체에 접근 가능
- " 점 앞 " 의 this 는 객체를 나타냅니다.
let user = {
name: "John",
age: 30,
sayHi() {
// 'this'는 '현재 객체'를 나타냅니다.
alert(this.name);
}
};
user.sayHi(); // John
함수로써 호출 할 때의 this
- 그냥 함수를 호출할 때는 this 가 지정되지 않음.
var obj1 = {
outer: function() {
console.log(this) // obj1
}
}
obj1.outer()
- 위 예제는 메서드로써 호출 한 것
- 결과는 outer 함수의 this 에는 점 앞의 객체인 obj1 이 바인딩 됨.
var obj1 = {
outer: function() {
var innerFunc = function () {
console.log(this) // Window, obj2
}
innerFunc()
}
}
obj1.outer()
- 위 예제는 객체가 아닌 그냥 변수에 담아 호출한 것
- 결과는 전역 객체 (window) 가 console 에 나옴.
var obj1 = {
outer: function() {
console.log(this)
var innerFunc = function () {
console.log(this)
}
innerFunc()
var obj2 = {
innerMethod: innerFunc
}
obj2.innerMethod() // obj2
}
}
obj1.outer()
- 위 예제는 innerFunc() 함수를 obj2 라는 객체의 innerMethod 라는 프로퍼티에 할당해서 호출한 것
- 결과는 점 앞의 객체인 obj2 가 바인딩 됨.
콜백 함수 호출 시 this
- 콜백 함수는 기본적으로 함수이기 때문에, this 를 지정하지 않으면 전역객체를 가리킴.
document.body.innerHTML += '<button id="a">클릭</button>'
document.body.querySelector('#a').addEventListener('click', function (e) {
console.log(this, e)
// '<div id="root"></div><button id="a">클릭</button>'
- 결과는 addEventListener 앞에 지정한 객체가 있으므로, console.log 에는 코드 하단에 있는 결과가 나온다.
생성자 함수 내부에서의 this
생성자 함수
- 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수
- 생성자를 클래스 (class)
- 클래스를 통해 만든 객체를 인스턴스 (instance)
- 생성자 함수 내부에서의 this 는 새로 만들 구체적인 인스턴스 자신
var Cat = function (name, age) {
this.bark = '애용'
this.name = name
this.age = age
}
var choco = new Cat('초코', 7)
var nabi = new Cat('나비', 5)
console.log(choco, nabi)
// Cat { bark: '애용', name: '초코', age: 7 }
// Cat { bark: '애용', name: '나비', age: 5 }
- 생성자 함수 Cat 를 호출하면, Cat 에 대한 prototype 프로퍼티가 있는 객체가 만들어짐.
- 미리 준비된 공통 속성을 해당 객체(this) 에 부여함
- 결과는 this 가 각각 choco 인스턴스, nabi 인스턴스를 가리키게됨.
this 정리
- this 는 함수 호출 방식에 따라서 동적으로 결정
