Modern JavaScript 함수 호출방식

 

---

1. 함수 호출방식과 this 바인딩

 

• 기본적으로 Java 에서는 인스턴스 자신 (self)를 가리키는 참조변수이다. (this가 객체자신의 참조값을 가짐)

        - ex. this.age 는 멤버변수 age는 매개변수를 의미 

• javascript 에서는 this 바인딩 객체가 한가지가 아니라 해당 함수 호출 방식에 따라 결정. (동적)

 

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

 

---

 

2. 함수 호출 방식

 

 

• 전역객체(Global object)는 최상위 객체를 의미하며 Browser-side 에서는 window / Server-side (Node.js)에서는 global 객체를 의미
• 전역객체는 전역스코프를 갖는 전역변수를 프로퍼티로 소유
• 글로벌 영역에 선언한 함수는 전역객체의 프로퍼티로 접근가능
• this, 콜백함수 는 기본적으로 전역객체에 바인딩 (내부함수에 있어도, 어디에 선언되어 있든지 )

 

var ga = 'Global variable';

console.log(ga);
console.log(window.ga);

function foo() {
  console.log('invoked!');
}
window.foo();

 

---

 

3. 메소드 호출

• 함수가 객체의 프로퍼티 값이면, this는 메소드를 호출한 객체에 바인딩 되어 불러진다. (프로토타입 객체도 가능)

 

var obj1 = {
  name: 'Lee',
  sayName: function() {
    console.log(this.name);
  }
}

var obj2 = {
  name: 'Kim'
}

obj2.sayName = obj1.sayName;

obj1.sayName();
obj2.sayName();

 

---

 

4. 생성자 함수 동작 방식

 

 

• 빈 객체 생성 및 this 바인딩 : 생성자 함수의 코드 실행전 빈 객체 생성, this는 이 빈객체를 가리킨다.
• this 를 통한 프로퍼티 생성 : 생성된 빈 객체는 this 를 사용하여 동적으로 프로퍼티 및 메소드를 생성할 수 있다.
• 생성된 객체 반환 : this 를 반환하지 않은 함수는 생성자 함수로 역할을 하지 못하므로, 명시적으로 사용하지 않는다.
• 리터럴 객체는 Object.prototype / 생성자 함수는 Personality.prototype 에 속한다. ([[Prototype]] 객체 차이)

 

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

var me = new Person('Lee');
console.log(me.name);

 

---

 

5. apply / call / bind 호출

 

 

• 명시적인 바인딩 방법으로 Function.prototype.apply, Function.prototype.call 메소드로 표현 (Function.prototype 객체의 메소드)

 

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

var foo = {};

// apply 메소드는 생성자함수 Person을 호출한다. 이때 this에 객체 foo를 바인딩한다.
Person.apply(foo, ['name']);

console.log(foo); // { name: 'name' }