詳解js中call與apply關(guān)鍵字的作用

更新時間：2016年11月21日 15:28:44 作者：逆心

本文主要介紹js中call與apply關(guān)鍵字的作用以及它們的用法,具體實例如下,希望對大家有所幫助

javascript call與apply關(guān)鍵字的作用

apply接受兩個參數(shù)。第一個參數(shù)指定函數(shù)體內(nèi)this對象的指向，第二個參數(shù)為一個帶下標的集合。

call則是apply的語法糖，如果參數(shù)數(shù)量固定，則可以不用帶下標的集合傳第二個參數(shù)。

var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//彈出6
func.call(null,1,2,3);//彈出6

當apply與call傳入的第一個參數(shù)為null時，函數(shù)體內(nèi)的this會指向window。

call與apply的用途

1、改變this的指向

var obj1 = {
 name = '劉備'
}
 
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
 
window.name = '三國';
getName();//彈出"三國"
getName.call(obj1);//彈出"劉備"
getName.call(obj2);//彈出"曹操"

所以，當在一些情況下this被莫名改變指向之后，可以使用call或apply來進行修正this的指向。

document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函數(shù)的方式調(diào)用，this指代window,相當于window.id 即 undefined
}

由于是普通函數(shù)的方式調(diào)用，所以上面的例子中，this已經(jīng)變成了window。下面看看如何使用call進行修正。

document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//強制函數(shù)內(nèi)的this為外層的this，
}

2、調(diào)用其他對象的函數(shù)

示例1：

var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函數(shù)來計算obj2的兩個屬性的和
alert(result);//輸出3

示例2：借用構(gòu)造函數(shù)實現(xiàn)類似繼承的效果

var A = function(name)
{
 this.name = name;
};
var B = function(){
 A.apply(this,arguments)
}
B.prototype.getName = function(){
 return this.name;
}
var b = new B('劉備');
alert(b.getName());

以上就是本文的內(nèi)容，有問題可以和小編聯(lián)系，謝謝對腳本之家的支持！

您可能感興趣的文章:

call
apply

相關(guān)文章

innerText innerHTML的用法以及注意事項 [推薦]
我們常常需要使用另外一些對象的屬性來實現(xiàn)動態(tài)改變其中的文本,它們就是：innerText，outerText，innerHTML，outerHTML，千萬要注意它們的大小寫，因為錯一點您就得不到預期的效果了。
2009-05-05
javascript showModalDialog 內(nèi)跳轉(zhuǎn)頁面的問題
在頁面中使用了showModalDialog，但是在跳轉(zhuǎn)鏈接時，不會在當前頁執(zhí)行，而是彈出一個新的頁面。
2010-11-11
HTML5+Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳（上）
這篇文章主要為大家詳細介紹了HTML5+Canvas，和jquery技術(shù)，調(diào)用手機拍照功能實現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript實現(xiàn)數(shù)組對象轉(zhuǎn)換為鍵值對的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對象的數(shù)組轉(zhuǎn)換為鍵值對形式的四種方法,并從實現(xiàn)方式的簡潔性、可讀性和性能角度進行了分析比較,感興趣的朋友可以參考下
2024-02-02
For循環(huán)中分號隔開的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號隔開的3部分的執(zhí)行順序,需要的朋友可以參考下
2014-05-05
淺談javascript如何獲取文件后綴名
這篇文章主要介紹了淺談javascript如何獲取文件后綴名，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
JS設計模式之策略模式概念與用法分析
這篇文章主要介紹了JS設計模式之策略模式概念與用法,簡單分析了策略模式的基本概念、原理并結(jié)合實例形式分析了javascript實現(xiàn)與使用策略模式的相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
利用JavaScript模擬京東快遞單號查詢效果
這篇文章主要為大家介紹了如何通過JavaScript模擬實現(xiàn)京東的快遞單號查詢效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試
2022-03-03
微信小程序簽到功能
這篇文章主要為大家詳細介紹了微信小程序簽到功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
去除鏈接虛線全面分析總結(jié)
去除鏈接虛線全面分析總結(jié)...
2006-08-08