当初曾经1202年了，大家大多都富裕，可能用上ES6新特新了，所以对于this的指向问题也没有ES5期间关注了；再者，个别的开发过程中对于函数或者作用域的层级也没有嵌套太深，所以也不常遇到因为this指向不明产生的谬误。常在河边走哪能不沾水，接触的我的项目多了，难免会遇到一些老代码，最好可能理解一下this的指向；再退一步说，面试中this指向可是避不开的点！然而，看到这篇文章只须要记住一句话就能解决所有this指向问题——this永远指向它的左邻调用对象！

一、单层嵌套this指向

//浏览器环境var name = "outer windows";function a() {    var name = "inner function";    console.log(this.name);     console.log("inner:" + this);}a();console.log("outer:" + this)

输入后果为：

outer windowsinner:[object Window]outer:[object Window]

  察看后果，在函数a中即便定义了name变量，输入this.name时显示的是外层定义赋值的outer windows，从这里咱们不难看出此时函数a中的this实际上是代表了外层的作用域（该实例中也就是顶层作用域window）；顺次在函数外部和外层对this输入，指向同一个对象 window。
  回过头再看开篇的一句话：this永远指向它的左邻调用对象！；该实例代码中函数a在哪里调用，它的左邻又是什么对象呢？咱们对代码进行简略转化：

//浏览器环境var name = "outer windows";function a() {    var name = "inner function";    console.log(this.name);     console.log("inner:" + this);}//a()调用变形this.a(); // 等价于Window.a()console.log("outer:" + this)

留神：后面没有调用的对象那么能够默认就是全局对象 this/window，这就相当于是 this/window.a()；

二、多层嵌套this指向

1、模式一

//浏览器环境var name = "outer windows";var a = {    name: "1 inner function",    fn : function () {        var name = "2 inner function"        console.log(this.name);     }}a.fn();

输入后果为：

1 inner function

  这个后果和你设想的是不是一样的呢？如果你也是这个答案，那么你对this永远指向它的左邻调用对象这句话应该是有了肯定了解！同样，咱们对上述实例进行解析：最初的函数调用为a.fun()变形后等价于window.a.fn()，函数fn的最左调用对象为对象a，所以函数fn中的this指向其最左的对象a，故this.name为对象a的name属性值。

2、模式二

//浏览器环境var name = "outer windows";var a = {    name: "1 inner function",    fn : function () {        var name = "2 inner function"        console.log(this.name);     }}var b = a.fn;b();

输入后果为：

outer windows

  小朋友，你是不是有好多问好？？？相较于模式一，该实例中要辨别下变量赋值和函数执行两个概念！剖析该实例代码：var b = a.fn; 理论执行的操作是申明全局变量b，并对b进行赋值，赋值为a.fn，也就是说此时b的值实际上是指向

function () {    var name = "2 inner function"    console.log(this.name); }

当代码执行到b()时才是对上述函数进行了调用执行，同样咱们对代码进行补充残缺：this/window.b()，this永远指向它的左邻调用对象，此处指向的就是window，其name的属性值为outer windows；为了验证b的理论值，咱们无妨对其进行输入：console.log(b):

3、模式三

//浏览器环境var name = "outer windows";function fn() {    var name = '2 inner function';    a();    function a() {        var name = "2 inner function"        console.log(this.name);     }}fn()

输入后果为：

outer windows

  看完模式一和模式二是不是感觉依据this永远指向它的左邻调用对象，本人对this指向曾经一目了然了！然而看到模式三的例子是不是又有点迷糊！其实所有都离不开this永远指向它的左邻调用对象这句话；对上述代码进行剖析：fn() 等价于this/window.fn()所以此时fn中的this指代的是window，在函数fn中又立刻调用执行了其作用域中定义的函数a，此时a中的this指向函数fn，后面提到fn的this其实是指向window；所以a中的this其实是指向window的，能够简化为伪代码window.fn().a()，合乎this永远指向它的左邻调用对象！

模式四

//浏览器环境var name = "outer windows";function a() {       var name = "2 inner function"       console.log(this.name);    }function fn() {    var name = '2 inner function';    a();}fn()

输入后果为：

outer windows

对于模式四大家能够本人进行剖析下！

三、总结

  无论代码中有多少层的且套，咱们都能够使用this永远指向它的左邻调用对象进行剖析失去正确的this指向！最初再重申：this永远指向它的左邻调用对象 ！this永远指向它的左邻调用对象！this永远指向它的左邻调用对象！