JS中的call、apply、bind方法

在JavaScript中,callapplybindFunction對象自帶的三個方法,這三個方法的主要作用是改變函數(shù)中的this指向。

callapplybind方法的共同點和區(qū)別:

applycallbind三者都是用來改變函數(shù)的this對象的指向的;

applycallbind三者第一個參數(shù)都是this要指向的對象,也就是想指定的上下文(函數(shù)的每次調(diào)用都會擁有一個特殊值——本次調(diào)用的上下文(context)——這就是this關(guān)鍵字的值。);

applycallbind三者都可以利用后續(xù)參數(shù)傳參;

bind是返回對應(yīng)函數(shù),便于稍后調(diào)用;applycall則是立即調(diào)用 。

一、call

call( )

語法:

call ( [ thisObj [ ,arg1 [, arg2[ , [ ,.argN ] ] ] ] ] )

定義:調(diào)用一個對象的一個方法,以另一個對象替換當(dāng)前對象。

說明:call方法可以用來代替另一個對象調(diào)用一個方法。

call方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。

thisObj的取值有以下4種情況:

(1) 不傳,或者傳null,undefined, 函數(shù)中的this指向window對象

(2) 傳遞另一個函數(shù)的函數(shù)名,函數(shù)中的this指向這個函數(shù)的引用

(3) 傳遞字符串、數(shù)值或布爾類型等基礎(chǔ)類型,函數(shù)中的this指向其對應(yīng)的包裝對象,如 String、Number、Boolean

(4) 傳遞一個對象,函數(shù)中的this指向這個對象

function a( ) {

? ?console.log(this); ? ? ? ? ? ? ? //輸出函數(shù)a中的this對象

}

function b( ) { }

var c = {name:"call"}; ? ? ? ? ? //定義對象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

如果你不理解上面的,沒關(guān)系,我們再來看一個例子:

function class1( ) {

? ? ? ? this.name=function ( ) {

? ? ? ? ? ? ?console.log("我是class1內(nèi)的方法");

? ? ? ?}

}

function class2 ( ) {

? ? ? ? ? class1.call(this); ? ? ? ? ? ? ? ?//此行代碼執(zhí)行后,當(dāng)前的this指向了class1

}

var f = new class2 ( );

f.name( ); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //調(diào)用的是class1內(nèi)的方法,將class1的name方法交給class2使用

常用例子:

(1)

function eat(x,y) {

? ? ? console.log(x+y);

}

function drink(x,y) {

? ? ? ?console.log(x-y);

}

eat.call(drink,3,2);

輸出:5

這個例子中的意思就是用 eat 來替換 drink,eat.call(drink,3,2) == eat(3,2) ,所以運行結(jié)果為:console.log(5);

注意:js 中的函數(shù)其實是對象,函數(shù)名是對 Function 對象的引用。

(2)

function Animal ( ) {

? ? this.name="animal";

? ? this.showName=function ( ) {

? ? ? ? ? console.log(this.name);

? ? }

}

function Dog?( ) {

? ? this.name="dog";

}

var animal = new Animal( );

var dog = new Dog( );

animal.showName.call(dog);

輸出:dog

在上面的代碼中,我們可以看到Dog里并沒有showName方法,那為什么(this.name)的值是dog呢?

關(guān)鍵就在于最后一段代碼(animal.showName.call(dog)),意思是把animal的方法放到dog上執(zhí)行,也可以說,把animal 的showName()方法放到 dog上來執(zhí)行,所以this.name 應(yīng)該是 dog。

(3)繼承

function Animal (name) {

? ? this.name=name;

? ? this.showName=function ( ) {

? ? ? ? ? console.log(this.name);

? ? }

}

function Dog (name) {

? ? ? Animal.call(this,name);

}

var dog = new Dog ("Crazy dog");

dog.showName( );

輸出:Crazy dog

Animal.call(this) 的意思就是使用 Animal對象代替this對象,那么Dog就能直接調(diào)用Animal的所有屬性和方法。

二、apply( )

語法:apply ( [ thisObj [ , argArray ] ] )

定義:應(yīng)用某一對象的一個方法,用另一個對象替換當(dāng)前對象。

說明:

?如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象,那么將導(dǎo)致一個 TypeError。

?如果沒有提供 argArray 和 thisObj 任何一個參數(shù),那么 Global 對象將被用作 thisObj, 并且無法被傳遞任何參數(shù)。

call 和 apply的區(qū)別

對于 apply、call 二者而言,作用完全一樣,只是接受參數(shù)的方式不太一樣。

function class1 (args1,args2) {

? ? ? this.name=function(){

? ? ? ? ? ? ? console.log(args,args);

? ? ? }

}

function class2 ( ) {

? ? ? ?var args1 = "1";?

? ? ? ?var args2 = "2";

? ? ? ?class1.call (this,args1,args2);

? ? ? ?/*或*/

? ? ? ?class1.apply ( this,[ args1,args2 ] );?

}

var c = new class2 ( );

c.name( );

輸出:12

call需要把參數(shù)按順序傳遞進(jìn)去,而?apply?則是把參數(shù)放在數(shù)組里。

既然兩者功能一樣,那該用哪個呢?

在JavaScript 中,某個函數(shù)的參數(shù)數(shù)量是不固定的,因此要說適用條件的話,當(dāng)你的參數(shù)是明確知道數(shù)量時用 call ;而不確定的時候用 apply,然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時,函數(shù)內(nèi)部也可以通過 arguments 這個數(shù)組來遍歷所有的參數(shù)。

三、bind

bind 是在EcmaScript5中擴展的方法(IE6,7,8不支持)

bind ( ) ?方法與 apply 和 call 很相似,也是可以改變函數(shù)體內(nèi) this 的指向。

? ? ?MDN的解釋是:bind ( )?方法會創(chuàng)建一個新函數(shù),稱為綁定函數(shù),當(dāng)調(diào)用這個綁定函數(shù)時,綁定函數(shù)會以創(chuàng)建它時傳入bind ( )方法的第一個參數(shù)作為this,傳入?bind ( )?方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。

注意:bind 方法的返回值是函數(shù)

var ba r= function ( ) {

? ? ? ?console.log(this.x);

}

var foo = {

? ? ? ? x:3

}

bar ( );

bar.bind (foo) ( );

/*或*/

var func = bar.bind(foo);

func( );

輸出:

undefined

3

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容