Javascript API:范围之外的函数

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

您this在呼叫时正在引用SyncNavigationSetCssToState

替换你的电话 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现在this使用Function.prototype.call进行设置

如果您要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();

在这种情况下,您将设置对象的原型,然后在使用时将其"应用"到实例 new

有趣的是,您还可以将事物添加到大多数事物的原型中,例如String或Date

例:

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

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