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 的调用位置

二、绑定规则

1. 默认绑定
如果是独立函数运行，则默认绑定全局对象，严格模式则是undefinded

function person() {
    console.log(this);
};
person(); // 默认绑定
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

2. 隐式绑定
调用位置是否有上下文对象或者被某个对象拥有或者包含。则是隐式绑定，会把函数调用中的 this 绑定到这个引用的上下文对象上。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    console.log(this);
  }
};
person.fullName();
// 调用`fullName`时，`this`被绑定到`person`，因此打印出来的是`person`对象
// {firstName: "Bill", lastName: "Gates", fullName: ƒ}

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : {
      name: 'aaa',
      output: function () {
          console.log(this)
      }
  }
};
person.fullName.output();
// {name: 'aaa', output: ƒ}
// 调用`output`时，`this`被绑定到`fullName`，因此打印出来的是`fullName`对象

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说：

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

隐式丢失
一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上，取决于是否是严格模式。

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

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的 bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

传递参数是一种隐式赋值，也会丢失

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"

// 不是自己声明的参数也会丢失
setTimeout( obj.foo, 100 ); // "oops, global"

3. 显示绑定
不在对象内部包含函数引用，而是在某个对象时强制调用函数。比如call(..) apply(..)。它们的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象，因此我 们称之为显式绑定。

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

4. new 绑定

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

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

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

对于正常的函数调用来说，理解了这些知识你就可以明白 this 的绑定原理了。 不过……凡事总有例外。

• 在事件中，this指向的是接收事件的元素。

 <button onclick="console.log(this)">单击来删除我！</button>
 <!--  <button οnclick="console.log(this)">单击来删除我！</button> -->

注意：简单对象（非函数）是没有执行上下文的。执行上下文有三种全局执行上下文，函数执行上下文，eval执行上下文。

绑定规则顺序

1. 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。 var bar = new foo()
2. 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是 指定的对象。 var bar = foo.call(obj2)
3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上 下文对象。 var bar = obj1.foo()
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到 全局对象。 var bar = foo()

箭头函数

箭头函数的this对象，不使用以上4种规则。
箭头函数本身没有自己的this对象。内部的this指向定义时外层（函数或者全局）作用域中的this，且箭头函数内部的this是固定不变的。

// 普通函数
let x = 11
let obj = {
	  x: 22,
	  out: function() {
		    console.log(this) // {x: 22, out: ƒ}
		    console.log(this.x) // 22
	}
}
obj.out()

// 箭头函数 箭头函数跟out平级，外层对象是obj，定义时的作用域是window
let x = 11
let obj = {
    x: 22,
    out: () => {
        console.log(this) // windows对象
        console.log(this.x) // 11
    }
}
obj.out()

let a = 11;
function test2(){
  this.a = 22;
  let b = function(){
  	console.log(this.a)
  }
  b();
}
let x=new test2();
// 输出11

// b是箭头函数的外层，定义在test2函数内部，所以作用域是test2函数内
let a = 11;
function test2(){
  this.a = 22;
  let b = () => {
  	console.log(this.a)
  }
  b();
}
let x=new test2();
// 输出22