| JavaScript, this

关于this常用的场景总结

关于this指向问题是初学者最头疼的一件事情，但是没有关系，接下来我会总结在学习或者工作中常用的几个例子。

  1. 全局执行上下文的this是指向window的；
    举一个例子，在全局上打印this：
    1
    console.log(this); // window
  2. 函数执行上下文的this需要看函数调用的时候，而不是看函数定义的时候，因为函数调用的时候才会形成执行上下文，形成执行上下文的时候，会有一个属性叫this；（关于执行上下文到时候我会专门写一篇文章来介绍）；
    举一个例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function test(){
            console.log(this);
        }
        let obj = {
            test
        };
        // 注意需要看函数调用，而不是函数的定义，下面执行test函数的时候是obj来调用的，因此this是执行obj的
        // 如果是看函数的定义的话，那么此时打印出来的this应该是指向window的
        obj.test();  // obj
  3. 函数自己执行的时候，非严格模式this指向的是window，而严格模式下this是指向undefined的；
    下面举一个例子：
    非严格模式下：
    1
    2
    3
    4
    5
    // 非严格模式下
        function test(){
            console.log(this);
        }
        test(); // window
    严格模式下：
    1
    2
    3
    4
    5
    6
    // 严格模式下
        "use strict";
        function test(){
            console.log(this);
        }
        test(); // undefined
  4. 函数被对象调用的时候this指向最后一层调用它的对象；
    举一个例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function test(){
            console.log(this);
            console.log(this.a);  // 由于是指向obj1的，由于obj1下面没有a的值，因此打印出来a的值为undefined
        }
        let obj = {
            a: 111,
            obj1: {
                test
            }
        };
        obj.obj1.test();  // obj1
  5. 函数通过call、apply、bind来改变this的指向；
    举一个例子，在这里我随便举了一个call的例子，apply、bind和它是类似的：
    1
    2
    3
    4
    5
    6
    7
    function test(){
            console.log(this);
        }
        let obj = {
            a: 111
        };
        test.call(obj);  // obj
  6. 作为构造函数调用，通过new一个对象时，this是指向当前实例的；
    举一个例子：
    1
    2
    3
    4
    function Constructor(){ // 构造函数
            console.log(this);
        }
        new Constructor();  // Constructor {}；即Constructor对象、Constructor实例
  7. 箭头函数是没有this指向的，它是借助父级作用域即词法作用域（在这里需要注意的是所谓的词法作用域是定义函数的时候）的this。
    举一个例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function parent(){
            console.log(this);  // obj；父级作用域的this指向obj
            let child = () => {
                console.log(this);  // 借助父级作用域的this
            };
            child();
        }
        let obj = {
            parent
        };
        obj.parent();  // obj

上面总结的7点是我们在开发中常遇到的几种，其实最初设计this的时候就不是拿来让我们可以理解的，因为有我们几乎没有见过的用法，我举个例子：

1
2
3
4
5
6
7
8
9
10
function test(){
            console.log(this);
        }
        let obj = {
            test
        };
        // 如果你的解释是obj.test相当于一个函数，然后最后自执行的话，this就是指向window的
        (false || obj.test)();   // window
        // 那么接下来你再来看看这个怎么解释呢?
        (obj.test)();  // obj

其实你也不用纠结这么多，只需要把上面7点总结的理解好了，基本上在学习工作或者面试的时候就没有什么问题了。

如果你还想更深入的了解this问题的话，我再附上一个链接：https://www.cnblogs.com/TomXu/archive/2012/01/12/2310479.html