JavaScript - apply, call 和 bind
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 應用
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)