Javascript OOP 继承不起作用

Question

所以我正在编写一些使用 augment 进行继承的东西，出于某种原因我可以在其中运行 this.setButtons(type) 和 console.log(this.buttons)方法，但是当我运行我的 this.getButtons() 时，它返回为未定义，即使 getButtons 只是返回 this.buttons。任何帮助将不胜感激。我将发布我目前拥有的所有代码，因为也许我没有正确继承。提前谢谢你。

var ContextMixin = function () {};
ContextMixin.prototype = {
    createElements: function (el, mode, type) {
        var m;
        if (mode == 'exact') {
            $("#" + el).append("<ul id='contextmenu'>");
        } else {
            $(el).each(function () {
                m = $(this).append("<ul id='contextmenu'>");
            });
            $('body').append(m);
        }
        $("#contextmenu").css({
            'position': 'absolute',
            top: 13,
            left: 13
        });
        var new_buttons = this.getButtons();
        $.each(this.buttons['buttons'], function () {
            m.append("<li id='" + this + "'>" + this + "</li>");
        });
    },
    attachEvents: function () {
        functions = this.getFunctions(type);
        buttons = this.getButtons();
        for (index in buttons['buttons']) {
            addEvent(buttons['buttons'][index], this.functions[index][0], this.functions[index][1]);
        };
    },
    setFunctions: function (type) {
        var callback = {
            success: function (msg) {
                this.functions = msg;
            },
            failure: function () {
                alert('Error getting functions')
            }
        };
        $.ajax({
            type: 'GET',
            url: 'function_list.php?type=' + type,
            success: function (msg) {
                this.functions = msg;
            }
        });
    },
    getFunctions: function () {
        return this.functions;
    },
    setType: function (value) {
        this.type = value;
    },
    getType: function () {
        return this.type;
    },
    setButtons: function (type) {
        $.ajax({
            type: 'GET',
            url: 'button_list.php?type=' + type,
            success: function (reply) {
                this.buttons = reply;
            }
        });
    },
    getButtons: function () {
        return this.buttons;
    }
}

function createMenu(el, type, mode) {
    this.setButtons(type);
    this.setFunctions(type);
    this.createElements(el, mode, type);
}

augment(createMenu, ContextMixin);

function augment(receivingClass, givingClass) {
    if (arguments[2]) { //Only give certain methods.
        for (var i = 2, len = arguments.length; i < len; i++) {
            receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
        }
    } else { //Give all methods
        for (methodName in givingClass.prototype) {
            if (!receivingClass.prototype[methodName]) {
                receivingClass.prototype[methodName] = givingClass.prototype[methodName];
            }
        }
    }
}

Answer 1

因为 AJAX 请求的回调中的 this 不是您的对象。

这是一个常见的修复...

setButtons: function(type) {
    var self = this;  // keep a reference to this
    $.ajax({
        type: 'GET', 
        url: 'button_list.php?type=' + type,
        success: function(reply) {
            self.buttons = reply; // use the reference here
        }
    });
},

...但更好的解决方法是使用 $.ajax 请求的 context: 属性...

setButtons: function(type) {
    $.ajax({
        type: 'GET', 
        context: this,  // set the context of the callback functions
        url: 'button_list.php?type=' + type,
        success: function(reply) {
            this.buttons = reply;
        }
    });
},