자바스크립트 this

1. 일반 함수에서의 this는 window 객체이다.

2. 전역 변수는 window 객체의 지역 변수이다.

var data = 10; // window.data

function outer(){
  this.data = 20; // 전역변수 data를 20으로 바꿈
  data = 30; // 전역변수 data를 30으로 바꿈

  console.log("1.data: " + data); // 30
  console.log("2. this.data: " + this.data); //30
  console.log("3. window.data: " + window.data); //30
}
outer();

3. 생성자 함수와 Class의 메서드에서 this는 객체 자기 자신이다.

function MyClass(){
  this.data = 0;
}

MyClass.prototype.method1 = function(){
  this.data = 20;
  data = 30;

  console.log("1. data: " + data); // 30
  console.log("2. this.data: " + this.data); // 20
  console.log("3. window.data: " + window.data); // 30
}

let m1 = new MyClass();
m1.method1();

4. 이벤트 햄들러 함수에서 this는 이벤트 대상 객체이다.

var data = 10;

window.onload = function(){
  var btn = document.getElementById("btn");
  btn.onclick = function(){
    this.data = 20;
    data = 30;

    console.log("1. data: " + data); // 30
    console.log("2. this.data: " + this.data); // 20
    console.log("3. window.data: " + window.data); // 30
  }
}

5. this 바인딩

1) Function.bind(객체 이름) -> 바인딩만

var data = "Global data";
var obj1 = {"data": "obj1 data"};
var obj2 = {"data": "obj2 data"};

function func(){
  console.log(this.data); //obj1 data
}

func.bind(obj1)();

2) Function.call(객체 이름) / Function.apply(객체 이름) -> 바인딩 + 실행

var data = "Global data";
var obj1 = {"data": "obj1 data"};
var obj2 = {"data": "obj2 data"};

function func(){
  console.log(this.data); //obj1 data
}

func.call(obj1);
func.apply(obj1);

6. arrow function은 자신을 둘러싸고 있는 상위 환경(현재 객체의 바깥쪽)의 this를 그대로 계승한다.(Lexical this)

let name = "Spring";

const student = {
  name: 'June',
  showName: () => console.log(this.name)
};
student.showName(); // Spring