一、call、apply、bind方法的共同點(diǎn)和區(qū)別:
(1)apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的;
(2)apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象,也就是想指定的上下文(函數(shù)的每次調(diào)用都會(huì)擁有一個(gè)特殊值——本次調(diào)用的上下文(context)——這就是this關(guān)鍵字的值。);
(3)apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參;
(4)bind 是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用;apply 、call 則是立即調(diào)用 。
1、call():
語(yǔ)法:fn.call(thisArg,arg1,arg2.....)
其中thisArg就是fun函數(shù)運(yùn)行時(shí)的指定的this值。arg1,arg2傳遞的其他值.....
其中thisArg有下面4種情況:
(1) 不傳,或者傳null,undefined, 函數(shù)中的this指向window對(duì)象
(2) 傳遞另一個(gè)函數(shù)的函數(shù)名,函數(shù)中的this指向這個(gè)函數(shù)的引用
(3) 傳遞字符串、數(shù)值或布爾類(lèi)型等基礎(chǔ)類(lèi)型,函數(shù)中的this指向其對(duì)應(yīng)的包裝對(duì)象,如 String、Number、Boolean
(4) 傳遞一個(gè)對(duì)象,函數(shù)中的this指向這個(gè)對(duì)象
function a(){
console.log(this); //輸出函數(shù)a中的this對(duì)象
}
function b(){}
var c={name:"call"}; //定義對(duì)象c
a.call(); //window
a.call(null); //window
a.call(undefined); //window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b); //function b(){}
a.call(c); //Object
常用例子:
const obj= {
name: ‘Lucy’
}
function fn(x,y){
console.log(this);
console.log(x+y)
}
//1、調(diào)用函數(shù);2、改變this的指向
fn.call(obj,1,2) //還可以傳遞參數(shù)
2、apply()
語(yǔ)法:fn.apply(thisArg,[arg1,arg2.....])
說(shuō)明:如果 thisArg 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象,那么將導(dǎo)致一個(gè) TypeError。
如果沒(méi)有提供 任何一個(gè)參數(shù),那么 Global 對(duì)象將被用作 thisArg, 并且無(wú)法被傳遞任何參數(shù)。
常用例子:
const obj= {
name: ‘Lucy’
}
function fn(x,y){
console.log(this);
console.log(x+y)
}
//1、調(diào)用函數(shù);2、改變this的指向
fn.call(obj,[1,2]) //還可以傳遞參數(shù),必須以數(shù)組的形式出現(xiàn)
call 和 apply的區(qū)別
對(duì)于 apply、call 二者而言,作用完全一樣,只是接受參數(shù)的方式不太一樣。
3、bind()
語(yǔ)法:fn.bind(thisArg[, arg1[, arg2[, ... ]]]);
thisArg:當(dāng)綁定函數(shù)被調(diào)用時(shí),該函數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的this指向,當(dāng)使用new操作符調(diào)用綁定函數(shù)時(shí),該參數(shù)無(wú)效。
arg1, arg2... :當(dāng)綁定函數(shù)被調(diào)用時(shí),這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。
返回值:返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function() {
return function(){
return this.name;
}.bind(this)
}
}
console.log(object.getNameFunc()());//>My Object