JavaScript 的 call、apply、bind

call、apply、bind：將物件變成另一個函式中的this

[測試範例的 物件 和 函式]
物件：var objTest
函式：function test(a, b)

var objTest = {
  x: "xyz"
}

function test(a, b) {
  console.log("this.x=", this.x);
  console.log("a=", a);
  console.log("b=", b);
  console.log("arguments=", Array.from(arguments));
  //console.log("arguments=", [...arguments]);
}

test(1, 2);
//this.x= undefined
//a= 1
//b= 2
//arguments= [1, 2]

[call]

使用call，會直接執行function。

test.call(objTest);
//this.x= xyz
//a= undefined
//b= undefined
//arguments= []

test.call(objTest, 10);
//this.x= xyz
//a= 10
//b= undefined
//arguments= [10]

test.call(objTest, 10, 20);
//this.x= xyz
//a= 10
//b= 20
//arguments= [10, 20]

[apply]

使用apply，會直接執行function。跟call不同，傳入的參數為陣列。

test.apply(objTest);
//this.x= xyz
//a= undefined
//b= undefined
//arguments= []

test.apply(objTest, [10]);
//this.x= xyz
//a= 10
//b= undefined
//arguments= [10]

test.apply(objTest, [10, 20]);
//this.x= xyz
//a= 10
//b= 20
//arguments= [10, 20]

[bind]
使用bind，會回傳綁定後的function，綁定時可選擇是否綁定參數值，沒綁定的參數值，可使用時再傳入。

//只綁定this物件
var ff = test.bind(objTest);
ff();
//this.x= xyz
//a= undefined
//b= undefined
//arguments= []

ff(10);
//this.x= xyz
//a= 10
//b= undefined
//arguments= [10]

ff(10, 20);
//this.x= xyz
//a= 10
//b= 20
//arguments= [10, 20]

//綁定了this物件，和第一個參數a=10，則使用時，參數a不須也無法再傳值，a固定為10
var ff = test.bind(objTest, 10);
ff();
//this.x= xyz
//a= 10
//b= undefined
//arguments= [10]

ff(20); //已綁定了第一個參數a=10，所以剩下的參數只剩一個，此處傳的是b=20
//this.x= xyz
//a= 10
//b= 20
//arguments= [10, 20]

ff(50, 60); //多傳的參數60，不會用到
//this.x= xyz
//a= 10
//b= 50
//arguments= [10, 50, 60]

//綁定了this物件，和第一個參數a=10，第二個參數b=10，則使用時，參數a、參數b不須也無法再傳值，a固定為10，b固定為20
var ff = test.bind(objTest, 10, 20);
ff();
//this.x= xyz
//a= 10
//b= 20
//arguments= [10, 20]

ff(91, 92);
//this.x= xyz
//a= 10
//b= 20
//arguments= (4) [10, 20, 91, 92]

[應用]

• 處理偽陣列(類似陣列，但不是陣列的資料，當成陣列處理)

  function aa() {
    //arguments 不是陣列，不能使用 slice、push...
    //arguments.slice(1)
    //Uncaught TypeError: arguments.slice is not a function
    console.log([].slice.call(arguments, 1));
  }
  
  aa("a", "b", "c", "d");
  //['b', 'c', 'd']

• 取陣列最大最小值

  var arr = [5, 2, 8, -9];
  //原本要處理成 Math.max(5, 2, 8, -9)，剛好可用 apply 用陣列傳遞參數的特性。
  //現在也可以使用 ...展開運算子(Spread syntax)，直接寫成 Math.max(...arr)。
  //Math.max.apply(null, arr)，第一個物件參數沒用到，隨意傳個東西，
  //第一個物件參數傳null、undefined，在非嚴格模式(non-strict)，會被置換成global object(在瀏覽器即為window物件)
  console.log(Math.max.apply(null, arr));
  //8

參考：

• https://www.w3school.com.cn/js/js_function_call.asp
  JavaScript 函数 Call
• https://www.w3school.com.cn/js/js_function_apply.asp
  JavaScript 函数 Apply
• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call
  Function.prototype.call - JavaScript | MDN
• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
  Function.prototype.apply() - JavaScript | MDN
• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  Function.prototype.bind() - JavaScript | MDN
• https://segmentfault.com/a/1190000011389726
  call, apply, bind 函数能干啥？如何在日常搬砖中使用？（全） - SegmentFault 思否
• https://developer.mozilla.org/en-US/docs/Glossary/Global_object
  Global object - MDN Web Docs Glossary: Definitions of Web-related terms | MDN