JavaScript报错TypeError: this.requestSession不是函数问题求助

我并非前端或JavaScript开发者，在集成Apple Pay时，尝试通过按钮点击事件调用后端API，出现报错TypeError: this.requestSession is not a function，相关代码如下，恳请帮忙排查问题根源：

相关代码 #

ACC.payDirect 对象代码 #

ACC.payDirect = {
    _autoload: ['payDirect'],

    session: null,
    payDirect: function () {
        let button = $('#mbutton');
        if (button.length === 0) {
            return;
        }

        $('#mbutton').on('click', this.onButtonClicked.bind());

    },

    onButtonClicked: function () {
        if (!Session) {
            return;
        }

        var request =  getCartPaymentRequest();
        this.requestSession("1234"); //调用此函数时报错
        session.begin();
    },


    requestSession: function (validationURL) {
        return new Promise(function (resolve, reject) {
            $.ajax({
                type: 'POST',
                url: ACC.config.encodedContextPath + '/checkout/request_session',
                data: JSON.stringify({ validationURL: validationURL }),
                dataType: 'json',
                contentType: 'application/json',
                success: resolve,
                error: reject
            });
        });
    },
};

getCartPaymentRequest 函数代码 #

function getCartPaymentRequest() {
    var result = "";
    $.ajax({
        type: 'GET',
        url: ACC.config.encodedContextPath + '/checkout/payment-request',
        dataType: 'json',
        async: false,
        success: function (response) {

            result = response;
        },

    });
    return result;
}

报错信息 #

TypeError: this.requestSession is not a function. (In 'this.requestSession("1234")', 'this.requestSession' is undefined)

我确认自己犯了基础错误，但无法找到requestSession函数无法被识别的原因。

问题根源与修复方案 #

核心问题：this指向错误 #

报错的直接原因是事件绑定未正确设置上下文：
你在payDirect方法中绑定点击事件时，使用了this.onButtonClicked.bind()，这里bind()未传入任何参数，导致onButtonClicked函数执行时，内部的this不再指向ACC.payDirect对象，而是指向全局对象（浏览器环境下为window），而window上没有requestSession方法，因此报错。

修复步骤 #

修改事件绑定代码，将当前ACC.payDirect对象作为上下文传入bind()：

// 原代码
$('#mbutton').on('click', this.onButtonClicked.bind());

// 修改后
$('#mbutton').on('click', this.onButtonClicked.bind(this));

这样onButtonClicked函数内的this就会正确指向ACC.payDirect，就能找到requestSession方法了。

额外建议（非直接报错原因，但需注意） #

1. 变量大小写问题：onButtonClicked中的if (!Session)，你定义的是session: null，这里应该改成if (!this.session)，否则会因为未定义Session变量导致逻辑错误。
2. 同步AJAX问题：getCartPaymentRequest中使用了async: false同步AJAX，这会阻塞浏览器主线程，影响页面响应。建议改成异步Promise方式，示例如下：

function getCartPaymentRequest() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: 'GET',
            url: ACC.config.encodedContextPath + '/checkout/payment-request',
            dataType: 'json',
            success: resolve,
            error: reject
        });
    });
}

// 调用时使用异步方式
onButtonClicked: function () {
    if (!this.session) {
        return;
    }

    getCartPaymentRequest().then(function(request) {
        this.requestSession("1234").then(function() {
            this.session.begin();
        }.bind(this));
    }.bind(this));
},

内容的提问来源于stack exchange，提问作者Umesh Awasthi