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

所以我想这与我如何将方法绑定到我的对象有关，但我似乎无法弄清楚如何让它工作。

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/

从jQuery.get（）里面调用对象方法

1 个答案: