前端學習筆記之js中apply()和call()方法詳解

moven_j 發布于2019-08-20 16:20 / 1197人閱讀

摘要：第二行將函數的指向一個字符串第三行將函數的指向一個數字以此類推。再舉一個例子實現對象繼承繼承了的屬性和方法陳安東男姓名年齡性別輸出姓名陳安東年齡性別男這樣用就實現了繼承用也類似

這里排版不是太好，詳情看我的簡書

經過網上的大量搜索，漸漸明白了apply()和call方法的使用，為此寫一篇文章記錄一下。

定義

apply()方法：

Function.apply(obj,args)
obj：這個對象將代替Function類里this對象

args：這個是數組，它將作為參數傳給Function(args-->arguments）

call()方法：

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：這個對象將代替Function類里this對象

params：這個是一個參數列表

相同點與不同點

相同點

作用是一樣的，call 和 apply 都是為了改變函數體內部 this 的指向，也就是把Function(即this)綁定到obj，這時候obj具備了Function的屬性和方法，說白一點就是obj繼承了Function的屬性和方法。

不同點

相信大家也已經發現了，他們唯一區別就是接受參數的方式不太一樣，apply接受的是數組參數，call接受的是連續參數。

方法使用

我們來看下面一個例子：

定義一個函數mul

function mul(a,b){
    return this+(a*b);
}

接著我們在控制臺上打印出

console.log(mul.call(null,2,3));
console.log(mul.call("s",2,3));
console.log(mul.call(3,2,3));
console.log(mul.apply(null,[2,5]));
console.log(mul.apply(2,[2,5]));

分別為：

[object Window]6
s6
9
[object Window]10
12

可能你會發現到，第一行 console.log(mul.call(null,2,3)) 沒什么變化，call()的第一個參數就是改變的 this 指向，如果為 null 則函數的 this 不變，注意，如果在嚴格模式下（函數體或全局的開頭有這句話："use strict"），this 會變成 null。如果函數本身有參數，則從 call 的第二個參數開始寫起。
第二行 console.log(mul.call("s",2,3)) 將函數的 this 指向一個字符串 "s". ===>> "s"+2 * 3=s6
第三行 console.log(mul.call(3,2,3)) 將函數的this指向一個數字3

 ===>>   3+2 * 3=9

以此類推。

再舉一個例子

學js的都知道 Math.max() 方法,比如有三個參數2,3,4那么我們要找出最大值可以這么寫 Math.max(2,3,4) 那要是有 100 個或更多參數呢？這時候就可以結合 apply 和數組輕松實現了。

比如定義一個數組

var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];

接著我們打印出

console.log(Math.max.apply(null,arr));

這樣一來就很簡潔明了。

再舉一個例子實現對象繼承

function Person(name,age) {
    this.name=name;
    this.age=age;
}

var Student=function(name,age,gender) {
    Person.call(this,name,age);//this繼承了person的屬性和方法
    this.gender=gender;
}
var student=new Student("陳安東", 20, "男");
alert("姓名:"+student.name+"
"+"年齡:"+student.age+"
"+"性別:"+student.gender);

輸出

姓名:陳安東
年齡:20
性別:男

這樣用call就實現了繼承（用apply也類似）

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

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

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

javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0