详解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)
})