Dlaczego ten obiekt JavaScript nie wykracza poza zasięg po $ (document) .ready?

Question

Mam trochę pracy z Javascriptem, który manipuluje niektórymi elementami DOM. Problem polega na tym, że nie rozumiem, dlaczego to działa, co nigdy nie jest dobre. Próbuję dowiedzieć się więcej na temat zorientowanych obiektowo javascript i najlepszych praktyk javascript, więc organizacja może wydawać się trochę dziwna.

Zasadniczo zawijam dwie metody, które manipulują DOM wewnątrz obiektu CSContent. Tworzę instancję tego obiektu, content w $(document).ready i wiążę niektóre zdarzenia z funkcjami w content. Nie jestem jednak pewien, w jaki sposób funkcje te można jeszcze wywoływać po wyjściu z trybu $(document).ready. Czy to nie oznacza, że ​​content wykracza poza zakres, a jego funkcje nie są dostępne? W każdym razie, oto kod:

Answer 1

Zakładam, że zastanawiam się, dlaczego obsługi zdarzeń jak

$('#edit-cscontent-cs-content-twitter').change(content.toggleTweetTextarea); 

pracy?

Cóż, nie przechodzisz content jako funkcja obsługi zdarzeń, ale funkcja ta jest zawarta w content.toggleTweetTextarea. A to odniesienie będzie nadal istnieć po tym, jak content już nie istnieje. Nie ma w tym nic specjalnego. Właśnie przypisałeś obiekt (funkcję) do innej zmiennej. Dopóki istnieje co najmniej jedno odniesienie do obiektu, obiekt nie będzie zbierany śmieci.

Teraz możesz zapytać, dlaczego te funkcje mają nadal dostęp do np. tweetTextArea? To rzeczywiście jest zamknięcie. Gdy funkcje są tworzone za pomocą new CSContent(), kontekst aktywacji tej funkcji jest dodawany do łańcucha zasięgu wewnętrznych funkcji CSContent.toggleTweetTextarea i CSContent.updateTweetCharacterCount. Więc nawet jeśli nie masz już odniesienia do content, zakres tej funkcji jest nadal zawarty w łańcuchu zasięgu innych funkcji.

Po zakończeniu ready() nie będzie już można uzyskać dostępu do obiektu zawartego w content, a to faktycznie wykracza poza zakres.

Answer 2

To, panie, nazywany jest zamknięcie: lokalna zmienna content pozostanie w pamięci po $(document).ready wyjść. Jest to również znana przyczyna wycieków pamięci.

W skrócie, wiążesz tę funkcję z detektorem zdarzeń elementu DOM, a następnie moduł do zbierania śmieci JavaScript wie, że powinien on zachować zmienną lokalną w stanie nienaruszonym. Nie możesz wywołać go bezpośrednio (poza funkcją), chyba że zdarzenie zostanie wyzwolone. U niektórych można to zrobić "ręcznie", jeśli naprawdę chcesz wywołać funkcję później (np. Za pomocą element.click(), aby zasymulować kliknięcie).

Answer 3

Mój mózg jest dziś wyłączony, ale czy nie powinno się używać zamknięć w tej sytuacji?

$('#edit-cscontent-cs-content-twitter').change( 
    function(){ 
     content.toggleTweetTextarea(); 
    } 
);