學習 apply 和 call

gclove 發布于2019-08-21 14:42 / 1030人閱讀

摘要：官方描述方法在指定值和參數參數以數組或類數組對象的形式存在的情況下調用某個函數。兩者基本一致，只有一個區別，就是方法接受的是若干個參數的列表，而方法接受的是一個包含多個參數的數組。

Function.prototype.apply() & Function.prototype.call() 官方描述

apply() 方法在指定 this 值和參數（參數以數組或類數組對象的形式存在）的情況下調用某個函數。fun.apply(thisArg[, argsArray])

call() 方法在使用一個指定的this值和若干個指定的參數值的前提下調用某個函數或方法。fun.call(thisArg[, arg1[, arg2[, ...]]])

兩者基本一致，只有一個區別，就是call()方法接受的是若干個參數的列表，而apply()方法接受的是一個包含多個參數的數組。

注意點
thisArg: 在 fun 函數運行時指定的 this 值。需要注意的是，指定的 this 值并不一定是該函數執行時真正的 this 值，如果這個函數處于非嚴格模式下，則指定為 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象，說明thisArg可以不傳），同時值為原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象(Number,String,Boolean)。

溫故

以call為例，apply把后面參數轉化成數組格式即可

在調用一個存在的函數時，為其指定一個全新的 this 對象（原函數的this對象此次調用被覆蓋），并且可以傳遞參數，

function test(a) {
    console.log(this.one);
    console.log(a)
}
test.call({one:1},2)
//  1
//  2
//我們在test函數執行的時候綁定一個對象 {one:1} 和參數 2

調用父構造函數，實現繼承

function a(a) {
    this.a = a
}
function b(b) {
    this.b = b
}
//想要創建一個實例對象擁有a和b里面的屬性
function c(a,b){
    //相當于a，b函數執行了一次,所以屬性會被創建
    a.call(this,a)
    b.call(this,b)
}
//效果等同于
function c(a,b){
    this.a = a;
    this.b = b
}
var d = new c(1,2);
d會同時用于a,b的屬性，這樣在涉及到很多屬性繼承時候就很方便
//c {a: 1, b: 1}

使用call方法調用匿名函數，引用官方示例，其實和1類似

    var animals = [
      {species: "Lion", name: "King"},
      {species: "Whale", name: "Fail"}
    ];
    
    for (var i = 0; i < animals.length; i++) {
      (function (i) { 
        this.print = function () { 
          console.log("#" + i  + " " + this.species + ": " + this.name); 
        } 
        this.print();
      }).call(animals[i], i);
    }
    // #0 Lion: King
    // #1 Whale: Fail

知新（for me）

由于call方法需要窮舉所有需要傳遞的參數，所以只能在已知參數的情況下使用，apply則零活很多，但是接收參數的情況是一樣的，apply可以將數組形式默認轉化成一個參數列表參數[a,b,c]會以(a,b,c)的形式接收。
舉例來說：

//比較一組數據大小
 Math.max(9,2,4,6,7) // 9
 Math.max([9,2,4,6,7]) // NaN
//因為Math.max 方法不能接收一個數組 ,所以我們可以進行遍歷
var arr = [9,2,4,6,7],arr_len = arr.length,maxNumber = arr[0];
for(var i = 1 ;i< arr_len ;i++){
maxNumber = Math.max(maxNumber,arr[i])
}
maxNumber // 9
//這樣能夠達到效果，但是可以有更方便高效的方法：用apply進行改造
 Math.max.apply(null,[9,2,4,6,7]) //9 
//經過apply轉化，Math.max此次執行的時候真正接收的參數是  (9,2,4,6,7)
//所以類似這種本來需要寫成遍歷數組變量的任務 ，都可以用apply執行，Array.prototype.push也是

還有個 bind方法和這兩個很類似，可以參考另一篇內容，詳細說了bind方法
javascript原生一步步實現bind分析

以上是個人理解，如果有誤，感謝指導！

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

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

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

學習JavaScript之this,call,apply

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

wenhai.he 2019-08-19 17:30 評論0 收藏0
前端學習筆記之js中apply()和call()方法詳解

摘要：第二行將函數的指向一個字符串第三行將函數的指向一個數字以此類推。再舉一個例子實現對象繼承繼承了的屬性和方法陳安東男姓名年齡性別輸出姓名陳安東年齡性別男這樣用就實現了繼承用也類似這里排版不是太好，詳情看我的簡書經過網上的大量搜索，漸漸明白了apply()和call方法的使用，為此寫一篇文章記錄一下。定義 apply()方法： Function.apply(obj,args)obj：...

moven_j 2019-08-20 16:20 評論0 收藏0
JS學習筆記 - 代碼復用

摘要：本文章記錄本人在學習中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。但是在開發的過程中，并不是所有的代碼復用都會使用到繼承。而且整個代碼都無法按照預期來運行。為了修復綁定對象與方法之間的關系。本文章記錄本人在學習 JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。 js 中復用代碼說道代碼復用，一般都會涉及到對...

cheng10 2019-08-21 10:35 評論0 收藏0
Javascript中this與閉包學習筆記

摘要：但是在調用函數值執行之后并沒有達到我們想要的效果。解析在這里我們為每一個的事件綁定了一個匿名函數，這個匿名函數就形成了一個閉包。這樣我們就為每個的事件的匿名函數，都保存下了自己閉包變量。博客原址理解 Javascript中的this 基于不同的調用方式this的指向也會有所不同，調用方式大致有如下幾種：調用方式表達式構造函數調用 new Foo(); 對象方法...

pinecone 2019-08-22 10:34 評論0 收藏0
深入淺出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是為了改變函數運行時上下文而存在的，換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤，如有錯誤我會及時改正。寫在前面：隔了很長時間了，也不知道寫點什么。最近一直在研究ES6，一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是為了...

Cympros 2019-08-20 14:16 評論0 收藏0