javascript - 对象中的变量范围

Question

我正在尝试自学一些更好的 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]，其中 data 作为对象负载发出警报，即 [object对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象]。

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

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

提前致谢，

Answer 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); }
    });         
}

或者绑定(bind)通过闭包传入的它的副本，在本例中是立即执行的函数

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); }
    });         
}