深入理解JavaScript中this的指向规则

JavaScript this机制概述

JavaScript语言内置了独特的this机制，其具体指向会根据代码执行上下文的不同而发生变化。

全局作用域中的this

全局作用域

console.log(this); //全局变量

在全局作用域中直接访问this，它指向全局对象。在浏览器环境中，该全局对象即为window。

需要注意的是，在ECMAScript 5引入的strict（严格）模式下，全局作用域内不存在全局变量，此时this的值将变为undefined。

普通函数调用中的this

函数调用场景

function foo() {
  console.log(this);
}

foo(); //全局变量

当以普通函数形式直接调用时，函数内部的this同样指向全局对象。

同样地，在ECMAScript 5的strict模式下，由于不存在全局变量，此时函数内部的this值为undefined。

对象方法调用与晚绑定

对象方法调用

var test = {
  foo: function () {
    console.log(this);
  }
}

test.foo(); //test对象

在对象方法被调用时，this通常指向调用该方法的对象本身。

var test = {
  foo: function () {
    console.log(this);
  }
}

var test2 = test.foo;
test2(); //全局变量

然而，由于this采用晚绑定（late binding）机制，如果将对象方法提取为独立变量后调用，this将不再指向原对象，而是回退指向全局对象，这等同于直接调用函数。

这一特性至关重要：相同的代码片段，其this的具体指向必须在运行时才能最终确定。

构造函数中的this

构造函数场景

function Foo() {
  console.log(this);
}

new Foo(); //新创建的对象
console.log(foo); 

在构造函数内部，this指向正在新创建的对象实例。

通过call和apply显式设置this

显式绑定this

function foo(a, b) {
  console.log(this);
}

var bar = {};

foo.apply(bar, [1, 2]); //bar
foo.call(1, 2); //Number对象

利用Function原型上的call或apply方法，可以显式指定函数内部this的值，它将被设置为传入的第一个参数。