理解 this 绑定

this 是什么？如今请不要往下看，告诉本身一个答案，什么是 this？它是一个指针？一个对象仍是一个函数？其实远没有那么复杂！

• this 是什么
• 如何定位 this
• 伪装有总结
• 参考资料

this 是什么

名不正则言不顺。今天咱们来整理下 this 的简单定义！this 是 Javascript 中的一个关键字，它表明了函数调用的上下文。

• 若是包含 this 的函数是被对象做为方法调用的，this 就指向这个调用对象，这个时候能够说， this 是一个对象（默认绑定）
• 若是该函数是直接调用的，那么在严格模式下，this 指向 undefined，非严格模式下 this 指向 window（隐式绑定）
• 若是 this 是经过 new 关键字调用的，也就是经过构造函数调用的，那么 this 指向 new 返回的对象实例（隐式绑定，能够理解为构造函数时一种特殊的函数）
• 若是 this 是经过 apply，call，bind 调用，那么 this 指向调用是绑定的对象（显式绑定）

也就是说，this 并非具体的什么东西。它只有在函数运行的时候才会存在，它存在于运行时的世界中。因此当你看到

function call() {
  /* 这里有不少代码*/
  console.log(this);
  /* 这里有不少代码*/
}
复制代码

这样的代码的时候，this 在这里并无什么意义。咱们应该关注的是在何时 call() 和 如何 call()。如今请简单复习下，当咱们经过下面几种方式调用的时候，this 关键字指向了哪里？

new call();
call();
call.bind(null,);
call.apply(null, []);
复制代码

如何定位 this

关于定位 this，先介绍一个简单粗暴的万金油来讲明如何判断；

1. 是否有点操做符？若是有，左边的就是 this
2. 是否有 call 或者 apply？若是有，第一个逗号传进来的，就是 this
3. 方法是被单独调用的吗？若是是，全局对象上下文，就是 this

经过这三点，咱们能够判断出绝大多数的 this 指向。少部分的就是上面提到的经过构造函数调用的方式。请看下面这个例子：

var p2 = null;
function Person(name) {
  this.name = name;
  this.age = 8;
  console.log(this); // {name: 'todd', age: 8}
  p2 = this;
}

var p1 = new Person('todd');

console.log(p1 === p2) // true
复制代码

咱们看到，当函数（构造函数） Person 经过关键字调用的时候，此时 this 并无指向全局上下文，而是指向 new 操做符返回的对象。经过 p1 === p2 的结果能够证实。this 的判断规则十分简单，只要记住前面提到的三种方法再加上 new 关键字的场景，咱们能够对所有 this 的调用场景作以区分。好比：

var name = "windowsName";

    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            },100 );
        }

    };

    a.func2()     // this.func1 is not a function
复制代码

这道题目的 this，看似花里胡哨。其实咱们只要根据第三点判断就垂手可得。this 的运行时是在一个定时器中，由于它是匿名函数被单独调用，其上下文是全局，因此没有func1 这个方法。因此必然报错。

伪装有总结

没什么好总结的，若是你有更好的建议，请留言讨论吧！

参考资料

1. How to Eyeball Your ‘This’ Context in Javascript
2. this,apply,call,bind