在 JavaScript 中,“this”是当函数位于对象的对象内时似乎会迷失方向
对象 F 有一个存储为 this.fn
和 this.state.fn
的函数。可以作为 f.fn()
成功调用,但不能作为 f.state.fn()
调用,
function F( i, f ) { this.i = i; this.state = { 'fn':f }; this.f = f; }; F.prototype.inc = function() { this.i++ }; F.prototype.fn = function() { this.state.fn() }; f1 = new F( 1, function() { console.log( this.i ); } ); f1.f(); // this works f1.inc(); // this works f1.state.fn; // prints the function f1.fn(); // undefined! f1.state.fn(); // undefined!
问题似乎是该函数存储在对象 中state
,因为这是有效的:
f1.state.fn.call( f1 ); F.prototype.fn = function() { this.state.fn.call(this); };
这似乎暗示 F.state.fn
中的 this
上下文是不是 F
而是 F.state
- 对我来说完全违反直觉——这是对的吗!?
the object F has a function stored as this.fn
and this.state.fn
. can be called successfully as f.fn()
but not as f.state.fn()
function F( i, f ) { this.i = i; this.state = { 'fn':f }; this.f = f; }; F.prototype.inc = function() { this.i++ }; F.prototype.fn = function() { this.state.fn() }; f1 = new F( 1, function() { console.log( this.i ); } ); f1.f(); // this works f1.inc(); // this works f1.state.fn; // prints the function f1.fn(); // undefined! f1.state.fn(); // undefined!
the problem seems to be that the function is stored in the object state
, because this works:
f1.state.fn.call( f1 ); F.prototype.fn = function() { this.state.fn.call(this); };
which seems to imply that the this
context within F.state.fn
is not F
but rather F.state
- which to me is completely counter-intuitive - is this right!?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
在函数内,
this
完全取决于您如何调用该函数。当您使用对象中的点表示法调用函数时,
this
将自动设置为该对象。如果你说
someObject.someChildObject.someFunction()
那么在someFunction()
中你会发现this
将被设置为someChildObject< /代码>。
因此,在您的示例中,
f1.fn()
应该导致this
为fn()
内的f1
,但随后在该函数中,您输入this.state.fn()
- 它将使用thisstate
的fn()
code> 设置为state
。您可以使用
call
或apply> 覆盖此行为。
另一个供您感兴趣的示例:
如果您创建对最初定义为对象属性的函数的引用并通过该引用调用该函数,则
this
将是适用于您的新引用的任何内容。在我的示例中,x
引用是全局的,这实际上意味着它属于window
对象。您可以从中了解到,f1.f()
调用的函数根本不属于f1
。继续这个例子:
当你调用
f2.f()
时,你会发现this
被设置为f2
,因为我已经设置属性f2.i
该函数将记录该属性。Within a function,
this
depends entirely on how you called the function.When you call a function using dot notation from an object
this
will be automatically set to that object.If you say
someObject.someChildObject.someFunction()
then withinsomeFunction()
you'll findthis
will be set tosomeChildObject
.So in your example
f1.fn()
should result inthis
beingf1
withinfn()
, but then within that function you saythis.state.fn()
- which will callstate
'sfn()
withthis
set tostate
.You can override this behaviour using
call
orapply
.Another example just for your interest:
If you create a reference to a function originally defined as an object property and call the function via that reference then
this
will be whatever applies to your new reference. In my example thex
reference is a global, which in practice means it belongs to thewindow
object. What you can learn from this is that the function thatf1.f()
calls doesn't really belong tof1
at all.Continuing that example:
When you call
f2.f()
, you'll findthis
is set tof2
, and because I've set a propertyf2.i
the function will log that property.实例
当您调用
state.fn()
时,它会打印this.i
是state.i
在我的情况下是42
但在你的情况下是undefined
。您也可以通过执行
.bind
来强制this
不是state
而是您期望的对象,但是 ES5 中您应该这样做获取 ES5 垫片
Live example
When you call
state.fn()
it printsthis.i
which isstate.i
which is42
in my case butundefined
in your case.You can alternatively force
this
to not bestate
but to be the object you expect it to be by doing.bind
is ES5 however so you should get the ES5-shim