JavaScript - apply, call 和 bind

by on # javascript

apply, call 與 bind


var data = { value: 100 };

function f0() {
  console.log(this)
}
f0(); //this 是空的,會印出整個 Window 物件/ global

function f1() {
  console.log(this) //{ value: 100 }
}
//利用 apply 將 this 換成 data,並立刻執行 f1
f1.apply(data);


function f2() {
  console.log(this) //{ value: 100 }
}
//利用 call 將 this 換成 data,並立刻執行 f2
f2.call(data);


function f3() {
  console.log(this) //{ value: 100 }
}
//利用 bind 將 this 換成 data,並回傳一個 function
var newFoo = f3.bind(data);
newFoo();

apply, call 與 bind

apply, call 應用


function test(a, b, c) {
  console.log(a, b, c);
}

// 如果沒有要替換 this 的對象,第一個參數輸入 undefined 即可
test.apply(undefined, [1, 2, 3])  // apply 第二以後參數要輸入陣列
test.call(undefined, 5, 6, 7)     // call 第二以後參數要逐一列出

var arr = [1, 3, 4, 66, 74, 22, 44]
//var max = Math.max(1, 3, 4, 66, 74, 22, 44)
var max = Math.max.apply(undefined, arr)
//var max = Math.max(...arr)   //ES6 展開寫法
console.log(max);


console.log(Array.prototype.slice.call(arr));
console.log([].slice.call(arr));
//Array.prototype 可直接以 [] 取代

function temp() {
  //arguments 是保留字,可以取得輸入的參數
  console.log(arguments);
  //{ [Iterator]  '0': 1, '1': 2, '2': 3, '3': 4 }​​​​​

  //利用 .slice.call 將 arguments 轉為陣列
  var arrr = [].slice.call(arguments);
  console.log(arrr); //​​​​​[ 1, 2, 3, 4 ]​​​​​
}

temp(1, 2, 3, 4)

//或者改以下面寫法,直接取得陣列

function temp2(...args){
  console.log(args); //​​​​​[ 4, 5, 6, 7 ]​​​​​
}

temp2(4, 5, 6, 7)

apply, call 應用

參考

javascript, apply, call, bind
comments powered by Disqus