javascript call()

somethingFucn.call(this,a,b);

-> something(a,b); 호출과 똑같다. 다만 somethingFucn 코드 안에 this가 가리키는 컨텍스트를 변경한다. call함수의 첫번째 인자로 변경한다.

모질라 call 설명 참고

call을 이해하기전에 자바스크립트의 this 개념을 먼저 이해해야 한다.

자바스크립트에서 this는 호출되면서 평가된다. 보통 다른 언어는 코드에 this가 위치한 곳을 기준으로 평가되는 것과는 다르다.

자바스크립트의 this는 능동적이라 할 수 있다.

아래의 예제를 보자.

this가 있는 함수

---

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

console.log(cheese);
console.log(fun);

결과

---

[object Object] {

  category: "food",

  name: "feta",

  price: 5

}

[object Object] {

  category: "toy",

  name: "robot",

  price: 40

}

설명 

---

Product() 함수 코드를 보면

this.name = name;

내용을 담고 있다. 코드 내용만 보면 Product()에 멤버변수로 name 을 추가 하고 있는 것 같아 보인다. 하지만 this는 언제나 실행될 때 평가된다는 점을 알아야 한다. 달리말해 this는 어떤 컨텍스트를 바라보고 있는지 실행되기전에는 알 수 없다.

여기서 헷갈릴 수 있으니 보충 설명하자면

Product("a","b") 와 같이 바로 실행한다면 실행되는 순간 this는 window객체를 가리킨다. Product() 함수가 선언된 곳이 전역위치이기 때문에 실행 순간 this는 window를 바라본다. 하지만 new Product("a","b")와 같이 생성자  new를 사용한다면 Product의 생성자를 통해서 Product 객체를 생성하는 것이기 떄문에 this는 Product를 가리킨다.

class Product(){

  Product(){

   this.name = name;

  }

}

으로 실행된다고 생각하면 된다. 

function은 그 자체가 class이며 그안의 내용은 construct이다. 따라서 생성자안의 this 컨텍스트는 Product 클래스(함수)를 가리킨다.

class와 construct의 자세한 사항은 모질라 사이트의 자바스크립트 객체지향 설명을 참고하자 

this가 없는 함수

---

function Product(name, price) {
  var name = name;
  var price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

console.log(cheese);
console.log(fun);

결과

---

[object Object] {

  category: "food"

}

[object Object] {

  category: "toy"

}

설명

---

어찌보면 당연한 결과라 생각될 수 있고 문법적으로 문제가 있어 보이지만 실행은 된다. 

어쨌든 결과를 확인해 보면 this가 사용되지 않을때 각각의 객체 멤버에 name, price가 포함되지 않는 것을 알 수 있다. this가 있는 함수 코드중 this.name = name; 코드의 this는 call이 전달한 this가 사용되었기 때문이다.

call은 call이 사용되는 함수의 this 컨텍스트를 교체하는 기능을 담고 있다.

결론

---

call 함수를 사용하는 함수의 this 컨텍스트를 교체하기 위해 사용된다.

call 함수의 진정한 쓰임새는 call을 사용하는 함수에 this가 사용될 때만이다. this가 없는 함수에 call을 사용하는 것은 무의미하지 않은가 싶다.