시작에 앞서,
This는 영어에서도 사람, 사물, 이것, 저것 등의 뜻으로 '지시 대명사'라고 배웠다. 따라서 명확하게 이미 규정되어 있는게 아니라 어떻게보면 맥락이나 어떤 사람이나 사물을 가르키면서 말을 할때 맥락으로 이해를 하는 경우가 많다.
그렇다면,
Javascript에서 This란 무엇일까?
this는 객체 지향 언어에서는 클래스로 생성된 인스턴스 객체를 가르키는 말이다. 그래서 정망정말 간단하게 this가 가리키는게 뭔가요 라고한다면 객체 라고 할것이다.
하지만 자바스크립트에서는 객체를 가리키는거 자체가 모든게 될수가 있다. 무슨말이냐 하면 자바스크립트는 constructor function, 즉 생성자 함수를 통해 객체를 만들게 되는데, 그러다 보니 함수를 가리킬수도 있다.
왜 this가 가리키는게 다를까?
답은 함수를 호출하는 방법에 따라 달라지기 때문이다.
JavaScript에서 this는 크게 4가지 방법으로 호출될 수 있는데, 바인딩 되는 순서대로 나열해보자면
1. new 바인딩 : new를 통해 생성되는 instance 객체에 바인딩
2. 명시적 바인딩 : bind, call, apply를 사용
3. 암시적 바인딩 : 객체의 method로 호출
4. 기본 바인딩 : function으로서의 레귤러 함수를 통해 호출될때 바인딩
1. new 바인딩
function Someone(name) {
this.name = name;
}
const me = new Someone('sungho');
console.log(me.name) // sungho
2. 명시적 바인딩
var someone = {
name : "Sungho",
whoAmI : function(){
console.log(this)
}
}
someone.whoAmI(); // {name: "Sungho", whoAmI: f}
var myWhoAmI = someone.whoAmI;
myWhoAmI(); // Window {postMessage: f, ...}
var bindedWhoAmI = myWhoAmI.bind(someone);
var btn = document.getElementById('btn);
btn.addEventListener('click', bindedWhoAmI);
//{name: "Sungho", whoAmI: f}
bindedWhoAmI(); //{name: "Sungho", whoAmI: f}
3.암시적 바인딩
window
console.log(this) // Window {postMessage:f, ...}this는 window나 object를 리턴할 수 있다.
여기서 window와 object가 다르다고 생각할수 있는데, 본질적으로는 같다고 할 수 있다.
console.log(this)를 호출해보면 window라는 객체가 나오는데, 우리가 선언하는
console.log(), function, object는 모두 window라는 {}object안에 들어있기 때문에
console.log(this)를 호출할 경우, window object를 리턴하는것이다.
object
var someone = {
name : "Sungho",
whoAmI : function(){
console.log(this)
}
}
someone.whoAmI(); // {name: "Sungho", whoAmI: f}
var myWhoAmI = someone.whoAmI;
myWhoAmI(); // Window {postMessage: f, ...}
var btn = document.getElementById('btn);
btn.addEventListener('click', someone.whoAmI);
//<button id="btn">...</button>
이런식으로 암시적 바인딩은 호출한 주체에 따라 this가 달라지게 된다.
이렇게, 가리키는 주체가 달라지더라도, bind, apply등의 binding을 사용하면 주체가 누구인지보단 바인딩된 주체가 누군지가 중요해진다.
4. 기본 바인딩
console.log(this) // Windowthis가 헷갈리는 이유는?
Java에서 함수는 매서드이고, 매서드(함수)는 클래스에 묶여 있다. 그리고 인스턴스는 클래스에서 생성된다 (public, private 등) 그러므로 모든 메서드는 this 키워드가 가리키는 객체는 자신이 속한 클래스의 인스턴스라고 확신할 수 있다.
하지만, javascript는 클래스가 없다. 그래서 함수는 혼자서도 쓰이고, 메서드로도 쓰인다. 인스턴스도 원하는대로 만들수 있다.
이말은 자바스크립트에선 어떠한 규율이나 형식이 굉장히 느슨하단 말이고, 규율과 형식이 느슨하다보니, this가 가리키는게 정확하지 않다는뜻이다.
this를 헷갈리는데 왜 쓰는걸까?
this는 javascript에서 객체지향을 구현하기 위한 키워드다. list.len() 과 len(list)중 전자를 선호한다면 무조건 this를 써야한다.
우리가 무심코 만드는 배열 [1,2,3,4]가 있다고 가정하고, 그 배열에 길이를 알고싶다고 하자.
아마 코드로 하면
var array = [1,2,3,4];
console.log(array.length); // 4사실은
var array = new Array(1,2,3,4);
console.log(Array.prototype.length);이런식으로 Array라는 새로운 객체에 1,2,3,4라는 숫자를 넣고, 어레이 안에 있는 this.length라는 함수를 호출해서 4라는 숫자를 출력하는것이다.
마치며,
비전공자로 개발을 하며 처음 개발을 할땐 작동원리에 대한 이해 없이 영상 강의를 보면서 코드를 따라쳤는데, 이런 원리를 하나하나 알아가는게 생각보다 더 재밌는거 같다.
처음 CS를 공부할땐 아 그렇구나 하고 끝나던게, 이러이러한 단점이 있는데 왜 쓰는거지..? 라는 의문으로 이어지는게 서비스를 구현하는것과는 다른맛이 있는거같다
