javascript - 这适用于某些功能，但不适用于其他功能

Question

通常在编写 jQuery 时我只使用函数。这次我想给它一些最佳实践，所以我遵循了一个教程。 javascript 本身似乎是正确的，但我在调用某些函数时遇到了一些问题。

 jQuery.noConflict();
    (function($j) {
    'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function() {
        var me = this;

        $j(window).load(function() {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function() {
        this.getPrimaLink();
        this.onCloseDialog();
        this.triggerDialog();
        this.openLink();
    },

    getPrimaLink: function(){
        if($j('#order-data').is(":visible")){
            $j( ".content-header" ).append($j( "#findPrimaLink" ));
            $j('#findPrimaLink').show();
        } 
    },

    onCloseDialog: function(){
        $j('#dialog').bind('dialogclose', function(event) {
            $j( ".content-header" ).append($j( "#findPrimaLink" ));
            $j('#findPrimaLink').show();
        });
    },

    triggerDialog: function(){
        $j("[title='Create New Customer']").click(function(){
            $j('#findPrimaLink').show();
        >>>>>   this.openDialog(); <<<<<<
        })
    },

    openLink: function(){
        $j('#findPrimaLink').click(function(){
        >>> this.openDialog();   <<<<<

        });
    },

    openDialog: function(){
        $j( "#dialog" ).dialog({
                height: 'auto',
                width: 350,
                modal: true,
                resizable:false,
        }); 
    },


};

$j(document).ready(function($j) {
    var site = new Site();
    site.start();
});

 })(jQuery); 

在启动和附加函数中，我可以通过在函数前面放置“this”来调用每个函数。但是当我尝试从 openLink() 和 triggerDialog() 调用 openDialog() 时，我得到 - 未捕获的类型错误:未定义不是函数。

这是为什么？我应该如何解决它？

Answer 1

对于您遇到问题的两个函数，您尝试在 jQuery 函数内部使用 this，因此 this 的范围是 DOM元素，而不是 Site class。

triggerDialog: function(){
    var site = this;

    $j("[title='Create New Customer']").click(function(){
        $j('#findPrimaLink').show();
        site.openDialog();
        console.log(this); //remove this for production, but you can see that `this` points to a DOM element
    })
},

openLink: function(){
    var site = this;

    $j('#findPrimaLink').click(function(){
        site.openDialog();
    });
},

要了解为什么会发生这种情况，您应该阅读有关 javascript 闭包的内容。 Here和 here .

附注openDialog 函数后面有一个额外的逗号。

P.P.S。还值得注意的是，这正是您在 start 方法中所做的事情。

var me = this;

$j(window).load(function() {
    me.windowLoaded = true;
});