JavaScript：this的指向

this 的默认绑定

• 全局环境下的 this 指向了 window

console.log(this); // window

• 函数独立调用,函数内部的 this 也指向了 window,函数默认被挂载到 window 上

function fn() {
  console.log(this);
}
fn(); // window   // 相当于window.fn();

• 被嵌套函数独立调用时,this 默认指向了 window

var obj = {
  a: 2,
  // 函数当做对象的方法来调用 this指向了obj
  fn: function () {
    function test() {
      console.log(this); // window
    }
    test();
  },
};
obj.fn(); // 此时test()函数自己去执行,相当于函数独立调用, 所以此时的this也是window

• 立即执行函数的 this 指向 window

(function () {
  console.log('自执行函数中内部的this: ' + this); //window
})();

• 闭包中 this 默认指向了 window

// 闭包就是能够读取其他函数内部变量的函数。下面的test函数就是闭包
var a = 0;

var obj = {
  a: 2,
  foo: function () {
    var c = this.a;
    return function test() {
      console.log(this); // window
      return c;
    };
  },
};
var fn = obj.foo();
console.log(fn()); // 2

• 函数调用链（一个函数又调用另外一个函数),此时每个函数相当于独立调用,this 指向 window

function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
}
test1();

• 内置函数 setTimeout()和 setInterval()第一个参数的回调函数中的 this 默认指向了 window

// 1.
setTimeout(function () {
  console.log(this); // window
}, 1000);

// 2.
var a = 10;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo,
};
setTimeout(obj.foo, 1000); // 10
// 以上代码相当于
setTimeout(function foo() {
  console.log(this.a);
}, 1000); // 10

this 的隐式绑定

// 1. 当函数当做对象的方法来调用,this指向了直接对象
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo,
  obj2: {
    a: 2,
    foo: foo,
  },
};
// foo()函数的直接对象是obj, this会隐式的被绑定到obj对象上
obj.foo(); // 1
// foo()函数的直接对象是obj2, this会隐式的被绑定到obj对象上
obj.obj2.foo(); // 2

this 的显示绑定

• 通过 call() apply() bind() 绑定 this 对象

var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
foo(); // 0
foo.call(obj); // 2
foo.apply(obj); // 2
var fn = foo.bind(obj);
fn(); // 2

• 如果 this 被硬绑定, 那么 this 不能再被改变

var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
var bar = function () {
  foo.call(obj);
};
bar();
setTimeout(bar, 2000);
// 硬绑定后bar无论怎么调用，都不会影响foo函数的this绑定
bar.call(window); // 2

• 数组的 forEach (还有 map() filter() some() every()等函数)

// 因为默认情况下传入的函数是独立调用的（默认绑定）
var id = 'window';
var obj = {
  id: 'fn',
};
var arr = [1, 2, 3];
arr.forEach(function (item) {
  console.log(item, this.id); // 打印了三次"window"
});

// 如果要改变该函数的this指向, 就给forEach的第二个参数传递一个对象
var id = 'window';
var obj = {
  id: 'fn',
};
var arr = [1, 2, 3];
arr.forEach(function (item) {
  console.log(item, this.id); // 打印了三次"fn"
}, obj);

this 的 new 绑定

// 如果是new关键字来调用函数 相当于构造函数来实例化对象,那么内部的this指向了当前实例化的对象
// 创建Person
function Person() {
  console.log(this); // Person {}
}

var p = new Person();
console.log(p); // Person {}

this 的隐式丢失

• 函数别名

var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo,
};
obj.foo(); // 1
// 因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定,此时为默认绑定情况,里面的this指向了window
var bar = obj.foo;
bar(); // 0

• 参数传递

var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo,
};
obj.foo(); // 1
// 因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定,此时为默认绑定情况,里面的this指向了window
var bar = obj.foo;
bar(); // 0

• 间接调用

function foo() {
  console.log(this.a);
}
var a = 2;
var obj = {
  a: 3,
  foo: foo,
};
var p = { a: 4 };
// 隐式绑定,函数当做对象中的方法来使用,内部的this指向了该对象
obj.foo(); // 3

// 赋值(obj2.foo = obj1.foo)的结果是foo函数；
// foo函数被直接调用，那么是默认绑定
(p.foo = obj.foo)(); // 2

// 将obj.foo函数赋值给p.foo函数, 之后p.foo()函数再执行,其实是属于p对象的方法的执行,this指向了当前的p对象
p.foo = obj.foo;
p.foo(); // 4

ES6 箭头函数中的 this 指向

MDN 官方文档：「箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层继承 this。」

var obj = {
  a: () => {
    console.log(this);
  },
};
// 对象是不能产生作用域的,a方法实际是被定义在了全局作用域下,里面的this指向的是window
obj.a(); // window

// 不能用call方法改变箭头函数的this指向
var obj = {
  a: () => {
    console.log(this);
  },
};
obj.a.call({ name: 'zhangsan' }); // window

严格模式下的 this 指向

// 1. 严格模式下, 独立调用的函数内部的this指向了undefined
function fn() {
  'use strict';
  console.log(this); // undefined
}
fn();

// 2. 严格模式下, 函数apply()和call()内部的this始终是它们的第一个参数
function fn() {
  'use strict';
  console.log(this); // 第一个输出null,第二句输出undefined
}
showColor.call(null);
showColor.call(undefined);