关于javascript:this的指向性问题可以很简单

  当初曾经 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 windows
inner:[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 永远指向它的左邻调用对象！