ES6 - this 바인딩

this는 객체 지향 프로그래밍에서 사용되는 특수한 키워드로, 현재 실행 컨텍스트 내에서 현재 객체를 참조하는 데 사용된다. 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다.

Java에서의 this

public class Person {
    private String name;

    public Person(String name) {
        this.name = name;
    }

    public void printName() {
        System.out.println("My name is " + this.name);
    }

    public static void main(String[] args) {
        Person person1 = new Person("Alice");
        Person person2 = new Person("Bob");

        person1.printName(); // 출력: My name is Alice
        person2.printName(); // 출력: My name is Bob
    }
}

Person 클래스를 정의하고, 생성자와 인스턴스 메서드인 printName()에서 "this"를 사용하여 인스턴스 변수인 name을 참조한다. "this"는 해당 인스턴스를 가리키며, 각 인스턴스의 name 값을 출력한다.

• this는 클래스의 인스턴스를 참조한다.
• this는 인스턴스 메서드나 생성자에서 해당 인스턴스를 참조하거나, 해당 클래스의 멤버 변수나 멤버 메서드를 참조하는 데 사용된다.

---

JS에서의 this

function Person(name) {
    this.name = name;

    this.printName = function() {
        console.log(`My name is ${this.name}`);
    }
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.printName(); // 출력: My name is Alice
person2.printName(); // 출력: My name is Bob

함수인 Person을 정의하고, 함수 내부에서 this를 사용하여 인스턴스 변수인 name을 참조한다. 함수를 통해 객체를 생성할 때, this는 생성된 객체를 가리키며, 각 객체의 name 값을 출력한다.

• this는 호출 시점에 결정된다.
• 호출하는 방법에 따라 다양한 값이 할당될 수 있다.

  함수가 객체의 메서드로 호출되면 this는 해당 객체를 참조하고, 일반 함수로 호출되면 this는 전역 객체(window 객체 또는 global 객체)를 참조한다.

즉, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

---

함수에서 호출

  function 함수() {
    console.log(this);
  }

  함수(); // window 객체 출력

window 객체

• 브라우저의 전역 객체(global object)로서, 웹 페이지의 창 또는 프레임을 나타내는 객체. DOM 객체 setTimeout sessionStorage 등에 대한 접근을 제공한다.
• strict mode 일 때 함수 안에서 사용하면 this는 undefined가 된다.

Object 내 함수에서 호출

  var object1 = {
    data: 'Kim',
    func: function () {
      console.log(this); // 오브젝트 내 함수 안에서 쓰면 그 함수를 가지고 있는 오브젝트를 가리킴
    },
  };

• 메소드안에서 this를 사용하면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

생성자 함수 호출

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

var addPerson = new Person('Kim');
console.log(me); // Person {name: "Kim"}