javascript 回调函数中的javascript类变量范围

javascript class variable scope in callback function

提问by elranu

Possible Duplicate:
In Javascript, why is the “this” operator inconsistent?

可能的重复：
在 Javascript 中，为什么“this”运算符不一致？

I have the following class:

我有以下课程：

function Chat(some, nick, url) {
    this.socket = null;
    this.Nickname = nick;
    this.Url = url;

    this.Connect = function () {
        socket = io.connect(this.Url);
        socket.on('connect', function (data) {
            var p = this.Nickname; //this.Nickname is undefined why? 
            // how can I acess to the Nickname variable or function?
        }
    };
}

How can I acces the instance variable or function from the connect callback function?

如何从连接回调函数访问实例变量或函数？

回答by hugomg

The simplest solution is to use the thattrick

最简单的解决方案是使用that技巧

var that = this; //that is a normal variable
                 //so it is lexically scoped
                 //and can be used in inner functions

socket.on('connect', function(data){
    var p = that.NickName;
});

Another possibility is explicitily binding the correct this to the callback function

另一种可能性是将正确的 this 显式绑定到回调函数

socket.on('connect', function(data){
    var p = this.Nickname;
}.bind(this));

The thattrick has the advantage of nesting to as many callbacks as you want and the bind version has the advantage of allowing you to still use "this" inside.

该that技巧的优点是可以根据需要嵌套尽可能多的回调，而绑定版本的优点是允许您仍然在内部使用“this”。

A disadvantage of the bind method is that it is not supported in IE<=8 so you might need to use a shim if you need to support ancient browsers.

bind 方法的一个缺点是它在 IE<=8 中不受支持，因此如果您需要支持旧浏览器，则可能需要使用 shim。

edit: This answer is a bit old. Nowadays you probably don't need to worry about IE6 anymore and you might be able to use fat arrow syntax, which doesn't overwrite the this.

编辑：这个答案有点旧。现在您可能不再需要担心 IE6，并且您可以使用粗箭头语法，它不会覆盖this.

回答by JaredPar

The problem is the thisvalue in javascript can change depending on how the callback is invoked. The easiest way to work around this is to save the original thisobject into a local named self. The local is captured in the callback and can be used to access member values. For example.

问题是thisjavascript 中的值可以根据调用回调的方式而改变。解决此问题的最简单方法是将原始this对象保存到名为self. 本地在回调中捕获，可用于访问成员值。例如。

function Chat(some, nick, url) {
    var self = this;  
    this.socket = null;
    this.Nickname = nick;
            this.Url = url;

    this.Connect = function () {
        socket = io.connect(this.Url);
        socket.on('connect', function (data) {
            var p = self.Nickname; //this.Nickname is undifined why? 
             // how can I acess to the Nickname variable or function?
        }
    };
  }

回答by kemiller2002

You can change this: var p = this.Nickname;to this var p = nick;

你可以改变这个： var p = this.Nickname;到这个var p = nick;

Your problem is that thisrefers to the local scope of the function you are using in the callback. It's not the scope of the outer function.

您的问题是this指您在回调中使用的函数的本地范围。这不是外部函数的范围。

回答by u.k

"this" is representing your function in that scope.

“this”代表您在该范围内的功能。

try :

尝试 ：

function Chat(some, nick, url) {
    this.socket = null;
    this.Nickname = nick;
        this.Url = url;

    var that = this;

    this.Connect = function () {
        socket = io.connect(this.Url);
        socket.on('connect', function (data) {
            var p = that.Nickname; //this.Nickname is undifined why? 
            // how can I acess to the Nickname variable or function?
        }
    };
}

Note the assignment of "this" into "that"

注意“this”到“that”的赋值

回答by Doug Moscrop

JavaScript has closureswhich are, to say the least, nifty.

JavaScript 有闭包，至少可以说，很漂亮。

Have a look at this question:

看看这个问题：

How do JavaScript closures work?

JavaScript 闭包是如何工作的？

It should help you understand why everyone is telling you to put a var something = thisabove the function and use somethinginside of it to maintain a reference to the original this.

它应该可以帮助您理解为什么每个人都告诉您var something = this在函数上方放置 a并something在其内部使用以维护对原始this.

回答by Matt H

Here's a fiddle that shows using the local copy of this:

这是一个显示使用本地副本的小提琴：

http://jsfiddle.net/k7vC6/1/

http://jsfiddle.net/k7vC6/1/

In that instance, thisand selfare the same thing, but using the selfis safe.

在那种情况下，this和self是同一件事，但使用self是安全的。