javascript - 在这段 JavaScript 代码中，为什么有些函数可以访问内部变量而有些则不能？

Question

我有以下代码：

var dp = dp || {
    VERSION : '0.00.02',
    startApp : function() {
        $(app.init);
        $(app.start);
    }
};
dp.startApp();

它在下面调用 app.init 和 app.start ：

var app = app || {};

app.init = function() {
    this.baseElement = $('div#app');
    $('body').css('background-color', 'beige');
};

app.start = function() {
    //this.baseElement.html('showing this'); //this works
    //this.show(); //error: show is not a function
    app.show(); //error: show is a function, but baseElement is undefined
};

app.show = function() {
    this.baseElement.html('showing this');
};

为什么app.start这样做：

• 第一线工作
• 第二行显示它不是函数
• 第三行说 baseelement 是未定义的

Answer 1

由于您将函数传递给document.ready，因此 jQuery 将调用它们并this设置为document。这意味着您当然可以设置任意属性document，但它不是 jQuery 对象，因此它没有您正在调用的方法。

你可以试试这个：

$(dp.startApp) //Since `this` doesn't matter here

和

startApp : function() {
    app.init(); //Calling the functions as property of `app`, will make `this` set to `app`
    app.start();
}

我想您在这里缺少的最大的事情是绑定this是动态的，并且取决于您调用函数的方式，而不是您如何定义它们。

Answer 2

$(app.init);调用app.init函数但接收者不是app对象。

因此baseElement变量未设置在init正确的对象 ( app) 中。

你可以试试$(function(){app.init();app.start();});

Answer 3

这就是我将如何构建您的代码：

$(function() {

    app = {
        init: function() {
            this.version = '0.00.02';
            this.baseElement = $("div#app");
            this.bindEvents();
            this.start();
        },
        bindEvents: function() {
            $('body').css('background-color', 'beige');
        },
        start: function() {
            this.show();
        },
        show: function() {
            this.baseElement.html('showing this');
        }
    }

});

$(document).ready(function() {
    app.init();
});

编辑：我知道这并不能回答你的问题，但它清理了一点，让你更容易理解正在发生的事情..