javascript Function中 bind()、call()、 apply()用法詳解

我以前在使用的時候函數的時候一直不太確認Function對象三個方法的使用以及區別
Function.prototype.apply()

Function.prototype.bind()

Function.prototype.call()
這三個方法都是Function下的原型方法，如果你對原型不瞭解，你可以去看我的另一篇文章 深入理解javascript原型及原型鏈

我們先看例子

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun()//undefined

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
person.personInfo(); //29

比較一下我們可以得出結論 第一個this指向的是全局的window,所有找不到age
屬性。第二個例子this指向的是person，所以可以取到age屬性。
call()、apply()、bind() 都是用來重定義 this 這個對象的！

call()

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.call(person);//29

通過在call方法，給第一個參數添加要把fun添加到哪個環境中，簡單來說，this就會指向那個對象。
call方法除了第一個參數還可以添加多個參數

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.call(person, 10 , 20);//30

apply()

apply方法和call方法有些相似，它也可以改變this的指向,同樣apply也可以有多個參數，但是不同的是，第二個參數必須是一個數組

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.apply(person, [10 , 20]);//30

ps* 注意如果call和apply的第一個參數寫的是null，那麼this指向的是window對象

bind()

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.bind(person);

沒有任務的輸出
這就是bind和call、apply方法的不同，實際上bind方法返回的是一個修改過後的函數。

正確的方式如下

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.bind(person)();//29

同樣bind也可以有多個參數，並且參數可以執行的時候再次添加，但是要注意的是，參數是按照形參的順序進行的

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.bind(person, 10 , 20)();//30