[javascript 자바스크립트] this,window 란?

 

자바스크립트를 쓰면서 this는 그냥 쓰라니까 쓰고 넘어갔는데 최근 프로젝트를 진행 하면서

this때문에 애를 먹은적이 여러번 있었다. this는 Object라 했는데 값이 안넘어가서 보니 this가 form형태로 넘어오고 있었고 this에 대해 얕게 알고 있던 나에게 한계점이 왔다.

 

그래서 이번 시간에는 자바스크립트에서의 this에 대해서 정리해보려고 한다.

Node.js 에서의 this는 일반 자바스크립트의 this와는 살짝 다른 점이 있는데 그 부분도 아래에서 다뤄보려고 한다.

 

먼저 F12를 눌러서 브라우저 콘솔을 켜서 this를 쳐보면 window {}라는 객체가 나올 것이다.

this는 기본적으로는 window이다.

 

그럼 window는 뭘까? 

 

F12를 눌러서 브라우저 콘솔에 window를 치고.(점)을 치면 어마어마한 추천 목록이 뜨는데 window 객체의 속성과 메서드이다.

window가 뭔데 어마어마 한양의 메서드와 속성이 있을까?

인터넷 브라우저를 보면 탭도 있고, 주소창, 즐겨찾기 툴바, 검색창 등등 여러 가지 요소들이 있고 전체가 실행되면서 웹사이트가 표시되게 되는데

 

여기서 브라우저 전체를 담당하는 게 window 객체이고, 웹사이트를 담당하는게 우리가 흔히 아는 Document 객체이다.

Document도 어쨌든 window객체 안에 들어있는 것이다.

 

window 아래에는 대표적으로 위에서 언급한 document 이외에도 screen, location 등의 객체들이 있고, 메서드로는 parseInt, isNaN 같은 게 있다.

 

그럼 사용할 때 window.parseInt()라고 사용해야 하는데 왜 parseInt()라고만 해도 될까?

 

window는 모든 객체의 조상이다. 전역 객체(글로벌 객체)라고 하는데 모든 객체를 다 포함하고 있기 때문이다.

winodw객체 아래를 보면 String, Boolean, Object, Number 등의 자료형도 다 들어있다.

 

우리가 자바스크립트에서 함수 안에서 선언한 변수들을 제외한 변수들도 모두 window 객체 안에 들어가게 된다.

아래 예시를 보자. (여기서 let을 쓰면 undefined가 뜬다. let은 블록 유효 범위를 갖는 지역 변수를 선언하기때문)

var ans = 'window안에있다.'
window.ans; //'window안에있다.'

 

그럼 이제 this에 대해서 알아보자.

 

위에서 this는 기본적으로 window라는 것을 알았다. 그럼 this가 window가 아닌 경우를 알아보자.

 

먼저 객체 메서드를 보자. 아래 코드를 보면 객체 메서드 a 안의 this를 출력해보면 객체를 가리킨다.

객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문이다.

 

var obj = {
  a: function() { console.log(this); },
};
obj.a(); // obj

 

그럼 위의 예제에서 아래와 같이 하면 결과가 달라진다. window객체가 출력이 된다.

호출할 때, 호출하는 함수가 객체의 메서드인지, 그냥 함수인지가 중요하다.

아래 a2는 obj.a를 꺼내온 것이기 때문에 obj 메서드가 아니다.

 

var a2 = obj.a;
a2(); // window

 

명시적으로 this를 바꾸는 함수 bind, call, apply를 사용하면 this가 객체를 가리키게 된다.

 

var obj2 = { c: 'd' };
function b() {
  console.log(this);
}
b(); // Window
b.bind(obj2).call(); // obj2
b.call(obj2); // obj2 
b.apply(obj2); // obj2

 

생성자의 경우도 살펴보자. 생성자는 객체의 생성과 동시에 인스턴스 변수를 원하는 값으로 초기화할 수 있는 메서드이다. 아래와 같이 생성자를 만들고 예시들을 살펴보자.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

 

다음은 생성자 함수를 살펴보자. 생성자 함수에서 new로 호출하지 않고 그냥 호출하게 되면 아래와 같은 결과가 나온다.

window객체에 담긴 것이다.

Person('skc', 26);
console.log(window.name, window.age); // skc 26

 

위와 같은 경우를 방지하려면 new를 사용해야 한다. new를 사용하면 this가 생성자를 통해 생성된 인스턴스가 된다.

new를 안 붙이는 문제를 방지하는 장치 class가 ES6에 추가되었다.

 

var profile = new Person('skc', 26); // Person {name: "skc", age: 26}
profile.sayHi(); // skc 26

 

ES6에서 함수를 사용할 때 this가 변경되었는데 화살표 함수 =>에서는 this가 유지된다.

 

function(매개변수){}로 사용하던 함수를 (매개변수) => {} 로 변경해서 사용하면 this를 그대로 유지할 수 있다. 앞으로 =>를 자주 쓰고, 바뀐 this가 필요할 때만 function {}을 사용하면 될 거 같다.

하지만 화살표 함수에서는 new를 붙일 수 없고, arguments를 사용할 수도 없다.

 

var object = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends: function() {
    var self = this;
    this.friends.forEach(function(friend) {
      alert(self.name + ' and ' + friend);
    });
  }
};
object.alertFriends(); // 세 번 알림

 

위와 같은 함수를 화살표 함수를 사용하면 아래와 같이 바꿀 수 있다.

forEach안에서 this가 바뀌기 때문에 var self에 Object의 this를 저장해놓고 사용했지만 화살표 함수에서는 this가 유지되기 때문에 forEach안에서도 그냥 this를 사용하면 된다.

 

const object2 = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends() {     
    this.friends.forEach((friend) => {
      alert(this.name + ' and ' + friend);
    });
  }
};
object2.alertFriends();

 

Node.js에서 this는?

 

Node에는 window와 document객체가 없다.

두 객체는 브라우저 런타임에서 넣어주는 객체이기 때문이다. 노드는 브라우저와 다른 런타임이기 때문에 DOM과 관련된 두 객체를 넣지 않는다. 그럼 this에 대해서 알아보자.

 

console.log(this, module.exports, exports); //{} {} {}
console.log(this === module.exports);//true
console.log(this === exports);//true
console.log(module.exports === exports);//true

 

위에 예시 코드를 보면 알 수 있듯이, this는 바로 module.export이다.

파일을 모듈로 사용할 수 있게 해주는 객체이다.  모듈에 관한 설명은 아래 정리를 보면 된다.

 

2021.07.23 - [Back-end/Node.js] - [javascript 자바스크립트] 모듈(Module) 란?

[javascript 자바스크립트] 모듈(Module) 란?

 

 

 

Reference : https://www.zerocho.com/