“这个”的使用是指“这个”。 JavaScript 让我感到困惑

发布于 2024-08-19 12:36:04 字数 306 浏览 7 评论 0原文

使用 JavaScript 时，令人困惑的事情之一是使用 this 时。

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

但是，当处理多个对象时，尤其是 this 的事件上下文发生变化时，跟踪/理解会变得混乱。

因此，如果有人有更好的意见/指南/想法/更好的实践，请分享。另外我想知道使用 this 是否具有任何（性能）优势或什么？

原文

Working with the JavaScript one of the confusing thing is when using this

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

However when dealing with multiple object and especially events context of this changes and becomes confusing to keep track/understand.

So if anybody has better inputs/guidelines/thoughts/better practices, please share. Also I would like know if using this gives any (performance) advantage or what?

分享到QQ

分享到微博

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

发布评论

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

心清如水 2024-08-26 12:36:04

这与性能无关，而是与访问对象特定实例的属性有关：-

x.init()

如果您未在函数中使用 this，则不会显示“test”。

实际上，上面的行与：-

x.init.call(x);

当函数执行时，call 使用中的第一个参数被分配给 this。

现在考虑：-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

现在您在警报中什么也没有得到。这是因为上面的内容是有效的： -

fn.call(window);

在浏览器托管的 Javascript 中，window 对象与全局对象同义。当“原始”调用函数时，this 默认为全局对象。

经典的错误是做这样的事情：-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

但是这不起作用，因为附加到 onclick 事件的函数是由浏览器使用如下代码调用的：-

onclick.call(theDOMElement)

因此，当函数运行时 this 是'不是你想的那样。

对于这种情况，我通常的解决方案是： -

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

请注意，elem = null 是 IE 内存泄漏的解决方法。

It's not about performance, it's about accessing a property of a specific instance of an object:-

x.init()

Would not display 'test' if you hadn't use this in the function.

Effectively the above line is the same as:-

x.init.call(x);

the first paramater in the use of call is assigned to this when the function is executed.

Now consider:-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

Now you get nothing in the alert. This because the above is effectively:-

fn.call(window);

In browser hosted Javascript the window object is synonymous with the global object. When a function is called "in the raw" then the this defaults to the global object.

The classic error is doing something like this:-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

However this doesn't work because the function attached to the onclick event is called by the browser using code like:-

onclick.call(theDOMElement)

Hence when the function is running this isn't what you think it is.

My usual solution to this situation is:-

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

Note the elem = null is IE memory leak work-around.

回复收藏 0 原文