這篇文章帶給大家的內容是關於函數apply()和call()的詳細介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
函數中的apply,call入門
牽扯到apply,call就要先說一下它們和函數的淵源
Javascript函數既是也是物件
#它和其它的javascript物件沒有什麼區別。並且每個函數都包含兩個非繼承而來的方法apply()和call(),這兩個方法都可以間接的呼叫函數
例如:
function f() { console.log(1); } f.call(); //1 f.apply(); //1
並且這兩個方法都允許顯示的指定函數呼叫後的this值。
關於this值,由於this值的是在進入執行上下文階段被確認的，所以this的值讓人琢磨不透。但是我們可以透過apply()和call() 在函數呼叫時顯示指定所需的this值。
那麼apply和call方法到底是用來做什麼的呢?
任何函數在呼叫時都可以被指定this值，作為this指向的物件的方法來呼叫。
那就意味著這任何函數可以被任何物件呼叫,這才是apply和call的方法的最終目的。
讓我們來一個使用例子來理解
function Animal() {}; Animal.prototype = { constructor: Animal, other: function() { console.log('这是一只' + this.name); } } var animal = new Animal(); //定义一个对象 var dog = { name: '狗' }; //我的dog对象想使用Animal函数的other方法怎么办，使用call或apply animal.other.call(dog); animal.other.apply(dog);
在上面,我們將animal.other(思考一下它是什麼,是的，它本質上也是一個函數)作為dog對象的方法調用。接下來,我們運用的實際一些.
//设置一个类数组对象 var arrLike = { 0: '我是apply', 1: '我是call', length: 2 } //将Arrar的slice函数的this显式指向arrLike,并将0作为参数传入slice函数 var newArr = Array.prototype.slice.call(arrLike, 0); //等价于 arrLike.slice(0); console.log(newArr);
對於apply()和cal()所有傳入它們的第一個實參都會變為this的值，即使傳入的實參是原始值，null,undefined。而如果傳入的第一個實參是undefined和null 在ES3和非嚴格模式下會被全域物件替換掉,而其它的原始值則會被對應的包裝物件取代。
用通俗一點的話來說，Js根本不在乎apply/call 的第一個參數是什麼,函數仍然會被調用，只不過調用會不會報錯是另一碼事.
var str = '我是一个函数'; //将字符串传入,但是String对象无法调用slice属性 报错 Array.prototype.pop.call(str);
為了能對這兩個方法記憶深刻以及何時用這兩個方法，列出一些常用的用法
#首先,就現在來說,這兩種方法的性能差異幾乎忽略不記，所以他們之間如何使用呢?
apply()方法適用於傳入第二個參數是有序且參數不定的就使用apply方法，例如函數的arguments這個類別數組物件就很適合作為參數傳遞。
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();
再比如說給陣列追加元素
var arr1 = [1, 2, 3]; var arr2 = [66, 99, 131]; Array.prototype.push.apply(arr1, arr2); console.log(arr1);
同樣將arr2陣列當作參數傳遞。
而對於無序,相互之間沒有什麼關聯的參數,就使用call()
#取得數組的最大值和最小值
var arr = [0, 1, 2, 3, 4]; //获取最大数 var max1 = Math.max.apply(Math, arr), max2 = Math.max.call(Math, 0, 1, 2, 3, 4), //获取最小数 min1 = Math.min.apply(Math, arr), min2 = Math.min.call(Math, 0, 1, 2, 3, 4); console.log(max1, max2, min1, min2);
arr本身是沒有Math方法的,但是我們可以用call或apply使用其方法
#判斷物件的具體類型
//验证对象的具体类型 var arr = []; var type = Object.prototype.toString.call(arr); console.log(type);// [object Array]
在使用typeof時得到的結果都是Object，無法判斷具體是哪一種類型。於是可以用 Object.prototype.toString.call()來得到具體型別。當然，前提是toSting()方法沒有被重寫過
將類別數組物件轉為真正的陣列，通常我們使用Array.prototype.slice.call() 來轉換
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]'
當然，splice,concat也可以將類別數組物件轉換成數組.
這裡普及一下類別數組物件。
透過索引存取元素,並且擁有length屬性
也就是說,需要滿足兩個條件,1.使用序號定義屬性，2.擁有length屬性，屬性值為元素個數
在使用序號定義屬性時,建議從0開始依序定義屬性。否則會出現陣列元素為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]
這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！
#以上是函數apply()和call()的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
