首頁 > web前端 > js教程 > 主體

詳解JavaScript中apply和call的區別

黄舟
發布: 2017-03-21 14:19:47
原創
1309 人瀏覽過

本文主要介紹了JavaScript中apply 、call的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧

apply 和call 的區別

ECMAscript 規範給所有函數都定義了call 與apply 兩個方法,它們的應用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區別而已。

apply( )

#apply 方法傳入兩個參數:一個是作為函數上下文的對象,另外一個是作為函數參數所組成的數組。

var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B
登入後複製

可以看到,obj 是作為函數上下文的對象,函數 func 中 this 指向了 obj 這個對象。參數 A 和 B 是放在陣列中傳入 func 函數,分別對應 func 參數的列表元素。

call( )

call 方法第一個參數也是作為函數上下文的對象,但是後面傳入的是參數列表,而不是單一數組。

var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D
登入後複製

對比 apply 我們可以看到差異,C 和 D 是作為單獨的參數傳給 func 函數,而不是放到陣列中。

對於什麼時候該用什麼方法,其實不用糾結。如果你的參數本來就存在一個陣列中,那自然就用 apply,如果參數比較散亂彼此之間沒什麼關聯,就用 call。

apply 和call 的用法

#1.改變this 指向

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin
登入後複製

我們知道, call 方法的第一個參數是作為函數上下文的對象,這裡把obj 作為參數傳給了func,此時函數裡的this 便指向了obj 對象。此處func 函數裡其實相當於

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 實例化出來的物件person 透過getname 方法拿到了Person1 中的name。因為在Person2 中,Person1.call(this) 的作用就是使用Person1 物件來取代this 對象,那麼Person2 就有了Person1 中的所有屬性和方法了,相當於Person2 繼承了Person1 的屬性和方法。

3.呼叫函數

apply、call 方法都會使函數立即執行,因此它們也可以用來呼叫函數。

function func() {
 console.log('linxin');
}
func.call();   // linxin
登入後複製

call 和 bind 的差異

在 Ecmascript5 中擴充了叫 bind 的方法,在低版的 IE 中不相容。它和 call 很相似,接受的參數有兩個部分,第一個參數是是作為函數上下文的對象,第二部分參數是個列表,可以接受多個參數。

它們之間的差異有以下兩點。

1.bind 發回傳值是函數

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin
登入後複製

bind 方法不會立即執行,而是傳回一個改變了上下文this 後的函數。而原函數 func 中的 this 並沒有被改變,依舊指向全域物件 window。

2.參數的使用

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 是把第二個及以後的參數當作func 方法的實參傳進去,而func1 方法的實參實則是在bind 中參數的基礎上再往後排。

在低版本瀏覽器沒有 bind 方法,我們也可以自己實作一個。

if (!Function.prototype.bind) {
 Function.prototype.bind = function () {
  var self = this,      // 保存原函数
   context = [].shift.call(arguments), // 保存需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转为数组
  return function () {     // 返回一个新函数
   self.apply(context,[].concat.call(args, [].slice.call(arguments)));
  }
 }
}
登入後複製

以上是詳解JavaScript中apply和call的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!