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 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); },，但我认为这不是一个非常干净或实用的方法吗？

提前致谢，

Answer 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。

Answer 2

这是一个常见的错误。作为函数，您的成功回调会更改代码执行的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); }
    });         
}

对象中的变量范围

2 个答案: