'this'关键字在Javascript中返回对象原型中的窗口对象？ [英] The 'this' keyword returns the window object within an object's prototype in Javascript?

问题描述

我在类中有以下函数：

  MyClass.prototype.myFunction = function（item，args）
 {
 console.log（this）; 
} 
  

此函数是从我无权访问的外部库调用的更改。当它被调用时，控制台将this记录为窗口对象而不是实际的实例化对象。在搜索stackoverflow时，我发现了这个引用：

这是根据方法的调用方式设置的，而不是根据方法的编写方式设置的。所以对于obj.method（），这将在method（）中设置为obj。对于obj.method.call（x），method（）内部将设置为x。它取决于它的调用方式。这也意味着如果你把它作为一个回调传递到例如onclick，这将被设置为全局窗口对象，而不是你期望的。

我假设这是正在发生的事情我无法改变它的召唤方式。我的问题是，无论如何，无论如何调用对象的实例，它是否存在？

解决方案

这是与Javascript的常见混淆。很容易将它们视为扩展方法在其他语言中的行为，但在Javascript中，很容易更改这个的上下文，它通常是偶然完成的。 / p>

所以：

  MyClass.prototype.myFunction = function（args） 
 {
 //你希望[this]引用MyClass的实例
 this.somePropertyOfMyClass; 
}; 
  

然后你可以用以下方式调用：

  var x = new MyClass（）; 
 x.myFunction（args）
  

然而，在Javascript中调用函数的方式可以更改此指的是：

  var y = somethingElse（）; 
 x.myFunction.call（y，args）; //现在在myFunction [this]指y 
  

更有可能的是很多图书馆使用此链接和事件的上下文 - 容易犯错误。例如在jQuery中：

  var $ thing = $（'。selector'）; 
 $ thing.click（x.myFunction）; //现在在myFunction [this]指的是$ thing 
  

这个人可能并不明显以这种方式编写调用 x.myFunction 的jQuery会破坏它。他们可以解决这个问题（假设他们知道实现）：

  $ thing.click（function（）{x。 myFunction（）;}）; 
  

如果您希望 MyClass 具有弹性要像这样调用然后不要使用 prototype - 而是使用对象的属性：

  function MyClass（）{
 var self = this; 
 // ... ... 
 this.myFunction = function（args）
 {
 // [self]将始终引用MyClass 
 self的当前实例。 somePropertyOfMyClass; 
}; 
} 
  

请注意，更现代的浏览器Javascript引擎非常适合优化这些类型的电话，所以我不会使用原型作为优化，除非您已经确定需要额外的性能。

I have the following function in a class:

MyClass.prototype.myFunction = function(item, args) 
{       
    console.log(this);
}

This function is called from an external library that I don't have access to change. When it's called, the console is logging "this" as the window object instead of the actual instanced object. Upon searching stackoverflow I found this quote:

this is set according to how the method is called, and not according to how the method is written. So for obj.method(), this will be set to obj inside of method(). For obj.method.call(x), this inside of method() will be set to x. It is determined by how it's called. What that also means is that if you pass it as a callback to e.g. onclick, this will be set to the global window object rather than what you expect.

I'm assuming this is what is going on and I can't change the way it's called. My question is, is there anyway then to get the instance of the object its in regardless of how it's called?

解决方案

This is a common confusion with Javascript. It's easy to think of them as behaving like extension methods do in other languages, but in Javascript it's so easy to change the context of this that it is often done by accident.

So:

MyClass.prototype.myFunction = function(args) 
{
    // You expect [this] to refer to an instance of MyClass
    this.somePropertyOfMyClass;
};

Then you can call this with:

var x = new MyClass();
x.myFunction(args)

However the way that a function is called in Javascript can change what this refers to:

var y = somethingElse();
x.myFunction.call(y, args); // now in myFunction [this] refers to y

More likely is that a lot of libraries use the this context for chaining and events - making mistakes easy to make. For instance in jQuery:

var $thing = $('.selector');
$thing.click(x.myFunction); // now in myFunction [this] refers to $thing

It probably isn't obvious to the person writing the jQuery that calling x.myFunction in this way will break it. They can workaround that (assuming that they know about the implementation) with:

$thing.click(function() { x.myFunction(); }); 

If you want your MyClass to be resilient to being called like this then don't use prototype - instead use a property of the object:

function MyClass() {
    var self = this;
    // ...
    this.myFunction = function(args) 
    {
        // [self] will always refer to the current instance of MyClass
        self.somePropertyOfMyClass;
    };
}

Note that the more modern browser Javascript engines are pretty good as optimising these kinds of calls, so I wouldn't use the prototype just as an optimisation unless you already identified that you need the additional performance.

这篇关于'this'关键字在Javascript中返回对象原型中的窗口对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！