深入淺出JavaScript之call()、apply()方法

Cympros 發布于2019-08-20 14:16 / 1085人閱讀

摘要：的作用在中，方法和方法都是為了改變函數運行時上下文而存在的，換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤，如有錯誤我會及時改正。

寫在前面：

隔了很長時間了，也不知道寫點什么。最近一直在研究ES6，一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。

call、apply的作用

在JavaScript中，call()方法和apply()方法都是為了改變函數運行時上下文而存在的，換句話說：就是為了改變函數體內部 this 的指向。
在JavaScript中，也可以說再OOP JavaScript思想編程中，其實最繞的地方就是：函數被定義時的上下文、運行時的上下文、上下文的改變。

我們先來定義一個構造函數(constructor)然后改變指向：

function Fn() {}

Fn.prototype = {
    color:"red",
    say:function () {
        alert(this.color);
    }
};

var fn = new Fn();
fn.say();       //返回red

這是一個很普通的構造函數，給原型new了一個新的對象，然后添加一個屬性和方法。那么我們如果要再創建一個對象呢，不想給這個新的對象添加方法怎么去公用上面這個方法呢？

 var Fn1 = {
    color:"yellow"
};

var fn = new Fn();
fn.say.call(Fn1);    //使用call()方法返回yellow
fn.say.apply(Fn1);   //使用apply()方法返回yellow

所以，可以看出 call()和 apply()是為了動態改變 this 而出現的，當一個對象(Object)沒有這個方法，但是其他的Fn原型里面有這個方法，我們可以借助call或apply用其它對象的方法來操作。
大家是不是感覺這個call()和apply()沒什么差距對吧？

call()方法與apply()方法的差別

對于使用者而言，call與apply的作用完全一樣，不過它們接受的參數不一樣：
call()方法中的其余的參數必須直接傳給函數
apply()接收兩個參數：一個參數是在其中運行的作用域,另一個是參數數組(可以是Array實例,也可以是arguments對象).
也可以理解為其實call傳參為固定的必須知道你有多少個參數傳進去，而apply可以傳一個數組。

當明確知道傳參數量時使用call()而不確定的時候使用apply()方法然后把參數push進數組傳遞進去，函數內部也可以通過 arguments 這個數組來遍歷所有的參數。

深入理解call與apply

function box(msg)　{
    alert(msg);
}
box(1); //1
box(1,2); //1

上面的這個函數就是沒有確定實參數量，這個時候就可以考慮使用call或者apply，剛剛講過，只有apply在不確定的數量的時候使用最佳。

function?box(){
?console.log.apply(console,arguments);
};
box(1);?//1
box(1,2);?//1 2

這一章差不多就講完了，其實要點沒多少知識點，主要就是充分掌握了技巧與思想，JavaScript就會變的很容易。歡迎前端大牛糾正錯誤，如有錯誤我會及時改正。謝謝~

(PS:其實一直不知道寫什么，所以這么長時間沒更新，如果大家想看JS哪些方面的，在我了解與掌握的前提下還是可以寫一寫的。我的郵箱:cn_brian@163.com)

云服務器 GPU云服務器 apply與call的區別 js中的call和apply JS中bind、call和apply的作 apply()方法

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

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

JavaScript深入之call和apply的模擬實現

摘要：深入系列第十篇，通過和的模擬實現，帶你揭開和改變的真相一句話介紹方法在使用一個指定的值和若干個指定的參數值的前提下調用某個函數或方法。如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。 JavaScript深入系列第十篇，通過call和apply的模擬實現，帶你揭開call和apply改變this的真相 call 一句話介紹 call： call() 方法在使用一個指定的 this...

miya 2019-08-22 11:03 評論0 收藏0
JavaScript深入之bind的模擬實現

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

FingerLiu 2019-08-20 16:15 評論0 收藏0
深入JavaScript之call和apply方法

摘要：難兄難弟我是里的方法，我和方法是難兄難弟。有些地方沒有咱倆還真不行。我可以改變被調用方法內部的指向指向第一個參數。這個時候我方法就無能為力了，只能讓幫你了也可以使用運算符最后我們這對難兄難弟其實一點也不難啊難兄難弟我是js里的call方法，我和apply方法是難兄難弟。為什么這么說呢，因為很多前端小白看到咱倆就犯怵: WTF！這是什么方法，根本看不懂?。∪缓笕ス雀枞グ俣?，回來還是：...

joywek 2019-08-21 17:14 評論0 收藏0
JavaScript 深入之 call 和 apply 的模擬實現

摘要：第一版首先要獲取調用的函數，用可以獲取的指向為，因為是的實例相當于把掛載到上，所以可以取到測試一下但是第一版不可以傳遞多個參數第二版這里會自動調用這個方法。 // 第一版 Function.prototype.call2 = function(context) { // 首先要獲取調用call的函數，用this可以獲取 // this的指向為bar，因為bar是Func...

邱勇 2019-08-23 14:05 評論0 收藏0
JavaScript深入之new的模擬實現

摘要：深入系列第十二篇，通過的模擬實現，帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂，我們在模擬之前，先看看實現了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現，帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...

tianlai 2019-08-20 16:17 評論0 收藏0