简单快速理解js中的this、call和apply

注:本文案例环境为非严格模式，严格模式下禁止关键字this指向全局对象

1、方法是怎么执行的？

首先说一下js中方法的执行，在window全局下声明一个方法a：

function a () {
  console.log(this);
}
a();//window
复制代码

全局中执行这个方法广泛的方法是直接a()，这个方法的执行环境是window，控制台会打印出window对象。

那么为何会打印出window对象呢？咱们能够这样理解，方法的执行必需要有个直接调用者，刚才那个方法a是定义在window全局下的，window下的变量和方法有个特色就是访问和调用的时候能够省略window！因此刚才执行a() === window.a()，也就是说，执行a方法时的直接调用者是window。！

上面有提到直接调用者，怎么看待这个直接调用者呢？举个例子，声明一个全局对象obj：

var name = "window-name";
var obj = {
    name:"obj-name",
    a:function(){
        console.log(this.name);
    },
    b:{
        name:"b-name",
        a:function(){
            console.log(this.name);
        }
    }
}
obj.a();//obj-name
obj.b.a();//b-name
复制代码

分别执行obj.a();和obj.b.a();控制台会分别打印出obj-name和b-name（这里obj.a() === window.obj.a()，obj.b.a() === window.obj.b.a()），方法执行时的直接调用者就是离这个被调用方法最近的那个对象，两个分别是obj和obj.b，打印出的name分别是obj的name和obj.b的name。

2、this指向了谁？

那么函数里面的this究竟是谁呢？this就是这个方法被调用时的直接调用者。能够再来个特殊的例子，理解这个例子了就能很好理解this指向了谁。在刚才的基础上定义一个全局变量：

var ax = obj.b.a;
ax();//window-name
复制代码

此时执行ax();控制台则会打印出window-name;为何会打印出window-name？这是由于 ax 是定义在window全局下的变量，执行ax()时的直接调用者是window（ax() === window.ax()），因此执行ax()时内部的this就是它的直接调用者window，所以打印出的值就是定义在window下的name的值，因此本文最开始时的a()，执行后会打印window，由于内部的this指向的是a的调用者window。

实际上在非严格模式下，若是方法有直接调用者，那么this指向的是这个直接调用者，在没有直接调用者（好比回调函数）的状况下this指向的是全局对象（浏览器中是window，node中是global）。

3、call和apply改变了什么？

理解了函数的直接调用者和this，再说call和apply就比较容易理解了。 在此对call和apply不作过多的定义性解释，先来看下调用了call后谁是那个被执行的方法，直接代码示例：

function fn1 () {
    console.log(1);
};
function fn2 () {
    console.log(2);
};
fn1.call(fn2);//1
复制代码

执行fn1.call(fn2);控制台会打印1，这里能够说明fn1调用call后被执行的方法仍是fn1。必定要弄清楚谁是这个被执行的方法，就是调用call的函数，而fn2如今的身份是替代window做为fn1的直接调用者，这是理解call和apply的关键，也能够运行下fn2.call(fn1);//2来验证被执行的方法是谁。那么call的做用是什么呢？ 再来个代码示例：

var obj1 = {
    num : 20,
    fn : function(n){
        console.log(this.num+n);
    }
};
var obj2 = {
    num : 15,
    fn : function(n){
        console.log(this.num-n);
    }
};
obj1.fn.call(obj2,10);//25
复制代码

执行obj1.fn.call(obj2,10);控制台会打印25，call在此的做用其实很简单，就是在执行obj1.fn的时候把这个fn的直接调用者由obj1变为obj2，obj1.fn(n)内部的this通过call的做用指向了obj2，因此this.num就是obj2.num，10做为执行obj1.fn时传入的参数，obj2.num是15，所以打印出的值是15+10=25。

因此咱们能够这样理解：call的做用是改变了那个被执行的方法(也就是调用call的那个方法)的直接调用者！而这个被执行的方法内部的this也会从新指向那个新的调用者，就是call方法所接收的第一个obj参数。还有两个特殊状况就是当这个obj参数为null或者undefined的时候，this会指向window。

4、call和apply的区别

call方法除了第一个obj参数外，还接受一串参数做为被执行的方法的参数，apply用法和call相似，只不过除第一个obj参数外，接收的第二个参数是一个数组来做为被执行的方法的参数。

5、延伸拓展

咱们来执行下面的代码：

fn1.call.call(fn2);//2
复制代码

执行fn1.call.call(fn2);控制台会打印出2，先不说为何会打印出2，先来理解下fn1.call.call是什么，call()方法是Function对象原型链上的方法，因此fn1这个函数能够经过原型链继承使用这个方法，也就是说fn1.call === Function.prototype.call === Function.call。因此fn1.call.call(fn2) === Function.call.call(fn2)，能够把Function.call先看作一个总体，用FunCall来表示以下：

FunCall.call(fn2);
复制代码

这样就比较好理解，至关因而fn2做为FunCall的直接调用者来执行FunCall，而FunCall === Function.call，因此就至关因而fn2.call()。

此时call没有传入对象，那么全局对象window就会做为默认对象，也就是至关于fn2.call(window)，再继续解释就是window.fn2.call(window)，把fn2的直接调用对象变成window，因此就至关于直接执行了fn2();控制台会打印出2。

此外还有Function.call.apply和Function.apply.call等多种组合，原理都相似，只不过接收的参数类型不太同样，能够尝试一下。加深对call和apply的理解。

6、补充bind

bind用法和call相似，只不过调用bind后方法不能当即执行须要再次调用，其实就是柯里化的一个语法糖。咱们来实现一个简易版的bind方法，命名为bindFn，大体就能了解bind了：

Function.prototype.bindFn = function() {
    var args = Array.prototype.slice.call(arguments);//获得传入的参数
    var obj = args.shift();//获得第一个传入的对象
    var self = this; // 调用bindFn的函数
    
    return function() { // return一个函数 实现柯里化
        //拼接新参数
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        //下面这里使用了apply,用来改变self的直接调用者
        return self.apply(obj,newArgs);
    }
}
//测试一下，doSum方法实现对传入的参数的累加，并把累加结果返回
function doSum(){
    var arg = Array.prototype.slice.call(arguments);
    return arg.length ? arg.reduce((a,b) => a + b) : "";
}
var newDoSum = doSum.bindFn(null,1,2,3);
console.log(newDoSum());//6
console.log(newDoSum(4));//10
console.log(newDoSum(4,5));//15
复制代码