明白 JavaScript 中的 this 关键字

2019年8月26日 161次阅读 来源: 莫提时光

原文：Understanding the “this” keyword in JavaScript

许多人被JavaScript中的this关键字给搅扰住了，我想杂沓的泉源来自人们天经地义地以为JavaScript中的this应当像Java中的this或Python中的self一样事情。只管JavaScript的this有时有相似的结果，但它跟Java或其他语言中的this是完整差别的。只管有点难邃晓，但它的道理并不神奇。事实上，this遵照一些简朴的小划定规矩，这篇文章就对这些划定规矩作出了诠释。

但起首，我想给出一些专业术语和一些JavaScript运转时环境的相干信息，希望能协助你构建一个心智模子来更好的邃晓this。

实行高低文

每一行JavaScript代码都运转在一个“实行高低文”中。JavaScript运转时环境用一个栈维持着这些高低文，栈顶的一个就是当前正在运转的实行高低文。

有三类可实行代码：全局代码（global code），函数代码（function code），eval代码（eval code）。也许的说，全局代码是应用顺序最顶层的代码，不被包含在任何要领中，函数代码是在函数（function）体中的代码，eval代码是被eval诠释的全局代码。

this对象每次掌握进入一个新的实行高低文时会被从新肯定指向，直到掌握切换到一个差别的高低文。this的值取决于两件事：被实行的代码的范例（global,function,eval）和挪用代码的对象。

全局对象

统统的JavaScript运转时都有一个唯一的全局对象。他的属性包含内置的对象如Math和String，以及其他由主环境变量定义的属性。

在浏览器中，全局对象是window对象。在Node.js中，它就叫作“global object”。（我假定你将在浏览器中运转代码，但是，我所说的统统也一样适用于Node.js。）

肯定this的值

第一条划定规矩很简朴：this指向全局对象在统统全局代码中。由于统统的顺序都是由实行全局代码最先的，而且this在给定的实行高低文中会被修改，所以，默许的this指全局对象。

当掌握进入一个新的实行高低文时发作了什么呢？只要三种this的值发作转变的状况：要领挪用，new一个函数对象，函数被call和apply挪用。我将一一诠释。

要领挪用

当我们经由过程点（例obj.foo()）或许方括号（例obj["foo"]）把一个要领作为一个对象的属性来挪用时，this将指向要领体的父对象：

var counter = {
  val: 0,
  increment: function () {
    this.val += 1;
  }
};
counter.increment();
console.log(counter.val); // 1
counter['increment']();
console.log(counter.val); // 2

这是第二条划定规矩：函数被看成父对象的属性来挪用时，在函数代码中的this指向函数的父对象。

注重，假如我们直接挪用雷同的要领，即，不作为父对象的属性，this将不会指向counter对象：

var inc = counter.increment;
inc();
console.log(counter.val); // 2
console.log(val); // NaN

当inc被挪用时，这里的this不会转变，所以它照样指向全局对象。

当inc实行

this.val += 1;

它等效于实行：

window.val += 1;

window.val是undefined，且undefined加1获得NaN。

new 运算符

任何JavaScript函数都可以经由过程new运算符当做组织函数运用。new运算符建立一个新对象而且设置函数中的this指向挪用函数的新对象。举个栗子：

function F (v) {
  this.val = v;
}
var f = new F("Woohoo!");
console.log(f.val); // Woohoo!
console.log(val); // ReferenceError

这就是我们的第三条划定规矩：在用new运算符挪用的函数代码中的this指向新建立的对象。

注重F没有任何特别。假如不经由过程new挪用，this将指向全局对象：

var f = F("Oops!");
console.log(f.val); // undefined
console.log(val); // Oops!

在这个例子中，F("Oops!")是一个一般挪用，this没有指向新的对象，由于没有用new建立新的对象，this继承指向全局对象。

Call & Apply

统统JavaScript函数都有两个要领，call和apply，让你能够挪用函数而且清晰的设置this指向的对象。apply函数有两个参数：一个是this指向的对象，一个（可选）传进函数的参数的数组：

var add = function (x, y) {
      this.val = x + y;
    },
    obj = {
      val: 0
    };
add.apply(obj, [2, 8]);
console.log(obj.val); // 10

call要领和apply要领是完整一样的，只不过要逐一的通报参数，而不是用一个数组：

add.call(obj, 2, 8);
console.log(obj.val); // 10

这是第四条划定规矩：当运用call或apply挪用函数时，函数代码中的this被设置为call或apply中的第一个参数。

总结

  • 默许的，this指向全局对象
  • 当一个函数被作为一个父对象的属性挪用时，函数中的this指向父对象
  • 当一个函数被new运算符挪用时，函数中的this指向新建立的对象
  • 当运用call或apply挪用函数时，函数代码中的this被设置为call或apply中的第一个参数。假如第一个参数是null或不是个对象，this指向全局对象。

假如你邃晓并接受了上面的4条划定规矩，你就可以邃晓this指的是什么了。

补充：eval突破上面统统划定规矩

Remember when I said that code evaluated inside eval is its own type of executable code? Well, that’s true, and it means that the rules for determining what this refers to inside of eval code are a little more complex.

As a first pass, you might think that this directly inside eval refers to the same object as it does in eval’s caller’s context. For example:

var obj = {
  val: 0,
  func: function() { 
    eval("console.log(this.val)");
  }
};
obj.func(); // 0

That works likely as you expect it to. However, there are many cases with eval where this will probably not work as you expect:

eval.call({val: 0}, "console.log(this.val)"); // depends on browser

The output of the above code depends on your browser. If your JavaScript runtime implements ECMAScript 5, this will refer to the global object and the above should print undefined, because it’s an “indirect” call of eval. That’s what the latest versions of Chrome and Firefox do. Safari 5.1 actually throws an error (“The ‘this’ value passed to eval must be the global object from which eval originated”), which is kosher according to ECMAScript 3.

If you want know how this works with eval, you should read Juriy Zaytsev’s excellent, “Global eval. What are the options?” You’ll learn more about eval, execution contexts, and direct vs. indirect calls than you probably ever wanted to know.

In general, you should just avoid using eval, in which case the simple rules about this given previously will always hold true.

    原文作者：莫提时光
    原文地址: https://segmentfault.com/a/1190000002812359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞