JS中的call apply bind方法詳解

2021-07-25 08:44:02 字數 3302 閱讀 5218

1.方法定義

call方法:

語法:call([thisobj[,arg1[, arg2[,   [,.argn]]]]])

定義:呼叫乙個物件的乙個方法,以另乙個物件替換當前物件。

說明:call 方法可以用來代替另乙個物件呼叫乙個方法。call 方法可將乙個函式的物件上下文從初始的上下文改變為由 thisobj 指定的新物件。

如果沒有提供 thisobj 引數,那麼 global 物件被用作 thisobj。

定義:應用某一物件的乙個方法,用另乙個物件替換當前物件。

說明:如果 argarray 不是乙個有效的陣列或者不是 arguments 物件,那麼將導致乙個 typeerror。

如果沒有提供 argarray 和 thisobj 任何乙個引數,那麼 global 物件將被用作 thisobj, 並且無法被傳遞任何引數。

2、常用例項

a、

function add(a,b)  

function sub(a,b)

add.call(sub,3,1);

這個例子中的意思就是用 add 來替換 sub,add.call(sub,3,1) == add(3,1) ,所以執行結果為:alert(4); // 注意:js 中的函式其實是物件,函式名是對 function 物件的引用。

b、

function animal()	

} function cat()

var animal = new animal();

var cat = new cat();

//輸入結果為"cat"   

animal.showname.call(cat,",");   

call 的意思是把 animal 的方法放到cat上執行,原來cat是沒有showname() 方法,現在是把animal 的showname()方法放到 cat上來執行,所以this.name 應該是 cat。

c、實現繼承

function animal(name)	  

}

function cat(name)

var cat = new cat("black cat");

cat.showname();

animal.call(this) 的意思就是使用 animal物件代替this物件,那麼 cat中不就有animal的所有屬性和方法了嗎,cat物件就能夠直接呼叫animal的方法以及屬性了.

d、多重繼承

function class10()  

} function class11()

} function class2()

var func=new function() 

var myfunc=function(x,y)

myfunc.call(func,"var"," fun");// "func" "var fun"

在ecmascript5中擴充套件了叫bind的方法(ie6,7,8不支援),使用方法如下

function t(c) 

t.prototype =

//②this.dom.onmouseout = function() .bind(this)

}};(new t()).init();

結果:通過①和②的對照加上顯示的結果就會看出bind的作用:改變了上下文的this

bind與call很相似,,例如,可接受的引數都分為兩部分,且第乙個引數都是作為執行時函式上下文中的this的物件。

不同點有兩個:

①bind的返回值是函式

//都是將obj作為上下文的this

function func(name,id)

var obj = "look here";

//什麼也不加func(" ","-->");

//使用bind是 返回改變上下文this後的函式

var a = func.bind(obj, "bind", "-->");

a();

//使用call是 改變上下文this並執行函式

var b = func.call(obj, "call", "-->");

②後面的引數的使用也有區別

function f(a,b,c)

var f_extend = f.bind(null,"extend_a")

f("a","b","c") //這裡會輸出--> a b c

f_extend("a","b","c") //這裡會輸出--> extend_a a b

f_extend("b","c") //這裡會輸出--> extend_a b c

f.call(null,"extend_a") //這裡會輸出--> extend_a undefined undefined

call 是 把第二個及以後的引數作為f方法的實參傳進去

而bind 雖說也是獲取第二個及以後的引數用於之後方法的執行,但是f_extend中傳入的實參則是在bind中傳入引數的基礎上往後排的。

//這句**相當於以下的操作

var f_extend = f.bind(null,"extend_a")

//↓↓↓

var f_extend = function(b,c)

舉乙個應用場景:例如現在有乙個方法 根據不同的檔案型別進行相應的處理,通過bind 就可以建立出簡化版的處理方法

function filedealfunc(type,url,callback)

else if(type=="xml")

.....

}var txtdealfunc = filedealfunc.bind(this,"txt");

//這樣使用的時候更方便一些

filedealfunc("txt",xxurl,func); //原來

txtdealfunc(xxurl,func); //現在

以下是相容處理

if (!function.prototype.bind) 

}}

JS 理解JS中的物件

物件是object資料型別的值 物件是一組沒有特定順序的值 其中每個值都有乙個名字,從而,物件看起來就像是一組名值對。建立並定義物件的方法 1.var person new object person.name carolina person.age 29 person.job dream pers...

js中的函式

1 js中的string物件 1 內建的 2 屬性 length 3 方法 indexof 查詢子字串 匹配字串 查詢到了,返回 字串 出現的位置 沒有找到 返回 1 charat 返回指定位置的字串 substr 字串的擷取,可加兩個引數,形如 2,2 第二個位置 長度 也可以是乙個引數,則表示從...

js中with的用法

with語句用於設定 在特定物件中的作用域。它的語法 with expression statement 例如 var smessage hello with smessage alert touppercase 輸出 hello 在這個例子中,with語句用於字串,所以在呼叫touppercase...