* 어...음...설날 전후로 신나게 펑펑 놀았습니다.
오늘은 this에 관해서 파헤쳐보겠습니다.
* 참고 자료 : MDN Web Docs - this
위 참고 자료를 읽어보면,
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
(= this는 함수를 호출한 객체)
라고 합니다.
* 유튜브 별코딩님 영상을 참고했습니다.
1. 전역문맥 (함수 외부에서 this 값)
console.log(this); // window 객체
if(true) {
console.log(this);
} // window 객체전역적인 문맥에서 this에 접근하면 this는 window 객체로 출력된다.
1-1. 엄격모드
'use strict';
console.log(this); // window 객체
2. 함수문맥 (함수 내부에서 this 값)
function main() {
cosole.log(this);
}
main(); // window 객체
//main(); === window.main();시작 전 참고 자료에 나와있듯이,
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
function 키워드로 함수를 정의하면 ,
함수는 window객체로 정의된다.
main(); 으로 전역적으로 호출하는것은 window.main();과 같다.
2-1. 엄격모드 (함수 외부에)
'use strict';
function main() {
cosole.log(this);
}
main(); // undefined
=> window.main(); // window 객체엄격모드로 함수 외부에서 this값을
main(); 으로 호출하면 undefined 값이 나온다.
/* 엄격모드는 문법을 좀 더 강하게 검사를 한다고 보면 될 거 같네요.
기본적으로 자바스크립트에서 x=1이라고 하면 console 창에 에러가 나지않지만,
엄격모드를 활성화하고 x=1이라고 치면 console 창에서는 문법적으로 에러가 있다고 표시를 합니다. */
그래서 엄격모드에서 호출하려고 하면,
main();이 아닌 window.main();으로 호출해야한다.
2-2. 엄격모드 (함수 내부에)
function main() {
'use strict';
cosole.log(this);
}
main(); // undefined
=> window.main(); // window 객체
함수 내부에서 엄격모드를 활성화 해도 위와 같이 나온다.
3. 객체의 메서드
const obj = {
name : "곰인간",
main: function () {
console.log(this);
}
};
obj.main();
// name: "곰인간", main: f(); // this는 함수를 호출한 객체이다.
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
(= this는 함수를 호출한 객체)
main(); : 누가 기침 소리를 내었는가?
obj. : 기침기침
함수 안에 있는 this는 함수를 호출한 객체가 된다.
/* main(); 함수는 obj라는 객체가 main();을 호출
=== obj.main(); obj의 메서드로 main(); 을 호출
라고 생각했는데 혹시나 틀렸다면 댓글부탁드립니다. */
객체는 obj이므로 this값은, {name: "곰인간", main: f}으로 나온다.
const main2 = obj.main;
main2(); // window객체번외로 obj.mian();을 main2 변수에 할당을 하고,
mian2(); 함수를 호출하면 어떻게 될까요?
답은 window가 출력됩니다.
mian2();를 호출한 객체가 obj가 아닌 전역적으로 호출된 함수이기 때문입니다.
3-1. this는 함수가 정의된 위치나 방법에 영향을 받지 않는다.
function main () {
console.log(this);
} // main함수를 객체obj의 밖에 먼저 정의
const obj = {
name: "곰인간",
main; // === mian: main; // 바깥에 있는 main함수를 obj의 메서드로 넣어도
};
obj.main(); // this의 값은 {name: "곰인간", main: f}로 출력된다.함수를 먼저 객체의 밖에 먼저 정의를 하고,
이후에 객체를 만들어서 객체의 구성원으로 포함시켜도 this는 obj의 객체가 된다.
function main () {
console.log(this);
}
const obj = {
name: "곰인간"
};
obj.main = main; // obj가 만들어진 다음에 main을 추가해도
obj.main(); // this의 값은 obj가 된다.위와 똑같은 값이 출력된다.
function main() {
console.log(this);
}
const obj = {
name: "곰인간",
smallObj: {
name: "문인간",
main;
}
};
obj.smallObj.main(); // {name: "문인간", main:f}obj안에 samllObj객체를 구성원으로 넣고,
obj.smallObj.main(); 을 호출하면 값은 {name: "곰인간", main: f} 가 아닌,
main을 호출한 객체인 smallObj의 값이 출력된다. {name: "문인간", main: f}
4. 동적으로 변환하는 this값을 고정하는 bind();
function main() {
console.log(this);
}
main(); // window객체
//main 함수에 다른 객체를 binding
const mainBind = main.bind({name: "보통인간"});
//mainBind변수에 main함수를 할당하고 함수 뒤에 .bind를 붙여주고 bind의 인자로 원하는 객체를 넣어준다.
mainBind(); // {name: "보통인간"}
const obj = {
mainBind;
};
obj.mainBind();새로운 obj객체를 만들고, 그안에 mainBind 함수를 넣고 호출을 해도
{name: "보통인간} 으로 출력된다.
const obj = {
name: "곰인간",
main: function () {
console.log(this);
}.bind({name:"멋진인간"});
};
obj.main(); // {name:"멋진인간"}
function main() {
console.log(this);
}
const mainBind = main.bind({name: "보통인간"});
const mainBindBind = mainBind.bind({})
mainBindBind(); // {name: "보통인간"}* bind는 이미 bind된 함수를 다시 bind 할수 없다.
5. 함수를 DOM요소에 이벤트 처리
const button = document.getElementById("btn");
console.log(button); // <button id="btn">버튼</button>
button.addEventListener("click", function (event) {
console.log(this); // <button id="btn">버튼</button>
console.log(event.target === this); // true
});
click 이벤트를 누르면
this 값으로 버튼 요소가 나온다.<button id="btn">버튼</button>
(함수를 DOM요소에 이벤트 처리기로 사용하면 this값은 이벤트를 발사한 요소로 사용된다.)
console.log(event.target === this); // true
위에 언급했지만 유튜브 별코딩님 영상보면서 공부했는데..
설명을 하려고 하니까 머리가 아픈..
전통적인 함수 문법에서 this도 헷갈리지만
이 다음에 화살표 함수 this를 공부해보겠습니다..
댓글