Javascript API : Function outside of scope

Question

我收到以下错误:未定义 SyncNavigationSetCssToState

$(function () {
    var NavigationSetApi = {
        SyncNavigationSetCssToState: function (navigationSet) {
            var navigationSetContent = navigationSet.find(".navigation-set-content");
            var navigationSetHeaderButton = navigationSet.find(".navigation-set-header-button");

            if (navigationSetContent.is(":visible"))
                navigationSetHeaderButton.removeClass("closed").addClass("open");
            else
                navigationSetHeaderButton.removeClass("open").addClass("closed");
        },

        GetAllNavigationSets: function () {
            return $(".navigation-set");
        },

        SyncAllNavigationSetCssToState: function () {
            this.GetAllNavigationSets().each(function () {
                SyncNavigationSetCssToState($(this));
            });
        }
    }

    NavigationSetApi.SyncAllNavigationSetCssToState();
}

我不知道如何从 SyncNavigationSetCssToState 的 each() 函数中访问 SyncNavigationSetCssToState。请问如何从这里引用主要的 api 对象？

Answer 1

您在调用 SyncNavigationSetCssToState 时引用了 this

用NavigationSetApi.SyncNavigationSetCssToState替换你的调用

$(function () {
    var NavigationSetApi = {
        SyncNavigationSetCssToState: function (navigationSet) {
            var navigationSetContent = navigationSet.find(".navigation-set-content");
            var navigationSetHeaderButton = navigationSet.find(".navigation-set-header-button");

            if (navigationSetContent.is(":visible"))
                navigationSetHeaderButton.removeClass("closed").addClass("open");
            else
                navigationSetHeaderButton.removeClass("open").addClass("closed");
        },

        GetAllNavigationSets: function () {
            return $(".navigation-set");
        },

        SyncAllNavigationSetCssToState: function () {
            this.GetAllNavigationSets().each(function () {
                NavigationSetApi.SyncNavigationSetCssToState($(this));
            });
        }
    }

    NavigationSetApi.SyncAllNavigationSetCssToState();
}

---

扩展关于实例的评论...

以上只是一个简单的 Javascript 对象。 this 引用对象 NavigationSetApi 以保持简单。但是，当您调用 this.GetAllNavigationSets().each 时，each 现在正在使用 Function.prototype.call 设置 this

如果您要使用 NavigationSetApi 作为实例，您首先需要将其设为函数(如果您了解任何 OO 语言，请考虑类)

这就是你定义它的方式:

function NavigationSetApi(){

}

NavigationSetApi.prototype = {
    SyncNavigationSetCssToState: function (navigationSet) {
        var navigationSetContent = navigationSet.find(".navigation-set-content");
        var navigationSetHeaderButton = navigationSet.find(".navigation-set-header-button");

        if (navigationSetContent.is(":visible"))
            navigationSetHeaderButton.removeClass("closed").addClass("open");
        else
            navigationSetHeaderButton.removeClass("open").addClass("closed");
    },

    GetAllNavigationSets: function () {
        return $(".navigation-set");
    },

    SyncAllNavigationSetCssToState: function () {
        //From Blake Simpson's answer
        var api = this;
        this.GetAllNavigationSets().each(function () {
            api.SyncNavigationSetCssToState($(this));
        });
    }
};

然后调用它你会使用

var instanceApi = new NavigationSetApi();
instanceApi.SyncAllNavigationSetCssToState();

在这种情况下，您正在设置对象的原型(prototype)，然后在您使用 new

创建实例时将其“应用”到实例

有趣的是，您还可以向大多数事物的原型(prototype)添加事物，例如字符串或日期

例子:

String.prototype.logAWord = function(word){
    console.log(word);
};

// "" is an instance of String
// Logs "Hello"
"".logAWord("Hello");