객체 리터럴과 this

함수 호출 방식과 this 바인딩

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정됩니다. 즉, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

함수의 호출 방식은 아래와 같이 다양합니다.

1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

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. 함수 호출

전역 객체는 전역 스코프(Global Scope)를 갖는 전역 변수(Global Variable)를 프로퍼티로 소유합니다. 글로벌 영역에 선언한 함수는 전역 객체의 프로퍼티로 접근할 수 있는 전역 변수의 메서드입니다.

var ga = "Global variable";
 
console.log(ga);
console.log(window.ga);
 
function foo() {
  console.log("invoked!");
}
window.foo();
 

 

기본적으로 this는 전역 객체에(Global Object)에 바인딩됩니다. 전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩 됩니다.

function foo() {
  console.log("foo's this: ", this); // window
  function bar() {
    console.log("bar's this: ", this); // window
  }
  bar();
}
foo();

위에 이미지에서 보는 것처럼 obj로 바인딩된 this를 that이라는 변수에 저장을 하여 bar() 함수에 that을 이용하여 바인딩할 수 있습니다.

2. 메서드 호출

함수가 객체의 프로퍼티 값이면 메서드로서 호출된다. 이때 메소드 내부의 this는 해당 메서드를 소유한 객체, 즉 해당 메서드를 호출한 객체에 바인딩됩니다.

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

 

프로토타입 객체도 메서드를 가질 수 있다. 프로토타입 객체 메소드 내부에서 사용된 this도 일반 메소드 방식과 마찬가지로 해당 메소드를 호출한 객체에 바인딩됩니다.

function Person(name) {
  this.name = name;
}
 
Person.prototype.getName = function() {
  return this.name;
}
 
var me = new Person('Lee');
console.log(me.getName());
 
Person.prototype.name = 'Kim';
console.log(Person.prototype.getName());

 

3. 생성자 함수 호출

자바스크립트의 생성자 함수는 말 그대로 객체를 생성하는 역할을 합니다. 하지만 자바와 같은 객체지향 언어의 생성자 함수와는 다르게 그 형식이 정해져 있는 것이 아니라 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다.

그렇기 때문에 일반 함수와 생성자 함수를 구분하기 위해 암묵적으로 생성자 함수는 맨 앞 문자를 대문자로 정의하는 것을 원칙으로 하고 있습니다.

// 생성자 함수
function Person(name) {
  this.name = name;
}
 
var me = new Person('Lee');
console.log(me); // Person {name: "Lee"}
 
// new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수로 동작하지 않는다.
var you = Person('Kim');
console.log(you); // 

객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체([[Prototype]])에 있습니다..

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

3.3 생성자 함수에 new 연산자를 붙이지 않고 호출할 경우

일반 함수와 생성자 함수에 특별한 형식적인 차이는 없으며 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다.

그러나 객체 생성 목적으로 작성한 생성자 함수를 new 없이 호출하거나 일반 함수에 new를 붙여 호출하면 오류가 발생할 수 있습니다. 일반 함수와 생성자 함수의 호출 시 this 바인딩 방식이 다르기 때문입니다.

일반 함수를 호출하면 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 없이 호출한 경우, 함수 Person 내부의 this는 전역 객체를 가리키므로 name은 전역 변수(window)에 바인딩됩니다. 또한 new와 함께 생성자 함수를 호출하는 경우에 암묵적으로 반환하던 this도 반환하지 않으며, 반환 문이 없으므로 undefined를 반환하게 됩니다.

4. apply/call/bind 호출

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

이 메서드들은 모든 함수 객체의 프로토타입 객체인 Function.prototype 객체의 메서드입니다.

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

기억해야 할 것은 apply() 메서드를 호출하는 주체는 함수이며 apply() 메서드는 this를 특정 객체에 바인딩할 뿐 본질적인 기능은 함수 호출이라는 것입니다.

 

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

빈 객체 foo를 apply() 메서드의 첫번째 매개변수에, argument의 배열을 두번째 매개변수에 전달하면서 Person 함수를 호출하였습니다. 이때 Person 함수의 this는 foo 객체가 됩니다. Person 함수는 this의 name 프로퍼티에 매개변수 name에 할당된 인수를 할당하는데 this에 바인딩된 foo 객체에는 name 프로퍼티가 없으므로 name 프로퍼티가 동적 추가되고 값이 할당됩니다.

apply() 메소드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우입니다. arguments 객체는 배열이 아니기 때문에 slice() 같은 배열의 메소드를 사용할 수 없으니 apply() 메소드를 이용하면 가능합니다.

 

function convertArgsToArray() {
  console.log(arguments);
 
  // arguments 객체를 배열로 변환
  // slice: 배열의 특정 부분에 대한 복사본을 생성한다.
  var arr = Array.prototype.slice.apply(arguments); // arguments.slice
  // var arr = [].slice.apply(arguments);
 
  console.log(arr);
  return arr;
}
 
convertArgsToArray(1, 2, 3);

Array.prototype.slice.apply(argument)는 "Array.prototype.slice() 메소드를 호출하라. 단 this는 arguments 객체로 바인딩하라"는 의미가 됩니다. 결국 Array.prototype.slice() 메소드를 argument 객체 자신의 메서드인 것처럼 argument.slice()와 같은 형태로 호출하라는 것입니다.

 

call() 메서드의 경우, apply()와 기능은 같지만 apply()의 두 번째 인자에서 배열 형태로 넘긴 것을 각각 하나의 인자로 넘깁니다.

Person.apply(foo, [1, 2, 3]);
 
Person.call(foo, 1, 2, 3);

 

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

 

ES5에 추가된 Function.prototype.bind를 사용하는 방법도 가능합니다. Function.prototype.bind는 함수에 인자로 전달한 this가 바인딩된 새로운 함수를 리턴합니다. 즉, Function.prototype.bind는 Function.prototype.apply, Function.prototype.call 메서드와 같이 함수를 실행하지 않기 때문에 명시적으로 함수를 호출할 필요가 있습니다.

function Person(name) {
  this.name = name;
}
 
Person.prototype.doSomething = function (callback) {
  if (typeof callback == 'function') {
    // callback.call(this);
    // this가 바인딩된 새로운 함수를 호출
    callback.bind(this)();
  }
};
 
function foo() {
  console.log('#', this.name);
}
 
var p = new Person('Lee');
p.doSomething(foo);  // 'Lee'