一、call恰梢、apply佛南、bind方法的共同點(diǎn)和區(qū)別:
(1)apply 、 call 嵌言、bind 三者都是用來改變函數(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():
語法: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ù)值或布爾類型等基礎(chǔ)類型,函數(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()
語法:fn.apply(thisArg,[arg1赫粥,arg2.....])
說明:如果 thisArg 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象观话,那么將導(dǎo)致一個(gè) TypeError。
如果沒有提供 任何一個(gè)參數(shù)越平,那么 Global 對(duì)象將被用作 thisArg频蛔, 并且無法被傳遞任何參數(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()
語法: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ù)無效割按。
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