“ this”关键字如何工作?

JavaScript

满天星

2020-03-09

我注意到,对于thisStack Overflow网站上的JavaScript,关键字是什么以及如何正确(以及错误地)使用它似乎没有明确的解释

我目睹了它的一些非常奇怪的行为,并且未能理解为什么会发生它。

如何this工作以及何时使用?

第293篇《“ this”关键字如何工作?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
SamStafan十三 2020.03.09

“ this”的值取决于执行功能的“上下文”。上下文可以是任何对象或全局对象,即窗口。

因此,“ this”的语义不同于传统的OOP语言。它会导致问题:1.当一个函数被传递给另一个变量(很可能是回调)时;2.从类的成员方法调用闭包时。

在两种情况下,都将其设置为window。

凯泡芙Davaid 2020.03.09

有关关键字的一点信息

让我们this在全局范围内将关键字记录到控制台中,无需任何其他代码,但

console.log(this)

Client / Browser中, this关键字是一个全局对象,它是window

console.log(this === window) // true

Server / Node / Javascript中,runtime this关键字也是一个全局对象,它是module.exports

console.log(this === module.exports) // true
console.log(this === exports) // true

记住exports只是对module.exports

你的名字 2020.03.09

如果您不完全了解JS,那么很难掌握或编写比其他琐碎的东西还要多的东西。您不能只是快速浏览一下:)我认为入门JS的最佳方法是先观看Douglas Crockford的这些视频讲座-http: //yuiblog.com/crockford/,其中涵盖了这一点以及关于JS的所有其他信息。

小胖Itachi西里 2020.03.09

关于this以下内容的最详细,最全面的文章可能是:

在JavaScript中对“ this”关键字的温和解释

背后的想法this是要了解函数调用类型对于设置this具有重要意义。


在确定问题时this不要问自己:

从哪里this带走的

不要问自己:

该函数如何调用

对于箭头功能(上下文透明的特殊情况),请问自己:

this定义箭头功能的地方有什么值

这种心态在与人打交道时是正确的this,它将使您免于头痛。

小宇宙Sam 2020.03.09

这是我见过的最好的解释:了解JavaScript的这种清晰

引用总是指(并保持的值)的物体的单一对象,而且它通常是一个函数或方法内使用,虽然它可以在函数外,在全球范围内使用。请注意,当我们使用严格模式时,它在全局函数和未绑定到任何对象的匿名函数中都具有未定义的值。

有四个场景中可能会造成混淆:

  1. 当我们传递一个方法(使用this)作为参数用作回调函数时。
  2. 当我们使用内部函数(闭包)时。请务必注意,闭包无法使用this关键字访问外部函数的this变量,因为this变量只能由函数本身访问,而不能由内部函数访问。
  3. 当其依赖于一个方法被分配给跨过上下文的变量,在这种情况下,引用另一个目的比最初预期。
  4. 当使用这种与绑定一起,应用和调用方法。

他提供了代码示例,解释和解决方案,我认为这非常有帮助。

理查德阿飞 2020.03.09

Since this thread has bumped up, I have compiled few points for readers new to this topic.

How is the value of this determined?

We use this similar to the way we use pronouns in natural languages like English: “John is running fast because he is trying to catch the train.” Instead we could have written “… John is trying to catch the train”.

var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {

    // We use "this" just as in the sentence above:
       console.log(this.firstName + " " + this.lastName);

    // We could have also written:
       console.log(person.firstName + " " + person.lastName);
    }
}

this is not assigned a value until an object invokes the function where it is defined. In the global scope, all global variables and functions are defined on the window object. Therefore, this in a global function refers to (and has the value of) the global window object.

When use strict, this in global and in anonymous functions that are not bound to any object holds a value of undefined.

在以下情况下,该this关键字最容易被误解:1)我们借用了一个使用方法的方法this,2)我们this为变量分配了使用方法的方法,3)this用作回调函数的函数,以及4)this在闭包内部使用的方法—内部功能。(2)

表

是什么把握未来

ECMA脚本6中定义的箭头功能采用了this来自封闭(功能或全局)范围绑定。

function foo() {
     // return an arrow function
     return (a) => {
     // `this` here is lexically inherited from `foo()`
     console.log(this.a);
  };
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!

尽管箭头功能提供了一种替代使用的功能bind(),但必须注意的是,它们实际上是在禁用传统this机制,而希望使用更广泛理解的词法作用域。(1)


参考文献:

  1. this&Object Prototypes,作者:凯尔·辛普森(Kyle Simpson)。©2014 Getify解决方案。
  2. javascriptissexy.com- http://goo.gl/pvl0GX
  3. 安格斯卡罗尔-http: //goo.gl/Z2RacU
Pro神无猴子 2020.03.09

javascript中的每个执行上下文都有一个this参数,参数由以下参数设置:

  1. 函数的调用方式(包括作为对象方法,调用应用的使用,new的使用
  2. 绑定的使用
  3. 用词法表示箭头函数(它们采用其外部执行上下文this
  4. 代码是处于严格模式还是非严格模式
  5. 是否使用调用代码 eval

You can set the value of this using func.call, func.apply or func.bind.

By default, and what confuses most beginners, when a listener is called after an event is raised on a DOM element, the this value of the function is the DOM element.

jQuery makes this trivial to change with jQuery.proxy.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android