js 中 this 的详细解释

this 是js 中很重要的一个指针。但是往往也是最容易产生bug 的地方。一起学习以下《你不知道的JavaScript》中关于this的介绍；

调用栈 和 调用位置

每个函数的this是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。

在理解this的绑定过程之前，首先要理解调用位置和调用栈；因为 调用位置 就在 当前正在执行的函数 的 前一个调用 中。

什么是调用栈和调用位置
调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。
调用栈：就是为了到达当前执行位置所调用的所有函数。

function baz() {
    // 当前调用栈是：baz
    // 因此， 当前调用位置是全局作用域
    console.log( "baz" );
    bar(); // <-- bar的调用位置
} 
function bar() {
    // 当前调用栈是baz -> bar
    // 因此， 当前调用位置在baz中
    console.log( "bar" );
    foo(); // <-- foo的调用位置
} 
function foo() {
    // 当前调用栈是baz -> bar -> foo
    // 因此， 当前调用位置在bar中
    console.log( "foo" );
} 
baz(); // <-- baz的调用位置

this绑定规则1：默认模式

分析代码：

function foo() {
    console.log( this.a );
    //this通过默认绑定指向全局对象
} 
var a = 2;
foo(); // 2

和

function foo() {
    "use strict";
    console.log( this.a ); 
    //严格模式（strict mode）全局对象将无法使用默认绑定
} 
var a = 2;
foo(); // TypeError: this is undefined

解释：

1. 可以把这条规则看作是无法应用其他规则时的默认规则。
2. 当调用foo()时，this.a被解析成了全局变量a。为什么？因为在本例中，函数调用时应用了this的默认绑定，因此this指向全局对象。
3. foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。
4. 如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此this会绑定到undefined

this绑定规则2：隐式绑定

分析代码：

function foo() {
    console.log( this.a );
}
 var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 2

解析：

1. 无论是直接在obj中定义还是先定义再添加为引用属性，foo严格来说都不属于obj对象。
2. 调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”它。
3. 当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
4. 对象属性引用链中只有最接近（包含层）会影响调用位置。

隐式丢失

function foo() {
    console.log( this.a );
} 
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a是全局对象的属性

if(bar === obj.foo){
    console.log('true'); //true
    console.log(typeof bar) //function
    console.log(typeof obj.foo)  //function
}else {
    console.log('false')
} 

bar(); // "oops, global"
obj.foo();// 2

//等价的两个函数，输出不一样的结果。为什么？
//其实var bar === window.bar; 它隐式绑定了window 对象，所以它访问到的自然是 window.a

解析：虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一
个不带任何修饰的函数调用，因此应用了默认绑定。这种情况是不可以预料的。

还有一种 this 丢失=》 回调函数

回调函数丢失this绑定是非常常见的

function foo() {
console.log( this.a );
}
function doFoo(fn) {
    // fn其实引用的是foo
    fn(); // <-- 调用位置！
} 
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"

this绑定规则3：显式绑定

分析代码：

function foo() {
console.log( this.a );
} 
var obj = {
    a:2
};
foo.call( obj ); // 2

通过foo.call(..)，我们可以在调用foo时强制把它的this绑定到obj上

硬绑定

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
} 
var obj = {
    a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

bind(..)会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数。

this绑定规则4：new绑定

JavaScript，构造函数只是一些使用new操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一种特殊的函数类型，它们只是被new操作符调用的普通函数而已。

使用new来调用函数时的行为

1. 创建（或者说构造）一个全新的对象
2. 新对象会被执行[[原型]]连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function foo(a) {
    this.a = a;
} 
//new对普通函数的构造调用，默认行为：创建一个新对象，获得对this的所有引用，返回新对象。
var bar = new foo(2);
console.log( bar.a ); // 2

//以上函数 相当于下面的函数

function foo(a){
    var obj = {};
    obj.a = a;
    reture obj
}
var bar = foo(2);
console.log( bar.a ); // 2

解析：使用new来调用foo(..)时，我们会构造一个新对象并把它绑定到foo(..)调用中的this上。

绑定优先级

显式绑定 > 隐式绑定
bind硬绑定 > new绑定 > 隐式绑定

判断步骤

1. 函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

   var bar = new foo()

2. 函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。

   function foo(a) {
       this.a = a;
   }
   var obj = {
       a:2
   }
   foo.call(obj,3); 
   //因为强制改变了foo 的上下文，this 显示绑定 为 obj；所以改变的是obj.a 的值 
   console.log(obj.a); //3 

3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。

   var bar = obj1.foo()

4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。

   var bar = foo()

   在默认绑定中容易被混淆的是 IIFE 自执行函数的使用

   var a = 3;
   var obj = {
       a:3,
       b:(function(){
           console.log(this.a)
       })(),
       c:function(){
           (function(){
               console.log(this.a)
           })()
       }
   }
   obj.c();
   
     //3
     //3
   
     this 都指向了window