Вот пример кода.
<html>
<head>
<script>
class Test {
constructor(elem) {
this.elem = elem;
}
}
window.onload = function() {
const btn = document.getElementById('btn');
const testListener = function() {
const newBtn = document.createElement('button');
newBtn.innerText = 'newButton';
newBtn.rock = new Test(newBtn);
const listener = function eventListener(e) {};
newBtn.addEventListener('click', listener);
document.body.appendChild(newBtn);
setTimeout(function() {
document.body.removeChild(newBtn);
}, 5000);
};
btn.addEventListener('click', testListener);
};
</script>
</head>
<body>
<button id="btn">Test</button>
</body>
</html>
Logi c is,
- Нажмите кнопку
Test, динамически создайте новую кнопку с пустой слушатель событий. Также для упрощения отладки снимка памяти добавьте свойство с новым Test object. - Также запустите
setTimeout с задержкой в 5 секунд, чтобы удалить только что созданную кнопку.
Странное поведение таково:
- Если вы не нажмете только что созданную кнопку, через 5 секунд сделайте снимок памяти, вы не найдете ни одного объекта
Test. - Если вы нажмете только что созданную кнопку в течение 5 секунд, сделаете снимок памяти, вы найдете объект
Test, все еще находящийся в памяти, который сохраняется вновь созданным элементом кнопки, а кнопка - некоторым объектом InternalNode , Что будет утечка памяти.