与其他语言相比，函数的 `this` 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了`this`的值。`this`不能在执行期间被赋值，并且在每次函数被调用时`this`的值也可能会不同。ES5引入了bind方法来设置函数的`this`值，而不用考虑函数如何被调用的，ES2015 引入了支持`this`词法解析的箭头函数（它在闭合的执行环境内设置`this`的值）。

填充

## 语法

    this

### 值

当前执行代码的环境对象

## 全局环境

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）`this` 都指向全局对象。

    // 在浏览器中, window 对象同时也是全局对象：
    console.log(this === window); // true

    a = 37;
    console.log(window.a); // 37

    this.b = "MDN";
    console.log(window.b)  // "MDN"
    console.log(b)         // "MDN"

## 函数（运行内）环境

在函数内部，`this`的值取决于函数被调用的方式。

### 简单调用

因为下面的代码不在严格模式下，且 `this` 的值不是由该调用设置的，所以 `this` 的值默认指向全局对象。

    function f1(){
      return this;
    }
    //在浏览器中：
    f1() === window;   //在浏览器中，全局对象是window

    //在Node中：
    f1() === global;

然而，在严格模式下，`this`将保持他进入执行环境时的值，所以下面的`this`将会默认为`undefined`。

    function f2(){
      "use strict"; // 这里是严格模式
      return this;
    }

    f2() === undefined; // true

所以，在严格模式下，如果 `this` 没有被执行环境（execution context）定义，那它将保持为 `undefined`。

在第二个例子中，`this`的确应该是undefined，因为`f2`是被直接调用的，而不是作为对象的属性或方法调用的（如 `window.f2()`）。有一些浏览器最初在支持严格模式时没有正确实现这个功能，于是它们错误地返回了`window`对象。

如果要想把 `this` 的值从一个环境传到另一个，就要用 `call` 或者`apply` 方法。

    // 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
    var obj = {a: 'Custom'};

    // 这个属性是在global对象定义的。
    var a = 'Global';

    function whatsThis(arg) {
      return this.a;  // this的值取决于函数的调用方式
    }

    whatsThis();          // 'Global'
    whatsThis.call(obj);  // 'Custom'
    whatsThis.apply(obj); // 'Custom'

当一个函数在其主体中使用 `this` 关键字时，可以通过使用函数继承自`Function.prototype` 的 `call` 或 `apply` 方法将 `this` 值绑定到调用中的特定对象。

    function add(c, d) {
      return this.a + this.b + c + d;
    }

    var o = {a: 1, b: 3};

    // 第一个参数是作为‘this’使用的对象
    // 后续参数作为参数传递给函数调用
    add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

    // 第一个参数也是作为‘this’使用的对象
    // 第二个参数是一个数组，数组里的元素用作函数调用中的参数
    add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

使用 `call` 和 `apply` 函数的时候要注意，如果传递给 `this` 的值不是一个对象，JavaScript 会尝试使用内部 `ToObject` 操作将其转换为对象。因此，如果传递的值是一个原始值比如 `7` 或 `'foo'`，那么就会使用相关构造函数将它转换为对象，所以原始值 `7` 会被转换为对象，像 `new Number(7)` 这样，而字符串 `'foo'` 转化成 `new String('foo')` 这样，例如：

    function bar() {
      console.log(Object.prototype.toString.call(this));
    }

    //原始值 7 被隐式转换为对象
    bar.call(7); // [object Number]

### `bind`方法

ECMAScript 5 引入了 `Function.prototype.bind`。调用`f.bind(someObject)`会创建一个与`f`具有相同函数体和作用域的函数，但是在这个新函数中，`this`将永久地被绑定到了`bind`的第一个参数，无论这个函数是如何被调用的。

    function f(){
      return this.a;
    }

    var g = f.bind({a:"azerty"});
    console.log(g()); // azerty

    var h = g.bind({a:'yoo'}); // bind只生效一次！
    console.log(h()); // azerty

    var o = {a:37, f:f, g:g, h:h};
    console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

### 箭头函数

在箭头函数中，`this`与封闭词法环境的`this`保持一致。在全局代码中，它将被设置为全局对象：

    var globalObject = this;
    var foo = (() => this);
    console.log(foo() === globalObject); // true

注意：如果将`this`传递给`call`、`bind`、或者`apply`，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（`thisArg`）应该设置为`null`。

    // 接着上面的代码
    // 作为对象的一个方法调用
    var obj = {foo: foo};
    console.log(obj.foo() === globalObject); // true

    // 尝试使用call来设定this
    console.log(foo.call(obj) === globalObject); // true

    // 尝试使用bind来设定this
    foo = foo.bind(obj);
    console.log(foo() === globalObject); // true

无论如何，`foo` 的 `this` 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的`this`被设置为封闭的词法环境的。

    // 创建一个含有bar方法的obj对象，
    // bar返回一个函数，
    // 这个函数返回this，
    // 这个返回的函数是以箭头函数创建的，
    // 所以它的this被永久绑定到了它外层函数的this。
    // bar的值可以在调用中设置，这反过来又设置了返回函数的值。
    var obj = {
      bar: function() {
        var x = (() => this);
        return x;
      }
    };

    // 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
    // 将返回的函数的引用赋值给fn。
    var fn = obj.bar();

    // 直接调用fn而不设置this，
    // 通常(即不使用箭头函数的情况)默认为全局对象
    // 若在严格模式则为undefined
    console.log(fn() === obj); // true

    // 但是注意，如果你只是引用obj的方法，
    // 而没有调用它
    var fn2 = obj.bar;
    // 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
    console.log(fn2()() == window); // true

在上面的例子中，一个赋值给了 `obj.bar`的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 `A` 调用时，函数B的`this`被永久设置为obj.bar（函数A）的`this`。当返回的函数（函数B）被调用时，它`this`始终是最初设置的。在上面的代码示例中，函数B的`this`被设置为函数A的`this`，即obj，所以即使被调用的方式通常将其设置为 `undefined` 或全局对象（或者如前面示例中的其他全局执行环境中的方法），它的 `this` 也仍然是 `obj` 。

### 作为对象的方法

当函数作为对象里的方法被调用时，它们的 `this` 是调用该函数的对象。

下面的例子中，当 `o.f()`被调用时，函数内的`this`将绑定到`o`对象。

    var o = {
      prop: 37,
      f: function() {
        return this.prop;
      }
    };

    console.log(o.f()); // logs 37

请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象`o`的同时，将函数内联定义为成员 `f` 。但是，我们也可以先定义函数，然后再将其附属到`o.f`。这样做会导致相同的行为：

    var o = {prop: 37};

    function independent() {
      return this.prop;
    }

    o.f = independent;

    console.log(o.f()); // logs 37

这表明函数是从`o`的`f`成员调用的才是重点。

同样，`this` 的绑定只受最靠近的成员引用的影响。在下面的这个例子中，我们把一个方法`g`当作对象`o.b`的函数调用。在这次执行期间，函数中的`this`将指向`o.b`。事实证明，这与他是对象 `o` 的成员没有多大关系，最靠近的引用才是最重要的。

    o.b = {g: independent, prop: 42};
    console.log(o.b.g()); // 42

#### 原型链中的 `this`

对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么`this`指向的是调用这个方法的对象，就像该方法在对象上一样。

    var o = {
      f: function() {
        return this.a + this.b;
      }
    };
    var p = Object.create(o);
    p.a = 1;
    p.b = 4;

    console.log(p.f()); // 5

在这个例子中，对象`p`没有属于它自己的`f`属性，它的f属性继承自它的原型。虽然在对 `f` 的查找过程中，最终是在 `o` 中找到 `f` 属性的，这并没有关系；查找过程首先从 `p.f` 的引用开始，所以函数中的 `this` 指向`p`。也就是说，因为`f`是作为`p`的方法调用的，所以它的`this`指向了`p`。这是 JavaScript 的原型继承中的一个有趣的特性。

#### getter 与 setter 中的 `this`

再次，相同的概念也适用于当函数在一个 `getter` 或者 `setter` 中被调用。用作 `getter` 或 `setter` 的函数都会把 `this` 绑定到设置或获取属性的对象。

    function sum() {
      return this.a + this.b + this.c;
    }

    var o = {
      a: 1,
      b: 2,
      c: 3,
      get average() {
        return (this.a + this.b + this.c) / 3;
      }
    };

    Object.defineProperty(o, 'sum', {
        get: sum, enumerable: true, configurable: true});

    console.log(o.average, o.sum); // logs 2, 6

### 作为构造函数

当一个函数用作构造函数时（使用new关键字），它的`this`被绑定到正在构造的新对象。

虽然构造器返回的默认值是`this`所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回`this`对象）。

    /*
     * 构造函数这样工作:
     *
     * function MyConstructor(){
     *   // 函数实体写在这里
     *   // 根据需要在this上创建属性，然后赋值给它们，比如：
     *   this.fum = "nom";
     *   // 等等...
     *
     *   // 如果函数具有返回对象的return语句，
     *   // 则该对象将是 new 表达式的结果。
     *   // 否则，表达式的结果是当前绑定到 this 的对象。
     *   //（即通常看到的常见情况）。
     * }
     */

    function C(){
      this.a = 37;
    }

    var o = new C();
    console.log(o.a); // logs 37

    function C2(){
      this.a = 37;
      return {a:38};
    }

    o = new C2();
    console.log(o.a); // logs 38

在刚刚的例子中（`C2`），因为在调用构造函数的过程中，手动的设置了返回对象，与`this`绑定的默认对象被丢弃了。（这基本上使得语句 “`this.a = 37;`”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。

### 作为一个DOM事件处理函数

当函数被用作事件处理函数时，它的`this`指向触发事件的元素（一些浏览器在使用非`addEventListener`的函数动态添加监听函数时不遵守这个约定）。

    // 被调用时，将关联的元素变成蓝色
    function bluify(e){
      console.log(this === e.currentTarget); // 总是 true

      // 当 currentTarget 和 target 是同一个对象时为 true
      console.log(this === e.target);
      this.style.backgroundColor = '#A5D9F3';
    }

    // 获取文档中的所有元素的列表
    var elements = document.getElementsByTagName('*');

    // 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
    for(var i=0 ; i<elements.length ; i++){
      elements[i].addEventListener('click', bluify, false);
    }

### 作为一个内联事件处理函数

当代码被内联on-event 处理函数调用时，它的`this`指向监听器所在的DOM元素：

    <button onclick="alert(this.tagName.toLowerCase());">
      Show this
    </button>

上面的 alert 会显示`button`。注意只有外层代码中的`this`是这样设置的：

    <button onclick="alert((function(){return this})());">
      Show inner this
    </button>

在这种情况下，没有设置内部函数的`this`，所以它指向 global/window 对象（即非严格模式下调用的函数未设置`this`时指向的默认对象）。

## 规范

Specification | Status | Comment
--- | --- | ---
ECMAScript Latest Draft (ECMA-262) The this keyword | Draft |
ECMAScript 2015 (6th Edition, ECMA-262) The this keyword | Standard |
ECMAScript 5.1 (ECMA-262) The this keyword | Standard |
ECMAScript 3rd Edition (ECMA-262) The this keyword | Standard |
ECMAScript 1st Edition (ECMA-262) The this keyword | Standard | Initial definition. Implemented in JavaScript 1.0.

## 浏览器兼容

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

| Desktop | Mobile | Server
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | Node.js
`this` | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes | nodejs Full support Yes

### Legend

Full support
  Full support

## 相关链接

- 严格模式
- Gentle explanation of 'this' keyword in JavaScript