JavaScript this详解

英文原文地址：All this
翻译：姜乐衣

全局作用域下的this

在浏览器中，当this处于全局作用域时，this和window是相同的。

<script type="text/javascript">
console.log(this === window); //true
</script>

在浏览器中，使用var在全局作用域下定义变量等价于为this或者window添加属性。

<script type="text/javascript">
    var foo = "bar";
    console.log(this.foo); //logs "bar"
    console.log(window.foo); //logs "bar"
</script>

如果声明变量时（即使未在全局作用域下，比如函数中）没有使用var或let（ES6），你实际上是添加或改变一个全局作用域下this的属性。

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
</script>

如果你使用了node的repl环境，此时this是最顶层的命名空间。global也是指向它的。

> this
{ ArrayBuffer: [Function: ArrayBuffer],
  Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
  Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
  ...
> global === this
true

但在直接执行一个脚本文件的时候，全局作用域下的this一开始是一个空对象。和global并不同。

//test.js
console.log(this);
console.log(this === global);

$ node test.js
{}
false

但如果你使用repl环境来做同样的事情，结果就不同了。

> var foo = "bar";
> this.foo
bar
> global.foo
bar

使用node直接执行脚本文件，创建变量不加var和let会把这个变量添加给global，但不会添加给处于脚本文件最顶层作用域的this。

//test.js
foo = "bar";
console.log(this.foo);
console.log(global.foo);

$ node test.js
undefined
bar

但在node的repl环境下，会添加给this和global两者。

函数作用域下的this

除了处于DOM事件处理函数和提供了thisArg参数两种情况（请看下面）之外的情况下。如果你在调用函数时没有使用new，this是等同于全局作用域下this的。

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
</script>

//test.js
foo = "bar";

function testThis () {
  this.foo = "foo";
}

console.log(global.foo);
testThis();
console.log(global.foo);

$ node test.js
bar
foo

除非你使用了"use strict";，在这种情况下（函数作用域下的）this将会是undefined。

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      "use strict";
      this.foo = "foo";
    }

    console.log(this.foo); //打印 "bar"
    testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
</script>

如果你使用new调用函数，this则指向了一个新环境，不在指向全局作用域下的this。（应该是指不再和全局作用域下的this指向相同）

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    new testThis();
    console.log(this.foo); //logs "bar"

    console.log(new testThis().foo); //logs "foo"
</script>

我倾向于叫这个新环境为实例。

原型对象中的this

被创建的函数实际上是一个个函数对象。它们都会拥有一个特殊的prototype属性，你可以给这个属性赋值。通过new调用函数来创建实例，便可以使用被赋予给prototype的属性。你将会利用this来使用这些值。

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

    Thing.prototype.foo = "bar";

    var thing = new Thing(); //logs "bar"
    console.log(thing.foo);  //logs "bar"

如果使用new创建了多个新实例，这些实例会共享在prototype上定义的值。举个例子，如果你没有在每个实例中单独重载this.foo，当你使用this.foo将会会返回同一个值。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    console.log(this.foo);
}
Thing.prototype.setFoo = function (newFoo) {
    this.foo = newFoo;
}

var thing1 = new Thing();
var thing2 = new Thing();

thing1.logFoo(); //logs "bar"
thing2.logFoo(); //logs "bar"

thing1.setFoo("foo");
thing1.logFoo(); //logs "foo";
thing2.logFoo(); //logs "bar";

thing2.foo = "foobar";
thing1.logFoo(); //logs "foo";
thing2.logFoo(); //logs "foobar";

在实例中的this亦是一种特殊的对象，this实际上是一个关键字。你可以认为this是使用定义在prototype上的值的渠道，但是在实例中直接对this赋值的行为却会隐藏本来定义在prototype上的值。当然如果你做了这样的事，想要再次获得本来定义在prototype上的值，可以删除你在实例中对this赋的值……

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    console.log(this.foo);
}
Thing.prototype.setFoo = function (newFoo) {
    this.foo = newFoo;
}
Thing.prototype.deleteFoo = function () {
    delete this.foo;
}

var thing = new Thing();
thing.setFoo("foo");
thing.logFoo(); //logs "foo";
thing.deleteFoo();
thing.logFoo(); //logs "bar";
thing.foo = "foobar";
thing.logFoo(); //logs "foobar";
delete thing.foo;
thing.logFoo(); //logs "bar";

……或直接引用函数对象的prototype。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    console.log(this.foo, Thing.prototype.foo);
}

var thing = new Thing();
thing.foo = "foo";
thing.logFoo(); //logs "foo bar";

同一个函数创建的多个实例会共享prototype上的值。如果你赋值一个数组给prototype，多个实例会共享这个数组，除非你在实例中重写了它，也就是说你隐藏了它。

function Thing() {
}
Thing.prototype.things = [];


var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing2.things); //logs ["foo"]

一般来说，赋予prototype数组或对象都是错误的行为。如果你需要每个实例拥有他们自己的数组，那就在函数里创造，而不是在prototype上。

function Thing() {
    this.things = [];
}


var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing1.things); //logs ["foo"]
console.log(thing2.things); //logs []

将多个函数的prototype连成一条原型链（prototype chain），这样this就会魔法般地沿着原型链向上，直到找到你需要的值。

function Thing1() {
}
Thing1.prototype.foo = "bar";

function Thing2() {
}
Thing2.prototype = new Thing1();


var thing = new Thing2();
console.log(thing.foo); //logs "bar"

一些人会利用这个在JS中模拟经典面对对象的继承。

在已经存在于原型链的函数中，对于this所有的赋值都会隐藏沿着原型链链往上定义的同名值。

function Thing1() {
}
Thing1.prototype.foo = "bar";

function Thing2() {
    this.foo = "foo";
}
Thing2.prototype = new Thing1();

function Thing3() {
}
Thing3.prototype = new Thing2();


var thing = new Thing3();
console.log(thing.foo); //logs "foo"

我喜欢叫赋给prototype的值为「方法」。我已经使用了一些方法在上面的例子里，比如logFoo。这些方法都会获得一个「有魔力」的this原型，如同最开始那个用来创建实例的函数一样。我一般会叫这个原始函数为构造函数。

在prototype上定义的方法里使用的this，无论在继承链的任何位置，都引用着当前的实例。这也就意味着，如果通过在继承链上对this直接复制来隐藏一个值，此实例上的方法都会使用新值，而不会再考虑这个方法实际是赋给哪个prototype的。

function Thing1() {
}
Thing1.prototype.foo = "bar";
Thing1.prototype.logFoo = function () {
    console.log(this.foo);
}

function Thing2() {
    this.foo = "foo";
}
Thing2.prototype = new Thing1();


var thing = new Thing2();
thing.logFoo(); //logs "foo";

在JavaScript中你可以嵌套定义函数，也就是说你可以在一个函数中定义函数。然而嵌套在内部的函数在一个闭包中捕获其外部函数的变量，并不会继承this。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    var info = "attempting to log this.foo:";
    function doIt() {
        console.log(info, this.foo);
    }
    doIt();
}


var thing = new Thing();
thing.logFoo();  //logs "attempting to log this.foo: undefined"

在"use strict"情况下，在doIt中的this是undefined，而默认情况下是global对象。这对于不熟悉JS的this来说，也是一项痛苦的来源。

更糟糕的是，把一个实例方法当做值，比如把一个方法当做参数传给一个函数，并不会把其所在实例一起传给函数。当这种情况发生时，this会再次指向global对象，或者在"use strict";情况下的的undefined。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {  
    console.log(this.foo);   
}

function doIt(method) {
    method();
}


var thing = new Thing();
thing.logFoo(); //logs "bar"
doIt(thing.logFoo); //logs undefined

有些人更倾向于在变量中捕获this，一般会把用于捕获的变量起名为「self」，避开了this.……

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    var self = this;
    var info = "attempting to log this.foo:";
    function doIt() {
        console.log(info, self.foo);
    }
    doIt();
}


var thing = new Thing();
thing.logFoo();  //logs "attempting to log this.foo: bar"

……但是这仍然不会解决把方法当成参数传递不会传递实例的问题。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () { 
    var self = this;
    function doIt() {
        console.log(self.foo);
    }
    doIt();
}

function doItIndirectly(method) {
    method();
}


var thing = new Thing();
thing.logFoo(); //logs "bar"
doItIndirectly(thing.logFoo); //logs undefined

对于所有的定义在函数对象上的函数和方法，通过bind，便可以连实例带方法一起传递，

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () { 
    console.log(this.foo);
}

function doIt(method) {
    method();
}


var thing = new Thing();
doIt(thing.logFoo.bind(thing)); //logs bar

你也可以使用apply和call，在一个新环境中调用方法或函数。

function Thing() {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () { 
    function doIt() {
        console.log(this.foo);
    }
    doIt.apply(this);
}

function doItIndirectly(method) {
    method();
}


var thing = new Thing();
doItIndirectly(thing.logFoo.bind(thing)); //logs bar

译者注：这里的代码同时出现了两个内容点，有点难以理解，稍微解释一下，apply``call``bind都是用来改变一个方法调用环境的方法，前两者用处几乎相同，为直接改变函数的调用环境并调用，而bind则是只返回改变了环境的函数。上面的这个代码例子，可见我们在Thing构造函数中定义了logFoo方法，而此方法其中有一个局部函数，由上文可知，此局部函数中的this是指向着global或undefined的。然后，通过doIt.apply(this);改变了局部函数中的this指向，从而使其变为了原型对象this，并执行。而下文中的doItIndirectly(thing.logFoo.bind(thing));，如果没有bind语句，由于上文提到「把一个实例方法当做值，比如把一个方法当做参数传给一个函数，并不会把其所在实例一起传给函数」，故使用bind改变了log.Foo的执行环境为实例this再传给了doItIndirectly。

你可以利用bind来替换一个函数或方法的this指向，即使它本来并没有赋予给这个实例的原型。

function Thing() {
}
Thing.prototype.foo = "bar";


function logFoo(aStr) {
    console.log(aStr, this.foo);
}


var thing = new Thing();
logFoo.bind(thing)("using bind"); //logs "using bind bar"
logFoo.apply(thing, ["using apply"]); //logs "using apply bar"
logFoo.call(thing, "using call"); //logs "using call bar"
logFoo("using nothing"); //logs "using nothing undefined"

你应该避免你的构造函数返回任何值，因为这会改变结果对象的指向。

function Thing() {
    return {};
}
Thing.prototype.foo = "bar";


Thing.prototype.logFoo = function () {
    console.log(this.foo);
}


var thing = new Thing();
thing.logFoo(); //Uncaught TypeError: undefined is not a function

奇怪的是，如果构造函数返回一个基本数据类型值，比如一个字符串或一个数值，这种情况就不会发生，同时返回语句也会被忽略。最好的方式是永远不要在一个你可能会用new调用的函数中返回任何值。如果你想要使用工厂模式，使用函数创造实例，并不使用new，这个看法就仅供参考了。

你可以避免使用new而是使用Object.create。这也会创造一个实例。

function Thing() {
}
Thing.prototype.foo = "bar";


Thing.prototype.logFoo = function () {
    console.log(this.foo);
}


var thing =  Object.create(Thing.prototype);
thing.logFoo(); //logs "bar"

这种方式不会调用构造函数。

function Thing() {
    this.foo = "foo";
}
Thing.prototype.foo = "bar";


Thing.prototype.logFoo = function () {
    console.log(this.foo);
}


var thing =  Object.create(Thing.prototype);
thing.logFoo(); //logs "bar"

因为Obeject.create不会调用构造函数，所以当你使用继承模式，准备在继承链更下层处重写构造函数时，就很有用了。

function Thing1() {
    this.foo = "foo";
}
Thing1.prototype.foo = "bar";

function Thing2() {
    this.logFoo(); //logs "bar"
    Thing1.apply(this);
    this.logFoo(); //logs "foo"
}
Thing2.prototype = Object.create(Thing1.prototype);
Thing2.prototype.logFoo = function () {
    console.log(this.foo);
}

var thing = new Thing2();

对象中的this

可以在一个对象中的函数中使用this来引用此对象上的其他属性。这和使用new来创建一个实例是不同的。

var obj = {
    foo: "bar",
    logFoo: function () {
        console.log(this.foo);
    }
};

obj.logFoo(); //logs "bar"

注意，obj不是通过new也不是通过Object.create创建的。你也可以把函数绑定给这种对象，就如同这些对象也是实例一样。

var obj = {
    foo: "bar"
};

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

logFoo.apply(obj); //logs "bar"

当你像下面这样使用this的时候，它不会向下深入挖掘继承层次。只有相邻层次的父母对象所拥有的属性（和函数同层次）才能通过this访问。

var obj = {
    foo: "bar",
    deeper: {
        logFoo: function () {
            console.log(this.foo);
        }
    }
};

obj.deeper.logFoo(); //logs undefined

你只能直接引用属性:

var obj = {
    foo: "bar",
    deeper: {
        logFoo: function () {
            console.log(obj.foo);
        }
    }
};

obj.deeper.logFoo(); //logs "bar"

DOM事件中的属性

在一个HTML DOM事件处理函数中，this永远指向事件所对应的DOM元素……

function Listener() {
    document.getElementById("foo").addEventListener("click",
       this.handleClick);
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs "<div id="foo"></div>"
}

var listener = new Listener();
document.getElementById("foo").click();

……除非你bind了环境。

function Listener() {
    document.getElementById("foo").addEventListener("click", 
        this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs Listener {handleClick: function}
}

var listener = new Listener();
document.getElementById("foo").click();

HTML相关的this

在HTML特性中你可以存放一些JS，this指向所在元素。

<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>

重写this

你不能重写this因为它是一个关键字。

function test () {
    var this = {};  // Uncaught SyntaxError: Unexpected token this 
}

eval this

你可以使用eval访问this。

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
}

var thing = new Thing();
thing.logFoo();

这将会成为一个安全隐患。除非不适用eval不然没办法避免。

使用Function来创建函数同样可以访问this：

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = new Function("console.log(this.foo);");

var thing = new Thing();
thing.logFoo(); //logs "bar"

with this

你可以使用with来将this引入当前环境使用而不需要实际引用this。

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    with (this) {
        console.log(foo);
        foo = "foo";
    }
}

var thing = new Thing();
thing.logFoo(); // logs "bar"
console.log(thing.foo); // logs "foo"

很多人认为这种写法很糟糕，因为会引起with相关的歧义问题。

jQuery this

如同对于HTML DOM的事件处理函数一样，jq库很多地方使用this来引用DOM元素。对于事件处理函数和一些方便的方法（比如$.each），this引用DOM元素。

<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
    this.click();
});
</script>

thisArg this

如果你使用 underscore.js 或 lo-dash 你会知道，在库中，很多方法可以传入一个实例，通过thisArg函数参数，这个参数将会成为this环境。举个例子，_.each就是这样的。从ES5开始，原生的方法就允许thisArg，比如forEach。实际上，之前的bind，apply和call的实例用法就教你一些使用thisArg的途径。实际上当你使用bind时，是将对象作为thisArg传入了。

function Thing(type) {
    this.type = type;
}
Thing.prototype.log = function (thing) {
    console.log(this.type, thing);
}
Thing.prototype.logThings = function (arr) {
   arr.forEach(this.log, this); // logs "fruit apples..."
   _.each(arr, this.log, this); //logs "fruit apples..."
}

var thing = new Thing("fruit");
thing.logThings(["apples", "oranges", "strawberries", "bananas"]);

不用再繁琐地使用bind语句，也不用采用self代替this，代码显然更加清晰简洁了。