[JavaScript] call() , apply() 함수

JavaScript 에서는 상속개념을 자주 쓰다보면 머리에 쥐가나고 불필요한 메소드에 프로토타입까지 상속받아오느라 메모리 낭비도 심해진다.

JavaScript는 굉장히 유연한 언어이기때문에 별게 다된다... (java,C 만 배우던 나에겐 정말 컬쳐쇼크...)

바로 메소드만 살짝쿵 빌려와서 써버리는것!! 일명 메소드 빌려쓰기!

이건 뭐 날강도수준이다... 세상에 남의 메소드를 살짝 빌려와서 써버린다니... 그것도 그냥! 그냥!! 쓸수있다.

 

call, apply 이 두놈이 정말 날강도다. 소매치기 수준!

 

일단 정확한 문법과 사용을 집고 넘어가자

---

call()

Syntax

fun.call(thisArg[, arg1[, arg2[, ...]]])

 

Parameters

fun : 가져다쓸 메소드

thisArg : 현재 객체로 사용될 객체

arg1,arg2,arg3 : 메소드에 전달할 인자목록

 

JavaScript에서는 this 키워드가 굉장히 중요하다. call()를 사용하게 되면 this는 thisArg객체를 가리키게 되는데 전달하지않으면 전역객체를 가리킨다.

function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with call: <br/>");
document.write(callMe.call(3, 4, 5));

그냥 막 갔다 쓰면 된다. 안어렵다.

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

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

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

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

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

---

이제는 이놈과 형제급인 

apply()

Syntax

fun.apply(thisArg[, argsArray])

Parameters

fun : 위와 동일

thisArg : this객체로 사용될 객체

argsArray : 함수에 전달할 인수 집합 인데 배열로 전달한다. call은 인수로 보내고 apply는 배열로 보낸다.

function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));

// Output: 
// Original function: 
// this value: [object Window]
// arguments: 1
// arguments: 2

// Function called with apply: 
// this value: 3
// arguments: 4
// arguments: 5

이놈도 별거없다. 그냥 쓰면된다. 

 

위 두 놈을 쓰는곳 혹은 책에서 많이 출몰하시는

Array.prototype.slice.call(arguments,0) 뭐 요로케 많이 들어가는데 별거없다. 걍 slice 메소드 가져다 쓰겠다는거다. 그리고 반환값을 변수에 저장하면 끝!