理解 JavaScript 中的 this 关键字

jayzou 发布于2019-08-21 10:32 / 2062人阅读

摘要：原文许多人被中的关键字给困扰住了，我想混乱的根源来自人们理所当然地认为中的应该像中的或中的一样工作。尽管有点难理解，但它的原理并不神秘。在浏览器中，全局对象是对象。运算符创建一个新对象并且设置函数中的指向调用函数的新对象。

原文：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.

GPU云服务器云服务器 javaScript中的this jsp关键字this js中的this js中的this机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85719.html

【译】javascript的this关键词理解

摘要：在中，当使用关键字调用函数构造函数时，函数构造函数中也有这个概念，但是它不是惟一的规则，而且常常可以引用来自不同执行上下文的不同对象。因此，我们使用调用函数，可以看到这是对象，并且的属性是正常的。一直以来，javascript里边的this都是一个很难理解的东西，之前看的最多的就是阮一峰老师关于this的理解： http://www.ruanyifeng.com/blo... htt...

tainzhi 2019-08-23 17:06 评论0 收藏0
理解JavaScript中的this关键词

摘要：除此之外，还有一种情况也会修改，在一些库中传入回调函数，可能会强制改变的绑定，例如在中本例中的就是被强制改变绑定到了触发事件的元素上。它们的第一个参数是一个对象，它们会把这个对象绑定到，接着在调用函数时指定这个。理解JavaScript中的this关键词 this关键词是JavaScript语言中一个很重要，同时也是一个非常复杂的机制，它同时也是一个很特殊的关键词，它一般会被自动定义...

paulquei 2019-08-20 10:45 评论0 收藏0
初学者彻底理解javascript闭包以及this关键字

摘要：理解了这句话，我们就可以来看闭包了闭包前面说过，函数可以访问函数作用域链中的变量，但如果我们想在函数外访问函数内却不行了。不管是闭包还是this关键字，都是困扰JS初学者的比较难懂的东西，如果你对它们的认识还不足够清晰，那么现在就一起把它们掌握掉。还是那句话，我们从最基本的开始，建立起一个非常清晰的知识结构，好了，开始吧 ? 闭包当然我们今天说的是javascript里的闭包。要学...

魏明 2019-08-21 16:23 评论0 收藏0
10个流行的JavaScript面试题

摘要：然而，异步函数不会立即被推入调用堆栈，而是会被推入任务队列，并在调用堆栈为空后执行。将事件从任务队列传输到调用堆栈称为事件循环。我们调用接受和或返回另一个函数称为高阶函数的函数。为了保证可读性，本文采用意译而非直译想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.如何理解 JS 中的this关键字？ JS 初学者总是对 this 关键字感到困惑，因为与其他现...

CollinPeng 2019-08-23 18:12 评论0 收藏0
如何理解JavaScript的this关键字

摘要：原文链接参考深入理解原型和闭包完结王福朋博客园中的作用域详解博客园前言王福朋老师的 JavaScript原型和闭包系列文章看了不下三遍了，最为一个初学者，每次看的时候都会有一种大彻大悟的感觉，而看完之后却总是一脸懵逼。原型与闭包可以说是 JavaScirpt 中理解起来最难的部分了，当然，我也只是了解到了一些皮毛，对于 JavaScript OOP 更是缺乏经验。这里我想总...

Yangder 2019-08-23 12:03 评论0 收藏0