我注意到,对于this
Stack Overflow网站上的JavaScript,关键字是什么以及如何正确(以及错误地)使用它似乎没有明确的解释。
我目睹了它的一些非常奇怪的行为,并且未能理解为什么会发生它。
如何this
工作以及何时使用?
我注意到,对于this
Stack Overflow网站上的JavaScript,关键字是什么以及如何正确(以及错误地)使用它似乎没有明确的解释。
我目睹了它的一些非常奇怪的行为,并且未能理解为什么会发生它。
如何this
工作以及何时使用?
有关此关键字的一点信息
让我们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
如果您不完全了解JS,那么很难掌握或编写比其他琐碎的东西还要多的东西。您不能只是快速浏览一下:)我认为入门JS的最佳方法是先观看Douglas Crockford的这些视频讲座-http: //yuiblog.com/crockford/,其中涵盖了这一点以及关于JS的所有其他信息。
关于this
以下内容的最详细,最全面的文章可能是:
背后的想法this
是要了解函数调用类型对于设置this
值具有重要意义。
在确定问题时this
,不要问自己:
从哪里
this
带走的?
但不要问自己:
该函数如何调用?
对于箭头功能(上下文透明的特殊情况),请问自己:
this
在定义箭头功能的地方有什么值?
这种心态在与人打交道时是正确的this
,它将使您免于头痛。
这是我见过的最好的解释:了解JavaScript的这种清晰
在此引用总是指(并保持的值)的物体的单一对象,而且它通常是一个函数或方法内使用,虽然它可以在函数外,在全球范围内使用。请注意,当我们使用严格模式时,它在全局函数和未绑定到任何对象的匿名函数中都具有未定义的值。
有四个场景中这可能会造成混淆:
他提供了代码示例,解释和解决方案,我认为这非常有帮助。
Since this thread has bumped up, I have compiled few points for readers new to this
topic.
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)
参考文献:
javascript中的每个执行上下文都有一个this参数,该参数由以下参数设置:
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.
“ this”的值取决于执行功能的“上下文”。上下文可以是任何对象或全局对象,即窗口。
因此,“ this”的语义不同于传统的OOP语言。它会导致问题:1.当一个函数被传递给另一个变量(很可能是回调)时;2.从类的成员方法调用闭包时。
在两种情况下,都将其设置为window。