Javascript 101 : this 关键字

目前为止，我们的例子中提到过很多次 this 以及函数了。例如 Function.prototype.apply 和 Function.prototype.call 他们都有各自的优势，但是，在讨论这门语言的其他方面之前，先来看看 this 关键字和执行上下文。

方法和函数

方法在ECMAScript规范中被定义如下：

……函数是属性的值。

注：当一个函数被当做对象的方法调用的时候，此时，函数的值就会被当做对象的值。

当被当做对象的方法调用的时候，也可以将函数当做单独的子程序，这在社区中，也是被普遍使用的。

执行上下文(Execution Context)

ECMAScript 5.1 规定，执行中的程序形成执行上下文。此执行上下文支持此语言的某些结构，而这些结构就是需要管理的范围–来自于其他部分的可见变量和函数声明。

此执行上下文包含一个引用到各种可用状态元素的处于当前逻辑范围内的被管理的程序。更多详细信息，请访问 执行上下文。

全局上下文和构造函数 (this)

运行下面的代码：

function add(x, y) {
  console.log(this);
  return x + y;
}

add(1, 1);

第二行代码将会是一个全局变脸被现实：window ，但是，如果在第一行之后增加 use strict 的话，将会返回 undefined .

现在思考一下，当构造函数被执行的时候，发生了神马？

当作为 new Shape() 的结果，进入 Shape 构造函数的时候，this 的值就会使当前对象，也就是此处的 shape 。请记住下面的话，如果想写面向对象的程序的话：如果一个函数被作为一个对象的方法调用，或者使用 new 关键字，此时， this 的值就是对象的当前实例，否则就是全局上下文 window 或者 undefined 。但是此处要讨论的是，this 的值，取决于如何调用函数。

一般可能犯得错误

小心的对待嵌套在方法中的函数，例如下面的例子：

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype = {
  move: function(x, y) {
    this.x += x;
    this.y += y;

    function checkBounds() {
      if (this.x > 100) {
        console.error('Warning: Shape out of bounds');
      }
    }

    checkBounds();
  }
};

var shape = new Shape();
shape.move(101, 1);

checkBounds 函数被定义在 move 方法内部，但是 console.error 此行代码，却永远不会被运行到，这是因为 checkBounds 函数中的 this 的值是全局上下文 window 而不是此处的 shape。因为虽然函数在 move 方法内部，但执行函数的时候，函数是单独的子程序，所以 this 还是指向 window。而 window.x 没有定义，所以永远执行不到。但是此时就可能混淆，所以带来错误。

但是，我们可以将 this 赋值给其他变量，从而可以正常使用。请注意有 self 的两行代码。如何修改的。

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype = {
  move: function(x, y) {

    var self = this;

    this.x += x;
    this.y += y;

    function checkBounds() {
      if (self.x > 100) {
        console.error('Warning: Shape out of bounds');
      }
    }

    checkBounds();
  }
};

var shape = new Shape();
shape.move(101, 1);

现在，当执行 move 方法的时候，self 代替了 this，从而可以正常的执行了。

总结

使用 this 的时候，请记住以下三点：

1. 取决于函数被以何种方式调用，new MyConstructor 和 myObject.method() 将被指向其实例，而当 this 在函数中的话，将会指向 window 。
2. 严格模式下，this 将会是 undefined 而不是 window 。
3. this 可以赋值给任意合法变量，但是一般 self 用的比较多。