關于Javascript中apply、call、bind方法說明

mrcode 發布于2019-08-20 10:14 / 2365人閱讀

摘要：需要注意的是，指定的值并不一定是該函數執行時真正的值，如果這個函數處于非嚴格模式下，則指定為或時會自動指向全局對象瀏覽器中就是對象，同時值為原始值數字，字符串，布爾值的會指向該原始值的自動包裝對象。

JavaScript函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念

apply和call函數

call() 和 apply()都是為了改變某個函數運行時的上下文（context）而存在的，換句話說，就是為了改變函數體內部 this 的指向

call()方法接受的是一個參數列表，而apply()方法接受的是一個包含多個參數的數組（或類數組對象）

    fun.apply(thisArg[, argsArray])
    參數:
        thisArg
            在 fun 函數運行時指定的 this 值。需要注意的是，指定的 this 值并不一定是該函數執行時真正的 this 值，如果這個函數處于非嚴格模式下，則指定為 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象)，同時值為原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。
        argsArray
            一個數組或者類數組對象，其中的數組元素將作為多帶帶的參數傳給 fun 函數。如果該參數的值為null 或 undefined，則表示不需要傳入任何參數。從ECMAScript 5 開始可以使用類數組對象。瀏覽器兼容性請參閱本文底部內容。

    fun.call(thisArg[, arg1[, arg2[, ...]]])
    參數:
        thisArg
            在fun函數運行時指定的this值。需要注意的是，指定的this值并不一定是該函數執行時真正的this值，如果這個函數處于非嚴格模式下，則指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)，同時值為原始值(數字，字符串，布爾值)的this會指向該原始值的自動包裝對象。
            
        arg1, arg2, ...
            指定的參數列表

function a(xx, yy) {    
    alert(xx, yy);    
    alert(this);    
    alert(arguments);
}

a.apply(null, [5, 55]);
a.call(null, 5, 55);

bind函數

bind()方法會創建一個新函數，當這個新函數被調用時，它的this值是傳遞給bind()的第一個參數, 它的參數是bind()的其他參數和其原本的參數

fun.bind(thisArg[, arg1[, arg2[, ...]]])
參數:
    thisArg
        當綁定函數被調用時，該參數會作為原函數運行時的 this 指向。當使用new 操作符調用綁定函數時，該參數無效。
    arg1, arg2, ...
        當綁定函數被調用時，這些參數加上綁定函數本身的參數會按照順序作為原函數運行時的參數

如果有興趣想知道 Function.prototype.bind() 內部長什么樣以及是如何工作的，這里有個非常簡單的例子：

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

MDN為沒有自身實現bind() 方法的瀏覽器提供了一個絕對可靠的替代方案:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }
 
    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };
 
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
 
    return fBound;
  };
}

云服務器 GPU云服務器 JS中bind、call和apply的作 javascript中apply apply與call的區別 js中的call和apply

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80051.html

Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

WrBug 2019-08-30 15:54 評論0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

Sike 2019-08-02 13:56 評論0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向對象的中，我們了解到在中，一切都是對象。到目前為止，我們已將函數視為由名稱可選，也可以是匿名函數組成的對象及其在調用時執行的代碼。這意味著，我們可以調用任何函數，并在調用函數中明確指定。和用于完全相同的目的。 What s this 在面向對象的JS中，我們了解到在JS中，一切都是對象。因為一切都是對象，我們開始明白我們可以為函數設置和訪問其他屬性。而this提供了一種更優雅的方...

sarva 2019-08-23 14:11 評論0 收藏0
JavaScript深入之bind的模擬實現

摘要：也就是說當返回的函數作為構造函數的時候，時指定的值會失效，但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數的。 JavaScript深入系列第十一篇，通過bind函數的模擬實現，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數...

FingerLiu 2019-08-20 16:15 評論0 收藏0
call、apply、bind的用法小結

摘要：新手經常犯的一個錯誤是將一個方法從對象中拿出來，然后再調用，希望方法中的是原來的對象。如果不做特殊處理的話，一般會丟失原來的對象。 call、apply、bind是JavaScript中Function函數自帶的方法，主要用于改變this的指向區別： call（） 1.語法： fun.call(this, arg1,arg2) 2.this取值的幾點說明：（1）處于非嚴格模式下，...

woshicixide 2019-08-26 11:36 評論0 收藏0