###函數(shù)中的apply,call入門

---

??牽扯到apply,call就要先說一下它們和函數(shù)的淵源

Javascript函數(shù)既是也是對象

??它和其它的javascript對象沒有什么區(qū)別。并且每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法 apply()和call(),這兩個(gè)方法都可以間接的調(diào)用函數(shù)

例如:

function f() {console.log(1); } f.call(); //1 f.apply(); //1 復(fù)制代碼

??并且這兩個(gè)方法都允許顯示的指定函數(shù)調(diào)用后的this值。 ??關(guān)于this值,由于this值的是在進(jìn)入執(zhí)行上下文階段被確認(rèn)的，所以this的值讓人琢磨不透。但是我們可以通過apply()和call() 在函數(shù)調(diào)用時(shí)顯示指定所需的this值。

---

###那么apply和call方法到底是用來做什么的呢?

??任何函數(shù)在調(diào)用時(shí)都可以被指定this值，作為this指向的對象的方法來調(diào)用。

那就意味這任何函數(shù)可以被任何對象調(diào)用,這才是apply和call的方法的最終目的。

??讓我們來一個(gè)使用例子來理解

function Animal() {}; Animal.prototype = {constructor: Animal,other: function() {console.log('這是一只' + this.name);} } var animal = new Animal(); //定義一個(gè)對象 var dog = {name: '狗' };//我的dog對象想使用Animal函數(shù)的other方法怎么辦，使用call或apply animal.other.call(dog); animal.other.apply(dog); 復(fù)制代碼

---

??在上面,我們將animal.other(思考一下它是什么,是的，它本質(zhì)上也是一個(gè)函數(shù))作為dog對象的方法調(diào)用。接下來,我們運(yùn)用的實(shí)際一些.

//設(shè)置一個(gè)類數(shù)組對象 var arrLike = {0: '我是apply',1: '我是call',length: 2 }//將Arrar的slice函數(shù)的this顯式指向arrLike,并將0作為參數(shù)傳入slice函數(shù) var newArr = Array.prototype.slice.call(arrLike, 0); //等價(jià)于 arrLike.slice(0); console.log(newArr);復(fù)制代碼

??對于apply()和cal()所有傳入它們的第一個(gè)實(shí)參都會變?yōu)閠his的值，哪怕傳入的實(shí)參是原始值，null,undefined。而如果傳入的第一個(gè)實(shí)參是undefined和null 在ES3和非嚴(yán)格模式下會被全局對象替換掉,而其它的原始值則會被相應(yīng)的包裝對象所替代。

??用通俗一點(diǎn)的話來說，Js根本不在乎apply/call 的第一個(gè)參數(shù)是什么,函數(shù)仍然會被調(diào)用，只不過調(diào)用會不會報(bào)錯是另一碼事.

var str = '我是一個(gè)函數(shù)'; //將字符串傳入,但是String對象無法調(diào)用slice屬性 報(bào)錯 Array.prototype.pop.call(str); 復(fù)制代碼

---

??為了能對這兩個(gè)方法記憶深刻以及何時(shí)用這兩個(gè)方法，列出一些常用的用法

??首先,就現(xiàn)在來說,這兩種方法的性能差異幾乎忽略不記，所以他們之間如何使用呢?

??apply()方法適用于傳入第二個(gè)參數(shù)是有序且參數(shù)不定的就使用apply方法，比如函數(shù)的arguments這個(gè)類數(shù)組對象就很適合作為參數(shù)傳遞。

function A(a, b, c) {console.log(a, b, c); }var fn = (function(func, b, c) {var args = arguments;return () => {func.apply(null, args);} }(A, 66, 99));fn(); 復(fù)制代碼

再比如說給數(shù)組追加元素

var arr1 = [1, 2, 3]; var arr2 = [66, 99, 131]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); 復(fù)制代碼

同樣將arr2數(shù)組作為參數(shù)傳遞。

---

而對于無序,相互之間沒有什么關(guān)聯(lián)的參數(shù),就使用call()

獲取數(shù)組的最大值和最小值

var arr = [0, 1, 2, 3, 4];//獲取最大數(shù) var max1 = Math.max.apply(Math, arr),max2 = Math.max.call(Math, 0, 1, 2, 3, 4),//獲取最小數(shù)min1 = Math.min.apply(Math, arr),min2 = Math.min.call(Math, 0, 1, 2, 3, 4); console.log(max1, max2, min1, min2);復(fù)制代碼

arr本身是沒有Math方法的,但是我們可以用call或者apply使用其方法

---

判斷對象的具體類型

//驗(yàn)證對象的具體類型 var arr = []; var type = Object.prototype.toString.call(arr); console.log(type);// [object Array]復(fù)制代碼

在使用typeof時(shí)得到的結(jié)果都是Object，無法判斷具體是哪一種類型。于是可以用 Object.prototype.toString.call()來獲得具體類型。當(dāng)然，前提是toSting()方法沒有被重寫過

---

將類數(shù)組對象轉(zhuǎn)為真正的數(shù)組，通常我們使用Array.prototype.slice.call() 來轉(zhuǎn)換

var arrLike = {length: 3,0: '值1',1: '值2',2: '值3' } var newArr = [].__proto__.slice.call(arrLike); var type = Object.prototype.toString.call(newArr); console.log(newArr, type); //[ '值1', '值2', '值3' ] '[object Array]' 復(fù)制代碼

當(dāng)然，splice,concat也可以將類數(shù)組對象轉(zhuǎn)數(shù)組.

這里普及一下類數(shù)組對象。 通過索引訪問元素,并且擁有l(wèi)ength屬性 也就是說,需要滿足兩個(gè)條件,1.使用序號定義屬性，2.擁有l(wèi)ength屬性，屬性值為元素個(gè)數(shù) 在使用序號定義屬性時(shí),建議從0開始按順序定義屬性。否則會出現(xiàn)數(shù)組元素為empty的情況

var arrLike = {length: 3,0: '值1',1: '值2',3: '值3' } var newArr = [].__proto__.slice.call(arrLike); var type = Object.prototype.toString.call(newArr); console.log(newArr, type); //[ '值1', '值2', empty] [object Array] 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c9e2679f265da3097285f37

總結(jié)

以上是生活随笔為你收集整理的函数中的apply,call入门介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。