call 和 apply 方法區別

標籤：style   http   color   io   ar   strong   sp   on   cti   

在js中call和apply它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數方式有所區別,下面我來給大家介紹一下call和apply用法。

在web前端開發過程中，我們經常需要改變this指向，通常我們想到的就是用call方法，但是對於call的理解很多人不是很清晰，那麼下面小編就給大家詳細說一說call和apply的詳細知識

一、call方法的定義

大家在百度裡面可以搜尋call，關於call的定義都很拗口。在我的理解，a.call(b,arg1,arg2..)就是a對象的方法應用到b對象上。例如如下例子：

代碼如下	複製代碼
function add(a,b) { alert(a+b); } function reduce(a,b) { alert(a-b); } add.call(reduce,1,3) //將add方法運用到reduce,結果為4

二、call可以改變this指向

如下例：

代碼如下	複製代碼
function b() { alert(this) } b(); //window b.call(); //window b.call(“a”,2,3); //a

再看一個複雜的例子：

代碼如下	複製代碼
function Animal() { this.name=”animal”; this.showName=function() { alert(this.name) } } function Cat() { this.name=”cat”; } var animal = new Animal(); var cat = new Cat(); animal.showName(); //結果為animal animal.showName.call(cat); //原本cat沒有showName方法，但是通過call方法將animal的showName方法應用到cat上,因此結果為cat

三、實現繼承

如下例子：

代碼如下	複製代碼
function Animal(name) { this.name=name; this.showName=function() { alert(this.name) } } function Cat(name) { Animal.call(this,name); //將Animal應用到Cat上，因此Cat擁有了Animal的所有屬性和方法 } var cat = new Cat(“Black Cat”); cat.showName(); //瀏覽器彈出Black Cat

四、apply用法

apply和call的用法只有一個地方不一樣，除此之外，其他地方基本一模一樣

a.call(b,arg1,arg2…)

apply(b,[arg1,arg2]) //apply只有2個參數，它將call的參數（arg1,arg2…）放在一個數組中作為apply的第二參數

call 和 apply 方法區別