一、this

js中给我们提供了apply和call，这两个东西都可以改变上下文指向，请看这个例子：

  var name = "周小绉";
  var obj = {
    name: "陈小晨"
  };
  function getInfo(age, year) {
    return this.name + " " + age + ' ' + year;
  }
  console.log(getInfo.apply(this, [19, '2019']));
  console.log(getInfo.call(obj, 18, '2018'));

顺便来复习一下apply和call的用法，这两个本质上没什么差。前者所加的参数是一个一个传，后者则是通过数组传递。当第一个参数传入为obj，getInfo中this.name自然就去找obj的了。

从这段代码可以看出：指定了上下文，可以隐式传递一个对象的引用，可以让API设计得更加简洁并且易于复用。

还有一个东西可以设置this的指向，那就是bind，绑定方式如下，与上面两个的区别是，这种方式不会立即执行函数，而且可以提前设置传入的参数。

func().bind(this， param1)

那么this是如何工作的呢？

误解一：this指向函数自身
举个栗子：

  function foo(num) {
    console.log(num);
    this.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo(i);
  }
  console.log('count=' + foo.count);  // ->>> 0
  console.log('globalCount=' + count);     // ->>> NaN

运行之后我们发现在foo函数中分别打印了0,1,2,3,4,按我们“预期”的结果，应该要打印出count = 5，结果遗憾的是0。

事实上当执行foo.count = 0时，函数对象确实被添加了一个count属性，但是函数中的this.count跟这个count并不是同一个。其实是创建了一个全局变量count，值为NaN。

解决方法1：

要从函数对象内部引用它自身，使用this是不够的。如果是具名函数，则可以使用函数名来指向，如下面代码所示。

  function foo(num) {
    console.log(num);
    foo.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo(i);
  }
  console.log('count=' + foo.count);  // ->>> 5

解决方法2：

上面那种完全就没有用到this了，并且完全依赖于变量foo的词法作用域，那么接下来就强行使用this一波，然而看起来和上面没差。

  function foo(num) {
    console.log(num);
    this.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo.call(foo, i)
  }
  console.log('count=' + foo.count);  // ->>> 5

误解二：this指向函数的作用域

  // (1)
  // var a = 1
  function foo() {
    var a = 2;
    console.log(bar())
  }
  function bar() {
    // (2) 
    //var a = 3
    return this.a;
  }
  foo(); // ->>> undefined

此处视图使用this.a去访问foo的a，但是无法将作用域连接起来。此处this还无法引用作用域内部的东西。去掉（2）处的注释也无济于事，如果再去掉(1)的注释，打印出来的是1，可以知道此时的this指向调用这个函数的对象，我们在window中调用foo，显然this指向了window。

正解：

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包 含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性，会在函数执行的过程中用到。

（1）this的指向在函数创建的时候还无法确定，只有在调用的时候才能确定。

（2）当this没有被上一级的对象所调用，this就指向window ，否则就是上一级对象

二、this解析

我在网上寻觅this详解的时候，发现了一篇16W+阅读量的博客，讲了很多案例，挺不错的，在此分享一下。

我们知道this是在调用时候绑定的，而且取决于函数的调用位置，调用栈的例子：

function f1() {
    f2() // 调用栈：f1
}
function f2() {
    f1() // 调用栈：f1 -> f2
}
function f3() {
    f2() // 调用栈：f1 -> f2 -> f3
}

2.1绑定规则

① 默认绑定

var name = 'a';
function foo() {
    // "use strict";
    var name = "b";
    console.log(this.name); //a
    console.log(this); //Window
}
foo();

this默认绑定为window，我们在全局作用域下调用了foo，找不到指向，默认就是window。需要注意的是：如果开启严格模式，this.name打印的将是undefined。但是严格模式与foo调用的位置无关,还是默认绑定到Window

var name = 'a';
function foo() {
    console.log(this.name); // a
    console.log(this); //Window
}
(function() {
    "use strict"; // 严格模式设置在foo函数之外
    foo()
})()

② 隐式绑定

判断调用的位置是否有上下文对象

  var name = 'a'
  function foo() {
    console.log(this.name); 
  }
  var obj = {
    name: 'b',
    foo: foo
  }
  obj.foo()  // b
  foo()     // a

foo函数本质是不属于obj对象的，而是在obj中作为引用属性。但是当通过obj间接调用foo时，this的指向就发生了变化，此时this就绑定到了obj。如果是直接调用，毋庸置疑，this指向的是全局的。

如果有多层的引用，那么this指向的就是最近的一层，毕竟远水救不了近火：

  function foo() {
    console.log(this.name);
  }
  var obj = {
    name: 'b',
    foo: foo
  }
  var obj2 = {
    name: 'c',
    obj: obj
  }
  obj2.obj.foo()  // b

但是也会出现一种情况，间接引用的时候，很可能会被绑定到全局中

var name = "a";
function foo() {
    console.log(this.name);
}
var obj = {
    name: "b",
    foo: foo
};
var bar = obj.foo;
bar(); // a

上面的var bar = obj.foo引用的是foo函数的本身，不带任何修饰，所以调用bar时候，应该采用默认绑定的方式，即this指向全局（非严格模式）或者undefined（严格模式）。还有一种函数传参的方式也是一样的：

var name = "a";
function foo() {
    console.log(this.name);
}
var obj = {
    name: 'b',
    foo: foo
}
function doAction(func) {
    func()
}
doAction(obj.foo)

doAction传参时候，我们知道会有一个赋值操作，即 func = obj.foo，所以和上面一样，如果把函数传入内置函数，比如setTimeOut，还是一样的，没啥区别。

③ 显示绑定

改变this指向，在文章开头的时候就提到过了，apply和call都可以实现

• 硬绑定

我们可以理解为硬要绑定，强制绑定，如下例子：

var name = "a";
var obj = { name: "b" };
function foo() {
    console.log(this.name);
}
var bar = function() {
    foo.call(obj);
};
bar(); //b
setTimeout(bar, 100); //b
bar.call(window);  //b

bar函数内部为foo强制绑定了this得指向，即obj。不管如何调用bar，到最后都要经过这一步的操作，所以this指向无法得到修改，一直都是指向obj。

应用场景：

通过指定this的指向，包裹函数，传入参数进行操作，或者可以使用辅助函数

function foo(sth) { 
    return this.age + sth; 
}
var obj = { age:2 };
var bar = function() {
    return foo.apply( obj, arguments ); // 第二个参数是所有参数的数组
};
var b = bar( 3 ); 
console.log( b ); // 5

• API调用的

一些第三方库，可以支持上下文的参数，确保回调函数使用我们指定的this

function foo(el) { 
    console.log( el, this.name ); 
}
var obj = { name: "guoguo" };
[1, 2, 3].forEach( foo, obj ); 
// 1 guoguo 2 guoguo 3 guoguo

数组中每个元素都会被当作foo的一个参数，逐个调用，并且在forEach的第二个参数中指定了this的指向

④new绑定

当我们使用new来调用对象函数时，会复制一份里面所有用this点的属性到新的对象中，因此新的对象就可以访问属性了

function foo(a) {
    var b = a + 1;
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a, bar.b); // 2, undefined

注意点：

当this遇到了return，如果返回的是一个对象，那么this就是指向那个对象，否则还是原来的。返回undefined也不会改变指向。但是有一个特殊情况：null虽然是对象，但是还是指向原来的。

function foo(a){
    this.a = a
    return {} // undefined
    // return function(){} undefined
    // return null 1
    // return undefined 1
}
var func = new foo(1)
console.log(func.a)

2.2 优先级

一般情况下的判断方式：

① new 绑定的，this 绑定新创建的对象。

var bar = new foo()

② call、apply显式绑定或者硬绑定调用的，this绑定指定的对象。

var bar = foo.call(obj)

③ 隐式绑定的，this 绑定上下文对象。

var bar = obj1.foo()

④ 如果都不是的话，选择优先级最低，默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到

全局对象。

var bar = foo()

这是是一些例外：

①当把null, undefined作为this的绑定对象传入call，apply，bind，实际应用的是默认的绑定规则

②当遇上间接引用的时候，调用这个函数会应用默认绑定规则

function foo() { 
console.log( this.a );
} 
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 }; 
o.foo(); // 3 隐式绑定
(p.foo = o.foo)(); // 2 使用全局的

③ 我们提到的使用硬绑定，将this强制绑定到指定的对象，但是会大大降低函数的灵活性，因为用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this，我们可以给默认绑定指定一个自定义的指向。

软绑定就出现了：

(以下代码均出自《你不知道的JavaScript》)

// 默认绑定obj
if (!Function.prototype.softBind) { 
    Function.prototype.softBind = function(obj) { 
        var fn = this; // 捕获所有 curried 参数
        var curried = [].slice.call( arguments, 1 );
        var bound = function() {
            return fn.apply( (!this || this === (window || global)) ? obj : this
                curried.concat.apply( curried, arguments)); 
        };
        bound.prototype = Object.create(fn.prototype);
        return bound; 
    };
}

function foo() { 
    console.log(this.name); 
}
var obj = { name: "obj" }, obj2 = { name: "obj2" }, obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj ); 
fooOBJ(); // obj 
obj2.foo = foo.softBind(obj); 
obj2.foo(); // obj2 
fooOBJ.call( obj3 ); // obj3 
setTimeout( obj2.foo, 10 ); 
// obj 

④ 当this遇上了箭头函数

function foo() { 
    return (a) => { 
        console.log( this.a ); 
    };
}
var obj1 = { a:2 };
var obj2 = { a:3 };
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2

分析：foo函数内部的箭头函数会保留调用foo时候的this指向，此处则为obj1，而且指向无法被修改，所以就算硬绑定了obj2也没用。