闭包编译器警告“全局 this 对象的危险使用”?

发布于 2024-10-21 18:24:08 字数 734 浏览 3 评论 0原文

亲爱的朋友们,闭包编译器在高级模式下给出了此警告,并在 {this.

JSC_USED_GLOBAL_THIS:第 200 行第 33 行字符处危险使用全局 this 对象 hovers[i4].onfocus = function() {this.className += "Hovered";}

JSC_USED_GLOBAL_THIS:在第 201 行第 32 行字符处危险使用全局 this 对象 hovers[i4].onblur = function() {this.className = this.className.replace(/Hove...

JSC_USED_GLOBAL_THIS: 在第 201 行第 49 行危险使用全局 this 对象 hovers[i4].onblur = function() {this.className = this.className.replace(/Hove...

JSC_USED_GLOBAL_THIS: 在第 218 行第 38 行危险使用全局 this 对象 buttons[i5].onmouseover = function() {this.className += "Hovered";}

Q1.这有什么危险?
第二季度。我应该改变这个吗?
第三季度。我该如何改进/解决这个代码?

谢谢!

Dear folks, Closure Compiler gives this warnings in Advanced Mode, underlining {this.

JSC_USED_GLOBAL_THIS: dangerous use of the global this object at line 200 character 33
hovers[i4].onfocus = function() {this.className += "Hovered";}

JSC_USED_GLOBAL_THIS: dangerous use of the global this object at line 201 character 32
hovers[i4].onblur = function() {this.className = this.className.replace(/Hove...

JSC_USED_GLOBAL_THIS: dangerous use of the global this object at line 201 character 49
hovers[i4].onblur = function() {this.className = this.className.replace(/Hove...

JSC_USED_GLOBAL_THIS: dangerous use of the global this object at line 218 character 38
buttons[i5].onmouseover = function() {this.className += "Hovered";}

Q1. Whats so dangerous about this?
Q2. Should I change this?
Q3. How do I improve/solve this code?

merci!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

云朵有点甜 2024-10-28 18:24:08

如果您知道“this”变量的类型,则可以使用 JsDoc 声明它以阻止编译器抱怨:

hovers[i4].onfocus = 
/** @this {Element} */
function() {this.className += "Hovered";}

警告:但是,假设您确实知道“this”的类型“ 多变的。这可能并不像看起来那么容易。例如:

foo.doSomething = function(x) { this.bar = x; }
foo.doSomething("Hello");

您应该知道 doSomething 中的“this”指的是 foo。但是,如果您使用闭包编译器的高级模式,编译器可能会“扁平化”foo 命名空间,并且最终会得到:

a = function(x) { this.b = x }
a("Hello");

with foo. doSomething 被“扁平化”为单个全局变量 a。在这种情况下,“this”变量显然指向全局对象!你的代码将会被破坏!

因此,闭包编译器非常坚决地警告您不要在可以扁平化的函数中使用“this”。不过,您可以在构造函数和原型函数中使用“this”,而不会出现此警告。

要解决此问题,最好通过使用命名空间本身来避免使用“this”:

foo.doSomething = function(x) { foo.bar = x; }
foo.doSomething("Hello");

If you know the type of the "this" variable, you can declare it with a JsDoc to stop the compiler from complaining:

hovers[i4].onfocus = 
/** @this {Element} */
function() {this.className += "Hovered";}

Caveat: this, however, assumes you know for sure the type of the "this" variable. This may not be as easy as it seems. For example:

foo.doSomething = function(x) { this.bar = x; }
foo.doSomething("Hello");

You would have known that "this" in doSomething refers to foo. However, if you use the Advanced Mode of the Closure Compiler, the compiler may "flatten" the foo namespace and you'll end up with:

a = function(x) { this.b = x }
a("Hello");

with foo.doSomething being "flattened" to a single global variable a. In this case, the "this" variable obviously points to the global object instead! Your code will break!

Therefore, the Closure Compiler is quite adamant in warning you not to use "this" in functions that can be flattened. You may use "this" in constructors and prototype functions without this warning though.

To resolve this, it is better to avoid using "this" by using the namespace itself:

foo.doSomething = function(x) { foo.bar = x; }
foo.doSomething("Hello");
爱本泡沫多脆弱 2024-10-28 18:24:08

“this”在不同的上下文中可能有不同的含义,所以它准确地告诉你这一点。
您可以使用闭包代替:

而不是

hovers[i4].onfocus = function() {this.className += "Hovered";}

有:

hovers[i4].onfocus = function(self) 
{
    return function() {self.className += "Hovered";}
}(hovers[i4])

"this" might have different meaning in different context, so it tells you exactly that.
You can use closures instead:

Instead of

hovers[i4].onfocus = function() {this.className += "Hovered";}

have:

hovers[i4].onfocus = function(self) 
{
    return function() {self.className += "Hovered";}
}(hovers[i4])
—━☆沉默づ 2024-10-28 18:24:08

只是添加 @marcinkuzminski 在 @stephen Chung 答案中添加评论的示例

 /**
 * Model for ListBox
 *
 * @constructor <-- add this to remove the warning
 */
MyProject.ListBoxModel = function ( data ){

  this.data_  = data || {};   /* this gives warning */
};

来源:https://developers .google.com/closure/compiler/docs/js-for-compiler

Just to add example of what @marcinkuzminski added comment to @stephen Chung answer

 /**
 * Model for ListBox
 *
 * @constructor <-- add this to remove the warning
 */
MyProject.ListBoxModel = function ( data ){

  this.data_  = data || {};   /* this gives warning */
};

Source : https://developers.google.com/closure/compiler/docs/js-for-compiler

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文