Java의 this와 JavaScript의 this의 차이는?

Java

Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수로, this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다.

⇒ 메서드의 현재 인스턴스 오브젝트를 나타낸다.

public Class Person {

  private String name;

  public Person(String name) {
		// this.name: 멤버변수 의미, name: 생성자 함수가 전달받은 매개변수 의미
    this.name = name; 
  }
}

Javascript

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받으며, 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

Javascript의 함수 호출 방식

var foo = function () {
  console.dir(this);
};

// 1. 함수 호출
foo(); // window
// window.foo();

// 2. 메소드 호출
var obj = { foo: foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
var instance = new foo(); // instance

// 4. apply/call/bind 호출
var bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

1. 함수 호출

기본적으로 this는 전역객체에 바인딩

• 전역함수는 물론이고 내부함수의 경우도 this는 외부함수가 아닌 전역 객체에 바인딩
• 메소드 내부함수일 경우에도 this는 전역객체에 바인딩
• 콜백함수의 경우에도 this는 전역객체에 바인딩

2. 메소드 호출

• 함수가 객체의 프로퍼티 값이면 메소드로서 호출된다. 이때 메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩된다.
• 프로토타입 객체 메소드 내부에서 사용된 this도 일반 메소드 방식과 마찬가지로 해당 메소드를 호출한 객체에 바인딩된다.

3. 생성자 함수 호출

• 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
  • 3.1 생성자 함수 동작 방식
    1. 빈 객체 생성 및 this 바인딩
    2. this를 통한 프로퍼티 생성
    3. 생성된 객체 반환

    function Person(name) {
      // 생성자 함수 코드 실행 전 -------- 1
      this.name = name;  // --------- 2
      // 생성된 함수 반환 -------------- 3
    }
    
    var me = new Person('Lee');
    console.log(me.name);
    

  • 3.2 객체 리터럴 방식과 생성자 함수 방식의 차이
    • 객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.
    • 생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다

    // 객체 리터럴 방식
    var foo = {
      name: 'foo',
      gender: 'male'
    }
    
    console.dir(foo);
    
    // 생성자 함수 방식
    function Person(name, gender) {
      this.name = name;
      this.gender = gender;
    }
    
    var me  = new Person('Lee', 'male');
    console.dir(me);
    
    var you = new Person('Kim', 'female');
    console.dir(you);
    

  • 3.3 생성자 함수에 new 연산자를 붙이지 않고 호출할 경우일반 함수를 호출하면 this는 전역객체에 바인딩되지만 new 연산자와 함께 생성자 함수를 호출하면 this는 생성자 함수가 암묵적으로 생성한 빈 객체에 바인딩된다.

  • function Person(name) {
      // new없이 호출하는 경우, 전역객체에 name 프로퍼티를 추가
      this.name = name;
    };
    
    // 일반 함수로서 호출되었기 때문에 객체를 암묵적으로 생성하여 반환하지 않는다.
    // 일반 함수의 this는 전역객체를 가리킨다.
    var me = Person('Lee');
    
    console.log(me); // undefined
    console.log(window.name); // Lee

  • 일반함수와 생성자 함수에 특별한 형식적 차이는 없으며 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 그러나 객체 생성 목적으로 작성한 생성자 함수를 new 없이 호출하거나 일반함수에 new를 붙여 호출하면 오류가 발생할 수 있다.

4. apply/call/bind 호출

• this에 바인딩될 객체는 함수 호출 패턴에 의해 결정된다. 이는 자바스크립트 엔진이 수행하는 것이다. 이러한 자바스크립트 엔진의 암묵적 this 바인딩 이외에 this를 특정 객체에 명시적으로 바인딩하는 방법도 제공된다. 이것을 가능하게 하는 것이 Function.prototype.apply, Function.prototype.call 메소드이다.
• 이 메소드들은 모든 함수 객체의 프로토타입 객체인 Function.prototype 객체의 메소드이다.

• func.apply(thisArg, [argsArray])
  
  // thisArg: 함수 내부의 this에 바인딩할 객체
  // argsArray: 함수에 전달할 argument의 배열
  

  apply()와 call() 메소드는 콜백 함수의 this를 위해서 사용되기도 한다.

• function Person(name) {
    this.name = name;
  }
  
  Person.prototype.doSomething = function(callback) {
    if(typeof callback == 'function') {
      // --------- 1
      callback();
    }
  };
  
  function foo() {
    console.log(this.name); // --------- 2
  }
  
  var p = new Person('Lee');
  p.doSomething(foo);  // undefined