詳解apply

先談this

關於this的指向就不細說了，網上有無數博客以及you don't kown js這類書講的已經很詳細了這裏就不炒冷飯了。

舉幾個簡單的例子

function foo() {
    console.log(this);
}
    
foo() //window

var obj = {
    job: 'doctor',
    show: function() {
        console.log(this.job); //job
        console.log(this === obj); //true
    }
}
obj.show();

apply的用途

改造一下上面的例子

var obj = {
    job: 'doctor',
}
function foo(str) {
    console.log(this); //obj
    console.log(str);  //hi
}
foo.apply(obj,['hi']);

調用一個函數的方法有不少能夠用函數表達式調用，也能夠直接調用。還有一種方法是用apply調用

apply接受兩個參數，第一個參數是函數運行時指向的this,第二個參數是一個數組裏面存放函數的參數。

也就是咱們能夠手動更改this的指向，再次看上面的代碼咱們讓函數foo中的this指向了obj，還接受了一個字符串'hi'

那麼反過來咱們是否能夠在foo中對obj的屬性進行賦值呢？答案是確定的

再次更改代碼

var obj = {
    job: 'doctor',
}
function foo(str) {
    this.books = ['One Hundred Years of Solitude', 'Gone with the wind']
}
foo.apply(obj,['hi']);
console.log(obj); // {job: "doctor", books: Array(2)}

apply的用處無所不在，好比將nodelist轉爲數組，類型檢測這些網上一樣有不少例子

apply與函數式編程

若是咱們有聲明一個數組並想獲得數組中每個元素的值咱們能夠這麼作

var arr = ['katana', 'chunks', 'shurken'];
for(var i = 0;i<arr.length; i++) { //直接在循環寫arr.length並非一個好習慣
    console.log(arr[i])
}

可是這種聲明式的寫法是否是有些醜陋？讓咱們換一種寫法

function forEach(list, callback) {
    for(var n = 0; n<list.length; n++) {
        callback.call(list[n], n, list[n]);
    }
}
var arr = ['katana', 'chunks', 'shurken'];
forEach(arr, function(index, value) {
    console.log(index);
    console.log(value)
})