Javascript中call和apply的理解

mrcode 發布于2019-08-21 12:23 / 2959人閱讀

摘要：剩下的兩個，我們分別改變了他們的執行環境，分別指向了和，于是結果就是顯示對象各自的值。如果你仍然對和沒有清晰的認識，可以試著這樣理解。

在Javascript中，每個函數都包含兩個非繼承而來的方法，call和apply。這兩個方法的用途都是在特定的作用域中調用函數，實際上等于設置函數體內的this對象的值。
摘自《JavaScript高級程序設計》

apply方法接收兩個參數，第一個參數是在其中運行函數的作用域，第二個是一個參數數組或者arguments對象。
call方法與apply方法作用相同，第一個參數也相同，區別在于，其余的參數需要逐個列出。

apply(thisArg, argArray);
call(thisArg[,arg1,arg2…]);

是使用call還是apply要看具體的情況。如果你知道所有參數或者參數的數量不多，可以使用call；如果參數的數量不確定，或者數量很大，或者你收到的是一個數組或者是個arguments對象，則需要使用apply。

下面是使用apply的一些典型例子

// 獲得數組中最大的元素
var arr = [1, 8, 10, 3, 24, 89, 26];
var m = Math.max.apply(Math, arr); // m => 89

// 將類數組的對象轉為數組
var arr = Array.prototype.slice.call(arguments);

事實上，call和apply真正的用武之地在于，他們能夠擴充函數賴以運行的作用域。

我們再來看下面的例子

var name = "out"

var o1 = {
    name: "hello"
};

var o2 = {
    name: "world"
};

function sayName() {
    alert(this.name);
}

sayName.call(this); // out
sayName.call(window); // out
sayName.call(o1); // hello
sayName.call(o2); // world

前兩個輸出相同，因為在全局作用域，this即為window（瀏覽器環境）。
剩下的兩個，我們分別改變了他們的執行環境，分別指向了o1和o2，于是結果就是顯示對象各自的name值。

那么，使用call和apply有什么好處呢？我們發現，同樣的一個函數，當指定不同的執行環境時，會產生不同的結果，這么做的一個最大的好處就是解耦。

使用call和apply，函數和對象沒有強依賴關系，多個對象可以使用同一個函數，避免了資源的浪費，同時對于模塊化編程也大有幫助。

如果你仍然對call和apply沒有清晰的認識，可以試著這樣理解。
我們把方法比作是工具，比如一把刀；而變量是具體的實物，比如一個蘋果。我們可以使用這把刀切很多不同的蘋果，在切蘋果的過程中，實際上就是改變了刀的作用對象---不同的蘋果。

在上面的例子

// 將類數組的對象轉為數組
var arr = Array.prototype.slice.call(arguments);

slice是一個方法，但是它是屬于Array對象prototype屬性所有的，在對arguments使用時，我們可以理解為借用。
比如張三會砍樹，即張三有砍樹這個方法（至于張三有沒有樹無所謂），而李四有樹，但他卻不會砍，這時李四便可以借用張三砍樹的方法來砍自己的樹，寫成代碼就是

var zhangsan = {
   cut: function() {
        alert(this.tree);
   }
};

var lisi = {
    tree: "楊樹"
};
zhangsan.cut.call(lisi); // alert("楊樹")

還有一種情況是，李四自己也會砍樹，但是有一天他病了，砍不動了，這時他也可以借用張三的砍樹方法砍自己的樹。在代碼中就是

String.prototype.toString = function() {
    return "shit"; // 所有的String的實例對象的toString方法都被污染了，只會輸出"shit"
};

var str = "hello";

console.log(str.toString()); // "shit"
// 這時候怎么辦呢？
// 我們需要找一個沒被污染的toString方法借來用一用，比如Object（或者Array等除了String的都可以）
console.log(Object.prototype.toString.call(str)); // 輸出正常的"[object String]"

到了這里，相信你對call和apply已經有了一個比較形象的認識了。以后再遇到類似的問題時，不妨想象成現實中的關系，可能困擾許久的問題就豁然開朗了。

call和apply另外一個應用就是函數的柯里化和反柯里化技術，有興趣的可以看下面兩篇文章
Javascript中有趣的反柯里化技術
由JavaScript反柯里化所想到的

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

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

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

理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0
javascript中的call()和apply()的理解

摘要：可能上面的例子不是很常見，但是我們經常見到這樣的代碼你好美女你好美女方法是數組特有的方法，它是定義在構造函數的原型中的方法，所以我們實例化的數組就都繼承了這個方法，但是字符串是沒有方法，但此處我們就借用了數組的方法來處理字符串。 ??在學習javascript的時候，對于call()和apply()的用法總是難以理解，相信很多小伙伴和我又一樣的想法。現在和小伙伴們分享一下。 call ...

UnixAgain 2019-08-21 17:15 評論0 收藏0
理解javascript中apply( ), call( ), bind( )

摘要：，，和都是用來改變函數執行時的上下文也就是說改變的指向問題，是的方法，引入是因為沒有將設置成行參。一般都是庫里面用不推薦自己使用和。和唯一區別是參數不一樣，是的語法糖是返回一個新函數供以后調用，相比其他兩個比較常用。而和是立即調用。 apply()，call()，和bind()都是用來改變函數執行時的上下文也就是說改變this的指向問題，是prototype的方法，引入是因為js沒有將...

LiveVideoStack 2019-08-26 10:27 評論0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：輸出的作用與和一樣，都是可以改變函數運行時上下文，區別是和在調用函數之后會立即執行，而方法調用并改變函數運行時上下文后，返回一個新的函數，供我們需要時再調用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數運行時上下文，最終的返回值是你調用的方法的返回值，若該方法沒有返回值，則返回undefined。這幾個方法...

chaosx110 2019-08-26 12:23 評論0 收藏0
學習JavaScript之this,call,apply

摘要：在全局對象中調用，自然讀取的是全局對象的值構造器調用說明作為構造器調用時，指向返回的這個對象。最直觀的表現就是，去看一些優秀框架的源代碼時，不再是被繞的暈乎乎的。學習起因：在之前的JavaScript學習中，this,call,apply總是讓我感到迷惑，但是他們的運用又非常的廣泛。遂專門花了一天，來弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評論0 收藏0