0

我正在尝试自学一些更好的 JS 开发实践，因此我正在 JavaScript 对象包装器中编写我最新的 VLE 小部件。

var TutorGroupPoints = {
    URL: 'http://staff.curriculum.local/frog/rewards.php',
    CurrentUser: UWA.Environment.user.id,
    Groups: { },
    Sorted: [ ],

    init: function() {
        /* retrieve all of the groups from Frog and store them in a variable */
        Frog.API.get('groups.getAll',
        {
            'onSuccess': function (data) { this.Groups = data; },
            'onError': function(err) { alert(err); }
        });         
    },

    yearClick: function(year) {
        alert( this.Groups );

        for (var i = 0; i < this.Groups.length; i++) {

            if (this.Groups[i].name.indexOf(year) == 0 && this.Groups[i].name.indexOf('/Tp') != -1) {
                var arrayToPush = { 'id': this.Groups[i].id, 'name': this.Groups[i].name };
                this.Sorted.push(arrayToPush);
            }
        }
    }

};

widget.onLoad = function(){
    TutorGroupPoints.init();

    $('#nav li a').click(function() {
        TutorGroupPoints.yearClick($(this).attr("id"));
    });
}

该Frog.API呼叫从我们的 VLE（虚拟学习环境）中检索有关学生/员工的信息。

我要做的是将此信息（在名为 的变量中检索data）存储在类范围变量中，以便与其他函数一起使用。

我以为我已经通过在Groups早期声明变量然后使用来做到这一点data = this.Groups，但是当我运行该yearClick函数时，它this.Groups只是显示为[object Object]where dataalerts 作为对象的负载，即[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object].

当我更改Groups为[ ]时，警报完全为空。

因此，我猜这是一个范围问题。如何data将Frog.API调用存储在可以与其他函数一起使用的变量中？以前我只使用过函数，即，'onSuccess': function (data) { someOtherFunction(data); },但我认为这不是一种非常干净或实用的方法吗？

提前致谢，

4

2 回答 2

1

您的this变量在 Frog 回调中是错误的。改用这个：

init: function() {
    var self = this;  // reference for use inside closures
    /* retrieve all of the groups from Frog and store them in a variable */
    Frog.API.get('groups.getAll',
    {
        'onSuccess': function (data) { self.Groups = data; },
        'onError': function(err) { alert(err); }
    });         
}

每当调用一个函数时，都会为其提供一个上下文（即this）。在您的回调中，您的this值可能是全局window对象。使用缓存变量可确保this在闭包内仍然可以访问原始（外部）。

于 2012-08-14T10:16:04.067 回答
1

这是一个常见的错误。作为一个函数，您的成功回调会更改this代码执行的上下文。因此，在您的回调中，this不再指向该TutorGroupPoints对象。

要么缓存this对函数外部外部的引用...

init: function() {
    var that = this; // <-- caching outer this
    Frog.API.get('groups.getAll', {
        'onSuccess': function (data) { that.Groups = data; },
        'onError': function(err) { alert(err); }
    });         
}

或者绑定一个通过闭包传入的副本，在这种情况下是一个立即执行的函数

init: function() {
    Frog.API.get('groups.getAll', {
        'onSuccess': (function(that) {
             return function (data) { that.Groups = data; }
        })(this), // <-- passing reference to outer this
        'onError': function(err) { alert(err); }
    });         
}
于 2012-08-14T10:16:21.683 回答