Javascript ';这';原型函数内部的函数
我基本上有一个对象,通过它的原型扩展了一个函数。在该函数内部存在另一个函数,但是在该嵌套函数中使用Javascript ';这';原型函数内部的函数,javascript,Javascript,我基本上有一个对象,通过它的原型扩展了一个函数。在该函数内部存在另一个函数,但是在该嵌套函数中使用this时,它似乎不是指对象,而是指函数 比如说, var sampleObject = function() { this.foo = 123; } sampleObject.prototype.getFoo = function() { var nested = function() { return this.foo; } return nested(); } var test
this
时,它似乎不是指对象,而是指函数
比如说,
var sampleObject = function() {
this.foo = 123;
}
sampleObject.prototype.getFoo = function() {
var nested = function() {
return this.foo;
}
return nested();
}
var test = new sampleObject();
window.alert(test.getFoo()); // undefined
this.foo
不引用123值,但未定义,因为它引用的是嵌套函数,其中不存在foo
。如何从嵌套函数中访问123值?常用的解决方法是使用闭包
sampleObject.prototype.getFoo = function() {
var _this = this;
var nested = function() {
return _this.foo;
}
return nested();
}
有些库添加了自动执行此操作的方法
- Prototype添加Function.bind()
- Ext添加function.createDelegate()
- Javascript 1.8.5添加了function.bind()
通过将
this
的值保存在局部变量中,可以明确地将其作为该函数和所有嵌套函数作用域的词法上下文的一部分。因此,在调用“nested”时,内部函数将有自己的作用域(它自己的这个值),但它仍然可以引用封闭作用域中的变量“me”。这是JavaScript上的一个已知缺点。通常的模式是将其分配给外部函数中的另一个变量(通常是self),然后从内部函数访问self。这是有效的。除了将其声明为var\u This=This
,我还看到代码执行var that=This
或var self=This
了解变量的范围很重要,因为它可能会产生意外的结果。这是一个老问题,但为了完整性,我给出了另一个解决方案。另一种方法涉及
在您的示例中,“this”指的是窗口对象,因为您在调用嵌套函数时没有指定另一个上下文,并且由于window.foo未定义而得到未定义
您可以通过三种方式解决此问题
1-使用变量存储外部这个最常用的方法
2-使用绑定方法将外部“this”绑定到内部
3-使用可以将上下文传递给函数的调用方法
tl;博士
使用。它们从ECMAScript 6开始提供:
var sampleObject=function(){
this.foo=123;
}
sampleObject.prototype.getFoo=函数(){
var nested=()=>{//更改了此行。
返回此.foo;
}
返回嵌套的();
}
var test=新的sampleObject();
alert(test.getFoo())代码>执行此操作的ES6方法是使用。基本上,当您使用箭头函数时,它不会创建自己的“this”上下文。因此,使用“this”将引用父函数的上下文。下面是代码的外观:
sampleObject.prototype.getFoo = function() {
const nested = () => {
return this.foo; //"this" refers to parent function's context
}
return nested;
}
我更喜欢未经自动化的方式,因为它没有那么复杂,谢谢在这种情况下你可能更喜欢它,但是自动化的方式对于事件处理程序来说真的很好。如果你正在做一个大型项目,请想出一个约定。ie始终使用var=this;或者self或者ever对我来说,that
通常是原型函数中的变量,例如,foo.prototype.add=function(that){返回这个+那个}
,所以我更喜欢self
或者me
。如果我这样做,会发生什么:var foo=new sampleObject()代码>$(窗口).on('scroll',foo.getFoo)
@vsync应该没问题-如果您遇到类似的问题,我建议您使用代码示例打开一个全新的问题,这会造成困难。但这并不好,因为通过使用函数引用,我们将失去对原型非常重要的this
,因此var me=this示例中的code>将指向窗口
Object@vsync啊,好吧,对不起,我看错了你的问题。是的,在这种情况下,您需要将调用包装在匿名函数中,或者使用.bind()
或其他方法为您完成。请注意,在上面的示例中,嵌套函数是一个闭包,即使在返回后,me也将绑定到函数。me将在嵌套的闭包范围内。嵌套将很好地工作,因为它有我的一部分,并且它引用sampleObject实例嘿,这很酷。。所以你能详细说明一下带参数的函数吗。。我有种感觉,它看起来很像,但是。。不同的
sampleObject.prototype.getFoo = function() {
var nested = function() {
return this.foo;
}
return nested.bind(this)();
}
sampleObject.prototype.getFoo = function() {
var _this = this;
var nested = function() {
return _this.foo;
}
return nested();
}
sampleObject.prototype.getFoo = function() {
var nested = function() {
return this.foo;
}.bind(this);
return nested();
}
SampleObject.prototype.getFoo = function() {
var nested = function() {
return this.foo;
};
return nested.call(this);
}
sampleObject.prototype.getFoo = function() {
const nested = () => {
return this.foo; //"this" refers to parent function's context
}
return nested;
}