자바스크립트에서 this

1. 단독으로 쓴 this

단독으로 this를 호출하는 경우에는 global object를 가리킨다.

 

'use strict';
 
var x = this;
console.log(x); //Window

 

2. 함수 안에서 쓴 this

- 함수 안에서 this는 함수의 주인인 window객체에 바인딩된다.!

 

//예시1
function myFunction() {
  return this;
}
console.log(myFunction()); //Window

//예시2
var num = 0;
function addNum() {
  this.num = 100;
  num++;
  
  console.log(num); // 101
  console.log(window.num); // 101
  console.log(num === window.num); // true
}
 
addNum();

 

 

3.메서드 안에서 쓴 this

- 메서드 호출 시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다.

 

var person = {
  oneName: 'heeyeon',
  twoName: 'heehee',
  fullName: function () {
    return this.oneName + ' ' + this.twoName;
  },
};
 
person.fullName(); //"heeyeon heehee"

 

var num = 0;
 
function showNum() {
  console.log(this.num);
}
 
showNum(); //0
 
var obj = {
  num: 200,
  func: showNum,
};
 
obj.func(); //200

 

 

4. 이벤트 핸들러 안에서 쓴 this

 

var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

 

 

5. 생성자 안에서 쓴 this

 

function Person(name) {
  this.name = name;
}
 
var kim = new Person('kim');
var lee = new Person('lee');
 
console.log(kim.name); //kim
console.log(lee.name); //lee

 

 

6. 명시적 바인딩을 한 this

- apply, call 메서드 사용

- 인자를 this로 만들어주는 기능

(+) apply, call은 유사배열 객체에게 배열 메서드를 쓰고자 할 때 사용할 수 있다.)

 

call

- 인수 목록을 받는다.

apply

- 인수 배열을 받는다.

- 매개변수로 받은 첫번쨰 값은 함수 내부에서 사용되는 this에 바인딩되고, 두번째 값인 배열은 자신을 호출한 함수의 인자로 사용한다.

 

예시1)

 

function whoisThis() {
  console.log(this);
}
 
whoisThis(); //window
 
var obj = {
  x: 123,
};
 
whoisThis.call(obj); //{x:123}

 

예시2)

 

//두 생성자 함수
function Character(name, level) {
  this.name = name;
  this.level = level;
}
 
function Player(name, level, job) {
  this.name = name;
  this.level = level;
  this.job = job;
}

//name과 level을 받아오는 부분이 같다. ---> (아래 코드)

//apply 사용시
function Character(name, level) {
  this.name = name;
  this.level = level;
}
 
function Player(name, level, job) {
  Character.apply(this, [name, level]); //두번째 값, 자신을 호출한 함수의 인자
  this.job = job;
}
 
var me = new Player('Nana', 10, 'Magician');

//call 사용시
function Character(name, level) {
  this.name = name;
  this.level = level;
}
 
function Player(name, level, job) {
  Character.call(this, name, level);
  this.job = job;
}
 
var me = {};
Player.call(me, 'nana', 10, 'Magician');

 

 

7. 화살표 함수로 쓴 this

- 함수 안에서 this 발생시 window를 가리키기 때문에 의도와는 다른 결과가 나올 수 있다.

이럴때, 화살표 함수를 사용하면 전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고 바로 바깥 함수나 클래스의의 this를 사용한다.

 

var Person = function (name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(this); // Person {name: "Nana", age: 28}
 
    setTimeout(() => {  //  이 라인에서 화살표함수를 사용하지 않는다면 this는 window를 가리킨다.
      console.log(this); // Person {name: "Nana", age: 28}
      console.log(this.name + ' is ' + this.age + ' years old'); 
    }, 100);
  };
};
var me = new Person('Nana', 28); //Nana is 28 years old