函數中的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]