在JavaScript 中，this的指向是動(dòng)態(tài)變化的，很可能在寫(xiě)程序的過(guò)程中，無(wú)意中破壞掉this的指向，所以我們需要一種可以把this的含義固定的技術(shù)，于是就有了call，apply 和bind這三個(gè)方法，來(lái)改變函數(shù)體內(nèi)部 this 的指向，因?yàn)楹瘮?shù)存在「定義時(shí)上下文」和「運(yùn)行時(shí)上下文」以及「上下文是可以改變的」這樣的概念

apply、call

apply：應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象

call：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象

function person() {}
 
person.prototype = {
 attr: {age:18,sex:'girl'},
 say: function() {
  console.log("My age is " + this.attr.age);
  console.log("I am a " + this.attr.sex);
 }
}
 
var Marry = new person();
Marry.say();
 
// My age is 18
// I am a girl 

改變指向

function person() {}
 
person.prototype = {
 attr: {age:18,sex:'girl'},
 say: function() {
  console.log("My age is " + this.attr.age);
  console.log("I am a " + this.attr.sex);
 }
}
 
xiaoming ={ attr : {age:20,sex:'boy'} };
 
var Marry = new person();
Marry.say();
 
Marry.say.call(xiaoming);
// My age is 18
// I am a girl
// My age is 20
// I am a boy 

共同之處

都可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。

不同之處

1、apply：最多只能有兩個(gè)參數(shù)——新this對(duì)象和一個(gè)數(shù)組 argArray。如果給該方法傳遞多個(gè)參數(shù)，則把參數(shù)都寫(xiě)進(jìn)這個(gè)數(shù)組里面，當(dāng)然，即使只有一個(gè)參數(shù)，也要寫(xiě)進(jìn)數(shù)組里面。如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError。如果沒(méi)有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj，并且無(wú)法被傳遞任何參數(shù)。

fun.call(thisArg[, arg1[, arg2[, ...]]])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, 1, 1)
//return 2 

2、call：則是直接的參數(shù)列表，主要用在js對(duì)象各方法互相調(diào)用的時(shí)候，使當(dāng)前this實(shí)例指針保持一致,或在特殊情況下需要改變this指針。如果沒(méi)有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。

fun.apply(thisArg, [argsArray])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
//return 2 

apply和call功能一樣，只是傳入的參數(shù)列表形式不同，其中 thisArg 是你想指定的上下文，他可以是任何一個(gè) JavaScript 對(duì)象(JavaScript 中一切皆對(duì)象)，call 需要把參數(shù)按順序傳遞進(jìn)去，而 apply 則是把參數(shù)放在數(shù)組里?！　?/p>

如果某個(gè)函數(shù)的參數(shù)數(shù)量是不固定的，當(dāng)你的參數(shù)是明確知道數(shù)量時(shí)用 call ，而不確定的時(shí)候用 apply，然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時(shí)，函數(shù)內(nèi)部也可以通過(guò) arguments 這個(gè)數(shù)組來(lái)遍歷所有的參數(shù)，我們看一下一些用法

代碼一

var array1 = [12 , "foo" , {name:"Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
console.log(array1);
//[12, "foo", Object, -2458, "Doe", 555, 100] 

代碼二

var numbers = [5, 458 , 120 , -215 ];
Math.max.apply(null,numbers);
//458 

代碼三

log(12 , "foo" , {name:"Joe"} , -2458);
function log(){
 var args = Array.prototype.slice.call(arguments);
 args.unshift('(app)');
 console.log.apply(console, args);
};
// (app) 12 foo Object {name: "Joe"} -2458 

bind

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

與上面不同的是，bind會(huì)返回一個(gè)改變this指向的新函數(shù) ，注意這里強(qiáng)調(diào)的是新函數(shù)，其與之前的使用的不是同一塊內(nèi)存地址，所以當(dāng)你需要重復(fù)使用這個(gè)函數(shù)的時(shí)候，你就不得不把其保存到一個(gè)變量，方便下次調(diào)用。上面的兩個(gè)函數(shù)都是返回的執(zhí)行結(jié)果，即調(diào)用即執(zhí)

行，此外，另外需要注意的地方是，bind函數(shù)中的首個(gè)參數(shù)，會(huì)自動(dòng)成為返回新函數(shù)中參數(shù)的默認(rèn)值，那么正式調(diào)用的時(shí)候，只需要給出除首個(gè)參數(shù)外，剩余參數(shù)即可。

function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
var new_f = f.bind(null,1,1)
//return new function
new_f(1)
//return 2 

需要說(shuō)明的是，上面所有示例代碼中的thisArg參數(shù)均用null來(lái)代替了，在未給出指定thisArg對(duì)象的情況下，null與undefined下this指向是全局對(duì)象，即js代碼執(zhí)行環(huán)境

apply、call、bind比較

var obj = {bar: 'Oops , this is a bad idea' };
 
var foo = {
  get: function() {
    return this.bar;
  }
}
 
var bind = foo.get.bind(obj) ,call = foo.get.call(obj) ,apply = foo.get.apply(obj);
 
console.log(bind(),call,apply);
console.log(bind,call,apply); 
 
console.log(typeof bind,typeof call,typeof apply);
console.log(typeof bind(),typeof call,typeof apply); 

看到區(qū)別沒(méi)有，區(qū)別是，當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時(shí)候，使用 bind() 方法。而 apply/call 則會(huì)立即執(zhí)行函數(shù)

apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的；
apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參；
bind是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply、call則是立即調(diào)用 

以上這篇深入理解JavaScript中的call、apply、bind方法的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論