Question

我正在尝试使用javascript更加面向对象的方法，并通过使用class.prototype实现了一些带有某些方法的类。

但我有一个问题。

我尝试使用myclass中的方法作为ajax调用的成功函数。问题是当ajax回调时，我不能使用this方法。即：

MyClass.prototype.myMethod = function(data)
{
this.data = data; /* in here this is the window object */
}
var myClass = new MyClass();
$.ajax:
    success:myClass.myMethod;

我做错了吗？

编辑：完整功能尝试

我不是我

方法

    function MyClass()
{
    this.name="myclass";
};

MyClass.prototype.print = function()
{
    alert(this.name);
};

var myAjax = function(context_,func)
{
    $.ajax({
        url:"www.google.com",
        type: "GET",
        context:context_,
        complete:function(data){
            func(data);
        }
    });
};


var refreshGroups = function(groups)
{
    var myClass = new MyClass();
    myAjax(myClass,myClass.print);
    return;
}

结果：警告为空

Answer 1

“问题是当ajax回调时，我无法使用该方法。”

使用context:来电的$.ajax属性。

$.ajax({
    url:...,
    context: myClass,
    success: myClass.myMethod
});

或使用$.proxy ...

$.ajax({
    url:...,
    success: $.proxy(myClass, 'myMethod')
});

鉴于已更新的代码，您需要更改func(data)从您使用context:设置的调用上下文中调用，因此您执行this.func(data) ...

var myAjax = function(context_,func)
{
    $.ajax({
        url:"www.google.com",
        type: "GET",
        context:context_,
        complete:function(data){
            this.func(data);
        }
    });
};

...但是既然你没有在匿名函数中做任何事情，除了调用你传递的函数，并传递参数，你就可以complete:func ......

var myAjax = function(context_,func)
{
    $.ajax({
        url:"www.google.com",
        type: "GET",
        context:context_,
        complete:func
    });
};

... func的调用上下文将设置为您传递的对象，data参数仍将传递给函数。

当然，这确实不是你的代码工作方式的问题，因为你已经对你的上下文有一个封闭的引用，所以你也可以跳过传递func，然后把它弄好来自你的对象...

var myAjax = function(context_) // <-- no function argument needed
{
    $.ajax({
        url:"www.google.com",
        type: "GET",
        complete:function(data){
            context_.print(data);
        }
    });
};

var refreshGroups = function(groups)
{
    var myClass = new MyClass();
    myAjax(myClass); // <--just pass the object
    return;
}

Answer 2

JavaScript中的方法并没有真正绑定到对象属性;他们只是价值观。当您引用这样的函数时，设置ajax调用时涉及this的事实完全丢失。

有一个新的API可以提供帮助：

success: this.myMethod.bind(this) // or myClass.myMethod.bind(myClass) ...

.bind()方法（来自新浏览器中的函数原型）返回另一个函数，该函数将调用您的方法，确保在该调用上正确设置this。< / p>

MDN网站上有一个polyfill版本的“绑定”（还有其他版本）。或者，你可以明确地做同样的事情：

var obj = this;
$.ajax({
  // ...
  success: function() { obj.myMethod(); },
  // ...
});

需要“obj”变量来保存this的外部上下文值。

Javascript对象和异步调用

2 个答案: