javascript - 为什么这个 Javascript 对象在 $(document).ready 之后没有超出范围？

Question

我有一些可以操作某些 DOM 元素的有效 Javascript。问题是，我不明白为什么它有效，这从来都不是一件好事。我正在努力学习更多关于面向对象的 javascript 和 javascript 最佳实践，所以组织可能看起来有点奇怪。

基本上，我将两个操作 DOM 的方法包装在 CSContent 对象中。我在 $(document).ready 中创建了该对象的实例 content 并将一些事件绑定(bind)到 content 中的函数。但是，我对如何在 $(document).ready 退出后仍然可以调用这些函数感到困惑。那岂不是说content已经超出范围，功能不可用了？无论如何，这是代码:

function CSContent() {
    var tweetTextArea = document.getElementById('cscontent-tweet'),
        tweetTextElement = document.getElementById('edit-cscontent-cs-content-tweet'),
        charCountElement = document.getElementById('cscontent-tweet-charactercount');

    this.toggleTweetTextarea = function () {
      $(tweetTextArea).slideToggle();
    };

    this.updateTweetCharacterCount = function () {
        var numOfCharsLeft = 140 - tweetTextElement.value.length;
        if (numOfCharsLeft < 0) {
            $(charCountElement).addClass('cscontent-negative-chars-left');
        }
        else {
            $(charCountElement).removeClass('cscontent-negative-chars-left');
        }
        charCountElement.innerHTML = '' + numOfCharsLeft + ' characters left.';
    };
}



$(document).ready(function () {
    var content = new CSContent();
    //If the twitter box starts out unchecked, then hide the text area
    if ($('#edit-cscontent-cs-content-twitter:checked').val() === undefined) {
        $('#cscontent-tweet').hide();
    }

    $('#edit-cscontent-cs-content-twitter').change(content.toggleTweetTextarea);
    //Seems wasteful, but we bind to keyup and keypress to fix some weird miscounting behavior when deleting characters.
    $('#edit-cscontent-cs-content-tweet').keypress(content.updateTweetCharacterCount);
    $('#edit-cscontent-cs-content-tweet').keyup(content.updateTweetCharacterCount);
    content.updateTweetCharacterCount();
});

Answer 1

大人，这称为闭包:局部变量content 将在$(document).ready 退出后保留在内存中。这也是内存泄漏的一个已知原因。

简而言之，您将此函数绑定(bind)到 DOM 元素的事件监听器，然后 JavaScript 垃圾收集器知道它应该保持局部变量不变。你不能直接调用它(在函数之外)，除非事件被触发。对于一些，如果您真的想在之后调用该函数(例如，使用 element.click() 来模拟点击)，您可以“手动”执行此操作。