执行上下文之 this——JavaScript

this 是执行上下文中的一个重要属性，是一个与执行上下文相关的特殊对象，可以看作是一个另类的上下文对象。

this 在标准函数中，引用的是把函数当成方法调用的上下文对象。

而在箭头函数中，this 引用的是定义箭头函数的上下文。

一般情况下，this 的绑定要到函数调用时才确定，下面是4种常见绑定规则：

1.作为一般函数执行时，this 绑定到全局对象（非严格模式下），严格模式下 this 会绑定到 undefined。

var a = "global";

function foo() {
    var a = "foo";
    console.log(this.a);
}

foo()    //global

var a = "global";

function foo() {
    "use strict"
    var a = "foo";
    console.log(this.a);
}

foo()    //Uncaught TypeError: Cannot read property 'a' of undefined

---

2.作为对象方法执行时，this 绑定到上级对象

var a = "global";

let obj = {
    a: "obj",
    foo: function() {
        console.log(this.a);
    }
};

obj.foo();    //obj

不过要注意函数嵌套导致的 this 绑定变化的情况，例如：

var a = "global";

let obj = {
    a: "obj",
    foo: function() {
        function inner() {
            console.log(this.a);
        }
        inner();  
    }
};

obj.foo();    //global

注意：如果嵌套函数作为方法（method）调用，其 this 指向调用它的对象，如果作为函数（function）调用，其 this 不是指向全局对象（非严格模式下）就是 undefined（严格模式）。

上面的例子最常用的解决方法就是加一行：var that = this;。

var a = "global";

let obj = {
    a: "obj",
    foo: function() {
        var that = this;
        function inner() {
            console.log(that.a);
        }
        inner();  
    }
};

obj.foo();    //obj

或者使用箭头函数（箭头函数的 this 指向定义箭头函数的上下文）：

var a = "global";

let obj = {
    a: "obj",
    foo: function() {
        inner = ()=> {
            console.log(this.a);
        }
        inner();  
    }
};

obj.foo();    //obj

---

3.作为构造函数调用时，this 指代 new 出的对象：

var a = "global";

function foo() {
    this.a = "foo";
}

let t = new foo();
console.log(a);    //global;
console.log(t.a);    //foo

---

4.call、apply、bind 调用时，this 指代第一个参数：

var a = "global";

let obj = {
    a: "obj",
    foo: function() {
        console.log(this.a);
    }
};

let t = {
    a: "t"
};

obj.foo.call(t);    //t
obj.foo.apply(t);    //t
obj.foo.bind(t)();    //t

使用上述方法会改变 this 的指向（参数为空时，默认绑定全局对象）

---

一般来说，this 绑定的优先级：3 > 4 > 2 > 1