Javascript中call，apply，bind方法的詳解與總結

来源:http://www.cnblogs.com/Uncle-Keith/archive/2016/08/30/5822549.html
-Advertisement-
Play Games

在 javascript之 this 關鍵字詳解 文章中，談及瞭如下內容，做一個簡單的回顧： 1.this對象的涵義就是指向當前對象中的屬性和方法。 2.this指向的可變性。當在全局作用域時，this指向全局；當在某個對象中使用this時，this指向該對象；當把某個對象的方法賦值給另外一個對象時 ...


 

 

在 javascript之 this 關鍵字詳解 文章中，談及瞭如下內容，做一個簡單的回顧：

1.this對象的涵義就是指向當前對象中的屬性和方法。

2.this指向的可變性。當在全局作用域時，this指向全局；當在某個對象中使用this時，this指向該對象；當把某個對象的方法賦值給另外一個對象時，this會指向後一個對象。

3.this的使用場合有：在全局環境中使用；在構造函數中使用，在對象的方法中使用。

4.this的使用註意點，最重要的一點就是要避免多層嵌套使用this對象。

 

對this關鍵字有了稍稍瞭解便知道，this對象指向會經常改變的，這會造成一些意想不到的影響。JavaScript提供了call、apply、bind這三個方法，來切換/固定this的指向。

 

以下內容會分為如下小節：

1.call/apply/bind方法的來源

2.Function.prototype.call()

3.Function.prototype.apply()

　　3.1：找出數組中的最大數

　　3.2：將數組的空元素變為undefined

　　3.3：轉換類似數組的對象

4.Function.prototype.bind()

5.綁定回調函數的對象

6.call，apply，bind方法的聯繫和區別

 

1.call/apply/bind方法的來源

　　首先，在使用call，apply，bind方法時，我們有必要知道這三個方法究竟是來自哪裡？為什麼可以使用的到這三個方法？

　　call，apply，bind這三個方法其實都是繼承自Function.prototype中的，屬於實例方法。

1     console.log(Function.prototype.hasOwnProperty('call')) //true
2     console.log(Function.prototype.hasOwnProperty('apply')) //true
3     console.log(Function.prototype.hasOwnProperty('bind')) //true

　　上面代碼中，都返回了true，表明三種方法都是繼承自Function.prototype的。當然，普通的對象，函數，數組都繼承了Function.prototype對象中的三個方法，所以這三個方法都可以在對象，數組，函數中使用。

　　關於繼承的概念，會在以後與大家分享。

 

2.Function.prototype.call()

　　函數實例的call方法，可以指定該函數內部this的指向（即函數執行時所在的作用域），然後在所指定的作用域中，調用該函數。並且會立即執行該函數。

　　看個例子來好好理解這段話。

 1     var keith = {
 2         rascal: 123
 3     };
 4 
 5     var rascal = 456;
 6 
 7     function a() {
 8         console.log(this.rascal);
 9     }
10 
11     a(); //456
12     a.call(); //456
13     a.call(null); //456
14     a.call(undefined); //456
15     a.call(this); //456
16     a.call(keith); //123

　　上面代碼中，a函數中的this關鍵字，如果指向全局對象，返回結果為456。可以看到，如果call方法沒有參數，或者參數為null或undefined或者this，則等同於指向全局對象。如果使用call方法將this關鍵字指向keith對象，也就是將該函數執行時所在的作用域為keith對象，返回結果為123。

　　call()方法可以傳遞兩個參數。第一個參數是指定函數內部中this的指向（也就是函數執行時所在的作用域），第二個參數是函數調用時需要傳遞的參數。

1     function keith(a, b) {
2         console.log(a + b);
3     }
4 
5     keith.call(null, 1, 2); //3

　　第一個參數是必須的，可以是null，undefined，this，但是不能為空。設置為null，undefined，this表明函數keith此時處於全局作用域。第二個參數中必須一個個添加。而在apply中必須以數組的形式添加。

　　call方法的一個應用是調用對象的原生方法。也可以用於將類數組對象轉換為數組。

 1     var obj = {};
 2     console.log(obj.hasOwnProperty('toString')); //false
 3 
 4     obj.hasOwnProperty = function() {
 5         return true;
 6     }
 7 
 8     console.log(obj.hasOwnProperty('toString')); //true
 9 
10     console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

　　上面代碼中，hasOwnProperty是obj對象繼承的方法，如果這個方法一旦被覆蓋，就不會得到正確結果。call方法可以解決這個方法，它將hasOwnProperty方法的原始定義放到obj對象上執行，這樣無論obj上有沒有同名方法，都不會影響結果。要註意的是，hasOwnProperty是Object.prototype原生對象的方法，而call是繼承自Function.prototype的方法。

　　

3.Function.prototype.apply()

　　apply方法的作用與call方法類似，也是改變this指向（函數執行時所在的作用域），然後在指定的作用域中，調用該函數。同時也會立即執行該函數。唯一的區別就是，它接收一個數組作為函數執行時的參數。

　　apply方法的第一個參數也是this所要指向的那個對象，如果設為null或undefined或者this，則等同於指定全局對象。第二個參數則是一個數組，該數組的所有成員依次作為參數，在調用時傳入原函數。原函數的參數，在call方法中必須一個個添加，但是在apply方法中，必須以數組形式添加。

　　看一下call，apply的細微差別。

1     function keith(a, b) {
2         console.log(a + b);
3     }
4 
5     keith.call(null, 2, 3); //5
6     keith.apply(null, [2, 3]); //5

　　上面代碼中，第一個參數為null，指向全局作用域；第二個參數傳入的形式稍稍不同。

　　apply方法有以下應用。

 

　　3.1：找出數組中的最大數

1     var a = [2, 4, 5, 7, 8, 10];
2 
3     console.log(Math.max.apply(null, a)); //10
4     console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10

　　Javascript中是沒有提供找出數組中最大值的方法的，結合使用繼承自Function.prototype的apply和Math.max方法，就可以返回數組的最大值。

　　

　　3.2：將數組的空元素變為undefined

　　通過apply方法，利用Array構造函數將數組的空元素變成undefined。

1 console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

　　空元素與undefined的差別在於，數組的forEach方法會跳過空元素，但是不會跳過undefined和null。因此，遍歷內部元素的時候，會得到不同的結果。

    var a = [1, , 3];
    a.forEach(function(index) {
        console.log(index); //1,3 ，跳過了空元素。
    })

    Array.apply(null,a).forEach(function(index){
        console.log(index);    ////1,undefined,3  ，將空元素設置為undefined
    })

 

　　3.3：轉換類似數組的對象

　　另外，利用數組對象的slice方法，可以將一個類似數組的對象（比如arguments對象）轉為真正的數組。當然，slice方法的一個重要應用，就是將類似數組的對象轉為真正的數組。call和apply都可以實現該應用。

1     console.log(Array.prototype.slice.apply({0:1,length:1}));    //[1]
2     console.log(Array.prototype.slice.call({0:1,length:1}));    //[1]
3     console.log(Array.prototype.slice.apply({0:1,length:2}));    //[1,undefined]
4     console.log(Array.prototype.slice.call({0:1,length:2}));    //[1,undefined]
1     function keith(a,b,c){
2         return arguments;
3     }
4 
5     console.log(Array.prototype.slice.call(keith(2,3,4)));    //[2,3,4]

　　上面代碼的call，apply方法的參數都是對象，但是返回結果都是數組，這就起到了將對象轉成數組的目的。從上面代碼可以看到，這個方法起作用的前提是，被處理的對象必須有length屬性，以及相對應的數字鍵。

 

　　

4.Function.prototype.bind()

　　bind方法用於指定函數內部的this指向（執行時所在的作用域），然後返回一個新函數。bind方法並非立即執行一個函數。

 1     var keith = {
 2         a: 1,
 3         count: function() {
 4             console.log(this.a++);
 5         }
 6     };
 7 
 8     keith.count(); //1
 9     keith.count(); //2
10     keith.count(); //3

　　上面代碼中，如果this.a指向keith對象內部的a屬性，如果這個方法賦值給另外一個變數，調用時就會出錯。

1     var keith = {
2         a: 1,
3         count: function() {
4             console.log(this.a++);
5         }
6     };
7 
8     var f = keith.count;
9     f(); //NaN

　　上面代碼中，如果把count方法賦值給f變數，那麼this對象指向不再是keith對象了，而是window對象。而window.a預設為undefined，進行遞增運算之後undefined++就等於NaN。

　　為瞭解決這個問題，可以使用bind方法，將keith對象里的this綁定到keith對象上，或者是直接調用。

1     var f = keith.count.bind(keith);
2     f(); //1
3     f(); //2
4     f(); //3
1     keith.count.bind(keith)() //1
2     keith.count.bind(keith)() //2
3     keith.count.bind(keith)() //3

　　當然，this也可以綁定到其他對象上。

1     var obj = {
2         a: 100
3     };
4     var f = keith.count.bind(obj);
5     f(); //100
6     f(); //101
7     f(); //102

　　同樣，我們也可以給bind方法傳遞參數，第一個參數如果為null或者undefined或者this，會將函數內部的this對象指向全局環境；第二個為調用時需要的參數，並且傳遞參數的形式與call方法相同。

1     function keith(a, b) {
2         return a + b;
3     }
4     console.log(keith.apply(null,[1,4])); //5
5     console.log(keith.call(null,1,4)); //5
6     console.log(keith.bind(null, 1, 4)); //keith()
7     console.log(keith.bind(null, 1, 4)()); //5

　　上面代碼中，可以看出call，apply，bind三者的區別：call和apply方法都是在調用之後立即執行的。而bind調用之後是返回原函數，需要再調用一次才行，有點像閉包的味道，如果對閉包概念不熟悉，可以瀏覽這兩篇文章：javascript--函數參數與閉包--詳解，javascript中重要概念-閉包-深入理解。

 

5.綁定回調函數的對象

　　在這篇文章javascript之 this 關鍵字詳解中，有談及到如果在回掉函數中使用this對象，那麼this對象是會指向DOM對象，也就是button對象。如果要解決回調函數中this指向問題，可以用如下方法。

 1     var o = {
 2         f: function() {
 3             console.log(this === o);
 4         }
 5     }
 6 
 7     $('#button').on('click', function() {
 8         o.f.apply(o);
 9         //或者 o.f.call(o);
10         //或者 o.f.bind(o)();
11     });

　　點擊按鈕以後，控制台將會顯示true。由於apply方法（或者call方法）不僅綁定函數執行時所在的對象，還會立即執行函數（而bind方法不會立即執行，註意區別），因此不得不把綁定語句寫在一個函數體內。

 

6.call，apply，bind方法的聯繫和區別

　　其實用於指定函數內部的this指向的問題，這三個方法都差不多，只是存在形式上的差別。讀者可以將以上的例子用三種方法嘗試用三種方法實現。

　　總結一下call，apply，bind方法：

　　a：第一個參數都是指定函數內部中this的指向（函數執行時所在的作用域），然後根據指定的作用域，調用該函數。

　　b：都可以在函數調用時傳遞參數。call，bind方法需要直接傳入，而apply方法需要以數組的形式傳入。

　　c：call，apply方法是在調用之後立即執行函數，而bind方法沒有立即執行，需要將函數再執行一遍。有點閉包的味道。

　　d：改變this對象的指向問題不僅有call，apply，bind方法，也可以使用that變數來固定this的指向。如有疑問，請訪問 javascript之 this 關鍵字詳解


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於響應式佈局
    響應式佈局，就是一個網站可以相容多類型終端，但不是需要為每一個終端做一個特定的網頁版本。響應式佈局可以為不同終端的用戶提供更舒適的界面和用戶體驗，目前越來越多的大屏幕移動設備的出現，響應式也隨之成為開發人員廣泛使用的WEB技術。 優點： 面對不同解析度設備靈活性強 能夠快捷解決多設備顯示適應問題 缺 ...
  • 使用Vue編寫點擊數字小游戲
    使用vue編寫一個點擊數字計時小游戲,列入你在文本框中輸入3,點擊開始會生成一個3行3列的表格,表格數據為1-9隨機排列,這時候從1開始點擊,按順序點到9,當按正確順序點擊完畢,會提示所用的時間,如果順序沒有按對,會提示游戲結束. 1.首先下載vue源碼,下載地址http://cn.vuejs.or ...
  • jQuery動畫特效實例教程
    本文以實例形式詳細講述了jQuery動畫特效的實現方法。 1.自製摺疊內容塊 內容塊如下： <div class="module"> <div class="caption"> <span>標題</span> <img src="rollup.gif" alt="rollup" title="rol ...
  • 深入剖析響應式佈局的原理
    說到響應式佈局，相信大家都有一定的瞭解，響應式佈局是今年很流行的一個設計理念，隨著移動互聯網的盛行，為解決如今各式各樣的瀏覽器解析度以及不同移動 設備的顯示效果，設計師提出了響應式佈局的設計方案。今天就和大家來講講響應式佈局這件小事，包含什麼是響應式佈局、響應式佈局的優點和缺點以及響應式布 局該怎麼 ...
  • Javascript面向對象編程（三) --- 非構造函數的繼承
    一、什麼是"非構造函數"的繼承？ 比如，現在有一個對象，叫做"中國人"。 還有一個對象，叫做"醫生"。 請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成一個"中國醫生"的對象？ 這裡要註意，這兩個對象都是普通對象，不是構造函數，無法使用構造函數方法實現"繼承"。 object()方法 ...
  • JavaScript If...Else、Switch、For、While、Break、Continue語句
    一，JavaScript If...Else 語句 條件語句 通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。 在 JavaScript 中，我們可使用以下條件語句： if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼 if...el ...
  • 移動前端開發總結
    移動前端開發，也就是webapp，主要是針對Iphone、Android等高端手機。 1、禁止用戶屏幕旋轉。 這點可以肯定的說是做不到的，之前因為有項目需要禁止屏幕旋轉，所以網上查閱了大量的資料，發現根本沒有解決辦法，在移動版webkit中根本做不到。蘋果api也說明瞭，我們為了讓用戶在safa... ...
  • ES6學習筆記之變數的解構賦值
    es5中通常我們聲明變數都是以下的方式： 有時變數多寫起來真的很麻煩，很多繁瑣的差不多的重覆工作，es6為我們提供了多種更加便利的聲明變數的形式——變數的解構賦值 es6允許按照一定的模式，從數組和對象中提取值，對變數進行賦值。本質是模式匹配。 變數的聲明和賦值是一體的，使用let或者const不可 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類