【javascript】call 和 apply

一直不知道 js 上的 call 和 apply 的差異,昨天去面試整個考題寫不出來阿阿阿~~~就來記錄一下吧!GO!

call 和 apply 的差異?

call 可以接受一連串的參數,而 apply 則是接受array。

就這樣? 對,就這樣 = =a.....看範例。

Function.prototype.call

語法

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

// function

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession + ".");
}

// call function

function callFn(name, profession) {
  theFunction.call(this, name, profession);
}

theFunction('小Q', '工程師');
callFn('大Q', '小廢廢');

// 輸出:

// My name is 小Q and I am a 工程師.

// My name is 大Q and I am a 小廢廢.

我們在 call 後面指定了 this 進去 function ,這裡的 this 指的是 callFn 這個 function ,透過這種方式,指定 this.變數 的值,如下:

function theFunction(name, profession) {
    console.log(this.school);
    console.log("My name is " + name + " and I am a " + profession + ".");
}

function callFn(name, profession) {
    this.school = 'CYUT';
  theFunction.call(this, name, profession);
}

callFn('大Q', '小廢廢');

// 輸出:

// CYUT

// My name is 大Q and I am a 小廢廢.

也可以是:

function theFunction(name, profession) {
    console.log(this.school);
    console.log("My name is " + name + " and I am a " + profession + ".");
}

var littleQ = {
  school: '朝陽';
};

function callFn(name, profession) {
    this.school = 'CYUT';
  theFunction.call(littleQ, name, profession);
}

callFn('大Q', '小廢廢');

// 輸出:

// 朝陽

// My name is 大Q and I am a 小廢廢.

Function.prototype.apply

語法

fun.apply(thisArg, [argsArray])

// function

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession + ".");
}

// call function

function callFn(name, profession) {
  theFunction.apply(this, [name, profession]);
}

theFunction('小Q', '工程師');
callFn('大Q', '小廢廢');

// 輸出:

// My name is 小Q and I am a 工程師.

// My name is 大Q and I am a 小廢廢.

大致上跟 call 其實沒有什麼差別,就是變成傳進去的方式是array,也可以做下面這種改寫:

// function

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession + ".");
}

// call function

function callFn(name, profession) {
  this.list = [name, profession];
  theFunction.apply(this, list);
}

theFunction('小Q', '工程師');
callFn('大Q', '小廢廢');

// 輸出:

// My name is 小Q and I am a 工程師.

// My name is 大Q and I am a 小廢廢.

參考

  1. Function.prototype.call
  2. Function.prototype.apply()
  3. What is the difference between call and apply?

Comments

comments powered by Disqus