js中的apply與call的用法

這篇文章主要介紹了關於js中的apply與call的用法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

在ECAMScript3給Function的原型定義了兩個方法，它們是Function.prototype.call和Function.prototype.apply。本文詳細介紹了apply與call的用法，有需要的可以參考下。

前言

call 和apply 都是為了改變某個函數運行時的context 即上下文而存在的，換句話說，就是為了改變函數體內部this 的指向。
call 和 apply二者的作用完全一樣，只是接受參數的方式不太一樣。

方法定義
apply
Function.apply(obj,args)方法能接收兩個參數：

obj：這個物件將取代Function類別裡this物件

#args：這個是數組或類別數組，apply方法把這個集合中的元素當作參數傳遞給被呼叫的函數。

call

call方法與apply方法的第一個參數是一樣的，只不過第二個參數是一個參數列表

在非嚴格模式下當我們第一個參數傳遞為null或undefined時，函數體內的this會指向預設的宿主對象，在瀏覽器中則是window

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

用法

##"劫持"別人的方法

此時

foo中的logName方法將會被bar引用，this指向了bar

#

var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

實作繼承

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

在實際開發中，常會遇到this指向被不經意改變的場景。

有一個局部的
fun方法，fun被呼叫為普通函數時，fun內部的this#指向了window，但我們往往是想讓它指向該#test節點，請參見如下程式碼：

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}

使用

call,apply我們就可以輕鬆的解決這種問題了

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}

當然你也可以這樣做，不過在

ECMAScript 5的strict模式下，這種情況下的this已經被規定為不會指向全域對象，而是undefined：

window.id="window";
document.querySelector('#test').onclick = function(){
  var that = this;
  console.log(this.id);//test
  var fun = function(){
    console.log(that.id);
  }
  fun();//test
}

function func(){
  "use strict"
  alert ( this );  // 输出：undefined
}
func();

#其他用法

類別數組

這裡把符合以下條件的物件稱為類別數組

1.具有length屬性

2.以索引方式儲存資料

3.不具有陣列的push,pop等方法

常見類別數組有

arguments,NodeList!

(function(){
  Array.prototype.push.call(arguments,4);
  console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)

這樣就往

arguments中push一個4進去了

#Array.prototype.push 頁可以實現兩個數字組合並

同樣push方法沒有提供push一個數組,但是它提供了

push(param1,param,…paramN) 所以同樣也可以透過apply來裝換一下這個數組,即:

var arr1=new Array("1","2","3"); 
var arr2=new Array("4","5","6"); 
Array.prototype.push.apply(arr1,arr2); 
console.log(arr1);//["1", "2", "3", "4", "5", "6"]

也可以這樣理解,

arr1呼叫了push方法,參數是透過apply將數組裝換為參數列表的集合.

再例如我想求類別數組中的最大值

(function(){
  var maxNum = Math.max.apply(null,arguments);
  console.log(maxNum);//56
})(34,2,56);

判斷類型

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

#相關推薦：

##url、href、src在JS中的使用

實例解析Js中的this

以上是js中的apply與call的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！