在javascript类中调用函数答案

【问题标题】：Calling function inside javascript class在javascript类中调用函数
【发布时间】：2013-10-25 05:53:26
【问题描述】：

我有以下 javascript 类（真的不知道它是否是最好的解决方案）并且我不想调用在这个类中定义的函数，而不是在同一个类中定义的另一个函数。

step1 = {
    init: function(){
        this.events();
    },

    events: function(){
        fct = this; // i stored this in a variable so that i don't lose it
        $(document).on('click', '.form-line li', function(e) {
            e.preventDefault();
            fct.changeCategoryValue($(this));
        });

        $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
        });
    },

    changeCategoryValue: function(el) {
        cat = el.hasClass('has-sub') ? '' : el.data('id');
        title = el.hasClass('has-sub') ? '' : el.data('title');
        $('#cat-title').val(title);
        $("input[name='category']").val(cat);
    }

如您所见，我不想调用 changeCategoryValue 函数，但如果我用 this.changeCategoryValue 调用它，它将不起作用。关于如何改进代码的任何建议？

【问题讨论】：

我看不出问题出在哪里。是否有错误，或者您正在请求优化？ fct = this 和之后的 function(){ fct.changeCategoryValue } 是典型的。
你是对的，没有问题。这就是我要求改进的原因。我不知道，但我实施的解决方案似乎不正确（通常）。

标签： javascript oop this

【解决方案1】：

或者，您可以更改函数回调的范围：

$(document).on('click', '.form-line li', function(e) {
    e.preventDefault();
    this.changeCategoryValue($(e.currentTarget));
}.bind(this));

使用.bind(this)，因此function(e){...} 的范围将是step1 的实例，而不是$('.form-line li',document)。现在，要仍然定位单击/选择的.form-line li，您可以通过e.currentTarget 访问该对象。

【讨论】：

@TudorRavoiu 哎呀，我遗漏了最重要的细节！答案已更新。
好的，现在可以了。我不得不在 changeCategoryValue 函数中进行一些修改，因为看起来 $(e.target) 实际上是 "li" 内部的 "a" 元素，而不是单击的 "form-line li" 元素。
@TudorRavoiu 在你的情况下可能是 e.currentTarget 而不是 e.target - 我总是把它们搞混！

【解决方案2】：

尝试使用：

step1.changeCategoryValue($(this));

【讨论】：

好的，这可行，但它也是另一种解决方案吗？这样如果类名发生变化而不是调用不会改变？

【解决方案3】：

你已经为类添加了属性，为什么不使用这样的类名来调用它：

step1.changeCategoryValue('any_element_ref');

【讨论】：

【解决方案4】：

你可以创建一个合适的对象。如果你不想的话，这甚至允许你在构造函数中调用 init。

function Step() { this.init(); }

Step.prototype.init = function() { this.events(); };

Step.prototype.events = function() {
    var self = this;
    $(document).on('click', '.form-line li', function(e) {
        e.preventDefault();
        self.changeCategoryValue($(this));
    });

    $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
    });
};

Step.prototype.changeCategoryValue = function(el) {
    cat = el.hasClass('has-sub') ? '' : el.data('id');
    title = el.hasClass('has-sub') ? '' : el.data('title');
    $('#cat-title').val(title);
    $("input[name='category']").val(cat);
};

var step1 = new Step();

【讨论】：

总的来说这是最好的，但仍然有 OP 不想要的 self 变量（在他们的实现中是 fct）。
如果 OP 担心使用 self 它是一个相当标准的 javascript 模式 stackoverflow.com/questions/962033/…
我同意，根据我对问题本身的评论，但是 OP 希望看到替代方案。

【解决方案5】：

你可以尝试像这样使用clojure：

step1 = (function(){
            function events(){
                $(document).on('click', '.form-line li', function(e) {
                    e.preventDefault();
                    changeCategoryValue($(this));
                });

                $(document).on('click', '.alert-form .confirm', function(e) {
                    e.preventDefault();
                    $.fancybox.close(true);
                });
            }
            function changeCategoryValue(el) {
                cat = el.hasClass('has-sub') ? '' : el.data('id');
                title = el.hasClass('has-sub') ? '' : el.data('title');
                $('#cat-title').val(title);
                $("input[name='category']").val(cat);
            }
            function init(){
                events();
            }

            return {
                init:init,
                changeCategoryValue: changeCategoryValue
            }
        })()

【讨论】：