javascript - 了解 call() 函数和对象

Question

我有一个模块化的 JS 项目，我需要进行调整。它使用原型(prototype)继承而不是类。这是有问题的代码:

hgManager.js 中的构造函数:

export function HGManager() {
    this.USER_ID = getURLParameter( "usr" ),
    this.GAME_ID = getURLParameter( "game" )
};

hgManager.js 中的 getData():

getData: function(a, b) {
        var c = this.API + "records/" + this.USER_ID + "/" + this.GAME_ID;
        this.xhrLoad( "GET", c, a, b )
    },

hgManager.js 中的 xhrLoad():

xhrLoad: function(a, b, c, d, e) {

        var f = new XMLHttpRequest;
        f.open(a, b, true), 
        e && f.setRequestHeader("Content-type", "application/json");

        var g = this;

        f.onload = function() {
            if (4 == f.readyState && f.status >= 400 && f.status <= 599) {                     return d.call(g, f);
            }

            else { 
                var a = JSON.parse( f.responseText ).response;

                return c.call(g, a, f)    
            }

        },

        f.onerror = function() {
            return d.call(g, f)
        },


        e ? f.send( JSON.stringify( e ) ) : f.send() 
    }

调用 hgManager.getData() 的函数:

loadPlayerData: function() { 
        var a = this;
        this.game.hgManager.getData(
            function( c ) { //param 1
                if ( null === c ) { 
                    return void console.log( "DataManager: Invalid response." ); //if there is no playerData
                }

                var d = JSON.parse( c.record );
                void 0 === d || null === d || void 0 === d.selectedCharacter ? (console.log("DataManager: No data on backend, looking for data on local storage."), d = a._getLocalStorageData(), null !== d ? (console.log("DataManager: Data on localstorage found. Saving this to backend."), a.game.playerData = d) : console.log("DataManager: No data on localstorage. Saving default data to backend."), a.savePlayerData()) : console.log("DataManager: Data loaded from backend.");
                var e = new Date,
                    f = e.getFullYear() + "-" + e.getMonth();
                d.lastMonthPlayed != f && (d.lastMonthPlayed = f, d.loyaltyPoints = [], console.log("DataManager: New month, reset loyalty points.")),
                a.game.playerData = d,
                a.game.hasShownLoyaltyMessage = a.game.playerData.loyaltyPoints.length > 0,
                a.game.hasShownPortalMessage = 9 == a.game.playerData.portalPieces.length
            },

            function() { //param 2
                console.log("DataManager: Error loading user data"), 
                data = a._getLocalStorageData(), 
                null !== data ? (console.log("DataManager: Data on localstorage found."), a.game.playerData = data) : console.log("DataManager: No data on localstorage.") 
            }
        ) 
    },

让我失望的代码是xhrLoad()中的return c.call(g, a, f)，以及对应的第一个参数函数>loadPlayerData().

• this.game.hgManager.getData(function( c ) { 中的参数'c'是从哪里来的？明明没有定义在这个范围内，所以我想象一下是 call() 的结果吗？

• loadPlayerData() 如何读取范围内似乎未定义的内容？

• 给定函数 this.game.hgManager.getData( function(c)，为什么我们要重新分配父对象并调用 getData()？什么是什么意图？

Answer 1

处理像 a, b, c 这样的变量是相当困难的，尤其是当它们在不同的范围内意味着不同的东西时。

但让我们尝试遵循代码并重命名 args 以添加一些意义:

xhrLoad: function(method, target, callbackSuccess, callbackError, e/* idk what is it*/) {}

getData: function(callbackSuccess, callbackError) {
        var target = this.API + "records/" + this.USER_ID + "/" + this.GAME_ID;
        this.xhrLoad( "GET", target, callbackSuccess, callbackError )
    },

this.game.hgManager.getData(
        function( response ) { //param 1 callbackSucess
                if ( null === response ) { 
                    return void console.log( "DataManager: Invalid response." ); //if there is no playerData
                }


            },
        function() { //param 2 callbackError
          //
        }

现在更容易理解了。

getData() 接受两个回调函数作为参数 - 一个用于成功响应，一个用于错误。第一个必须接受响应作​​为参数。这是来自 this.game.hgManager.getData(function( c ) { 的 c 并且它就在这里定义。因为它是一个函数的参数，所以没有必要定义它在全局范围内。

似乎，这里与类无关。这都是关于将函数作为参数传递的。