[英]Why `this` refers to the parent function's scope
I did read that the this
keyword can refer to either the global scope or to the object it is being referred in or to the object to which an event is bound but the below behavior is not understood. 我确实读过
this
关键字可以引用全局范围,也可以引用它所引用的对象或引用事件的对象,但不理解以下行为。
function outer() { var inner = 4; function innerFunc() { var inner = 5; console.log('inner called with ' + this.inner); } return innerFunc; } var obj = outer(); obj();
Why does this log 4 instead of 5. AFAIK this
should refer to the function it is being referred in and should be available via closure
. 为什么这个日志4而不是5.AFAIK
this
应该引用它所引用的函数,并且应该通过closure
来获得。
TL;DR - this
doesn't work like you think it should. TL; DR -
this
不会像您认为的那样有效。
Read more here , here and here . 在这里 , 这里和这里阅读更多。
The this
(otherwise known as context) of a function is determined at call time , not at function definition time. 函数的
this
(也称为上下文)是在调用时确定的,而不是在函数定义时确定的。 This is widely known as this
being dynamically bound , and variables from closure being lexically bound . 众所周知,
this
是动态绑定的 ,而闭包的变量是词法绑定的 。
var obj = outer();
obj();
Calls outer
with this = window
(or global
in the case of Node.js) because you are not in strict mode (otherwise, this = undefined
). 使用
this = window
调用outer
(或者在Node.js的情况下调用global
),因为您没有处于严格模式(否则, this = undefined
)。 outer
doesn't use this
, so this doesn't impact it greatly. outer
不使用this
,所以这不会对它产生太大影响。
outer
then returns a function ( innerFunc
), and you assign it to obj
. outer
然后返回一个函数( innerFunc
),并将它分配给obj
。 You then call obj
, again, with this = window
(because you didn't specify anything other with .bind()
or .call()
or .apply()
). 然后,再次使用
this = window
调用obj
(因为您没有使用.bind()
.call()
或.apply()
或.apply()
指定其他内容)。
You then log this.inner
which is equivalent to window.inner
which is undefined
unless you happen to have a global variable named inner
with some value. 然后记录
this.inner
,它等同于window.inner
,它是undefined
除非你碰巧有一个名为inner
的全局变量带有一些值。
The value of this
, then, is determined by the caller. 的值
this
,然后,由呼叫者决定。
If you had invoked obj
like so: 如果你像这样调用了
obj
:
obj.call({inner: 42}); // first argument to fn.call() is the context
You would have seen 42 in your console, regardless of how the function was defined. 无论函数是如何定义的,您都会在控制台中看到42。
A way to mitigate this and retain control over your this
is to either use fn.bind()
or an arrow function . 一种方法来缓解这个并保留控制你
this
是要么使用fn.bind()
或箭头功能 。
Your code snippet is returning undefined
, not 4. The reason for this is because the window
is calling innerFunc
by invoking obj()
. 您的代码片段返回
undefined
,而不是4.原因是因为window
通过调用obj()
调用innerFunc
。 Thus, this
is referring to the window
as that is what called innerFunc
(and window.inner
is undefined
). 因此,
this
是指window
因为它被称为innerFunc
(并且window.inner
undefined
)。 You can see this by adding a variable inner = 3
at the top of your code (this will make window.inner = 3
) and so your function will log 3
. 您可以通过在代码顶部添加变量
inner = 3
来看到这一点(这将使window.inner = 3
),因此您的函数将记录3
。
inner = 3; // ie: window.inner = 3 function outer() { var inner = 4; function innerFunc() { var inner = 5; console.log('inner called with ' + this.inner); // this is window } return innerFunc; } var obj = outer(); obj();
In this example you are using a function instead of an object . 在此示例中,您使用的是函数而不是对象 。 Additionally, you used a variable instead of the
this
keyword to assign the value. 此外,您使用变量而不是
this
关键字来分配值。 I think the concept that you're thinking of is local scoping
我认为你所考虑的概念是
local scoping
For example, 例如,
function parent(){
var n = 5
function child(){
var n = 4 //n is 4 here
}
//n is 5 here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.