apply 和 call 的區(qū)別
ECMAScript 規(guī)范給所有函數(shù)都定義了 call 與 apply 兩個方法蝇更,它們的應(yīng)用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區(qū)別而已扒腕。
apply( )
apply 方法傳入兩個參數(shù):一個是作為函數(shù)上下文的對象,另外一個是作為函數(shù)參數(shù)所組成的數(shù)組萤悴。
var obj = {
name : 'linxin'
}
function func(firstName, lastName){
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B
可以看到瘾腰,obj 是作為函數(shù)上下文的對象,函數(shù) func 中 this 指向了 obj 這個對象覆履。參數(shù) A 和 B 是放在數(shù)組中傳入 func 函數(shù)蹋盆,分別對應(yīng) func 參數(shù)的列表元素。
call( )
call 方法第一個參數(shù)也是作為函數(shù)上下文的對象硝全,但是后面?zhèn)魅氲氖且粋€參數(shù)列表栖雾,而不是單個數(shù)組。
var obj = {
name: 'linxin'
}
function func(firstName, lastName) {
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D'); // C linxin D
對比 apply 我們可以看到區(qū)別伟众,C 和 D 是作為單獨(dú)的參數(shù)傳給 func 函數(shù)析藕,而不是放到數(shù)組中。
對于什么時候該用什么方法凳厢,其實(shí)不用糾結(jié)账胧。如果你的參數(shù)本來就存在一個數(shù)組中,那自然就用 apply先紫,如果參數(shù)比較散亂相互之間沒什么關(guān)聯(lián)找爱,就用 call。
apply 和 call 的用法
1.改變 this 指向
var obj = {
name: 'linxin'
}
function func() {
console.log(this.name);
}
func.call(obj); // linxin
我們知道泡孩,call 方法的第一個參數(shù)是作為函數(shù)上下文的對象车摄,這里把 obj 作為參數(shù)傳給了 func,此時函數(shù)里的 this 便指向了 obj 對象。此處 func 函數(shù)里其實(shí)相當(dāng)于
function func() {
console.log(obj.name);
}
2.借用別的對象的方法
先看例子
var Person1 = function () {
this.name = 'linxin';
}
var Person2 = function () {
this.getname = function () {
console.log(this.name);
}
Person1.call(this);
}
var person = new Person2();
person.getname(); // linxin
從上面我們看到吮播,Person2 實(shí)例化出來的對象 person 通過 getname 方法拿到了 Person1 中的 name变屁。因?yàn)樵?Person2 中,Person1.call(this) 的作用就是使用 Person1 對象代替 this 對象意狠,那么 Person2 就有了 Person1 中的所有屬性和方法了粟关,相當(dāng)于 Person2 繼承了 Person1 的屬性和方法。
3.調(diào)用函數(shù)
apply环戈、call 方法都會使函數(shù)立即執(zhí)行闷板,因此它們也可以用來調(diào)用函數(shù)。
function func() {
console.log('linxin');
}
func.call(); // linxin
call 和 bind 的區(qū)別
在 EcmaScript5 中擴(kuò)展了叫 bind 的方法院塞,在低版本的 IE 中不兼容遮晚。它和 call 很相似,接受的參數(shù)有兩部分拦止,第一個參數(shù)是是作為函數(shù)上下文的對象县遣,第二部分參數(shù)是個列表,可以接受多個參數(shù)汹族。
它們之間的區(qū)別有以下兩點(diǎn)萧求。
1.bind 發(fā)返回值是函數(shù)
var obj = {
name: 'linxin'
}
function func() {
console.log(this.name);
}
var func1 = func.bind(obj);
func1(); // linxin
bind 方法不會立即執(zhí)行,而是返回一個改變了上下文 this 后的函數(shù)顶瞒。而原函數(shù) func 中的 this 并沒有被改變夸政,依舊指向全局對象 window。
2.參數(shù)的使用
function func(a, b, c) {
console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C'); // A B C
func1('A', 'B', 'C'); // linxin A B
func1('B', 'C'); // linxin B C
func.call(null, 'linxin'); // linxin undefined undefined
call 是把第二個及以后的參數(shù)作為 func 方法的實(shí)參傳進(jìn)去榴徐,而 func1 方法的實(shí)參實(shí)則是在 bind 中參數(shù)的基礎(chǔ)上再往后排秒梳。
在低版本瀏覽器沒有 bind 方法,我們也可以自己實(shí)現(xiàn)一個箕速。
if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var self = this, // 保存原函數(shù)
context = [].shift.call(arguments), // 保存需要綁定的this上下文
args = [].slice.call(arguments); // 剩余的參數(shù)轉(zhuǎn)為數(shù)組
return function () { // 返回一個新函數(shù)
self.apply(context,[].concat.call(args, [].slice.call(arguments)));
}
}
}