javascript - 从 jQuery.get() 内部调用对象方法

Question

所以我正在进入模块化 javascript，并且在尝试将 jQuery http 请求合并到我的模块中时遇到了障碍。我真的不知道该怎么调用它，所以如果标题有误导性，我深表歉意。

var object = {
    init: function() {
        this.loadRequest();
    },
    loadRequest: function() {
        $.get('https://myurl.com', function(data) {
            this.parseRequest.bind(this)
        });
    },
    parseRequest: function(data) {
        console.log(data);
    }
};

object.init();

当我尝试此操作时，Chrome 告诉我:

Uncaught TypeError: Cannot read property 'bind' of undefined

所以我想这与我如何将该方法绑定(bind)到我的对象有关，但我似乎不知道如何使其工作。

Answer 1

您对 this 在不同上下文中实际指代的内容存在一些误解。我强烈建议您阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this更好地了解 this 指的是什么，因为它是一个重要的概念。

这是对您的代码的修复。如果您想使用bind()

var object = {
    init: function() {
        this.loadRequest();
    },
    loadRequest: function() {
        $.get('https://myurl.com', this.parseRequest.bind(this));
    },
    parseRequest: function(data) {
        console.log(data);
    }
};

object.init();

JSFiddle:https://jsfiddle.net/rtbbc74m/

另一种常用的方法是var self = this(进一步阅读:How to use the self with object-oriented javascript and closures):

var object = {
    init: function() {
        this.loadRequest();
    },
    loadRequest: function() {
        var self = this;
        $.get('https://myurl.com', function(data) {
            self.parseRequest(data);
        });
    },
    parseRequest: function(data) {
        console.log(data);
    }
};

object.init();

JSFiddle:https://jsfiddle.net/tz680b1c/