关于用于防止内存泄漏的空赋值修复的性质，有人可以为我挠痒痒吗？

我们都熟悉以下技术来阻止DOM对象和JS对象之间的循环引用，以防止内存泄漏:

    function foo() {
      var ele = document.getElementById("someParagraphId");

      ele.onclick = function() {
        //some action here
      };

      ele = null;
    }

问题是为什么上面的方法会起作用？将“ele”设置为 null 肯定会停止循环引用，但它不会也阻止将来对“ele”的引用吗？

    function foo() {
      var ele = document.getElementById("someParagraphId");

          ele.onclick = function() {
              console.log("accessing ele ... after set to null " + ele.onclick);
          };

      ele = null;

    }

然而事件监听器触发了。它会提示“ele”对象为空(这是我们所期望的)。

鉴于上述行为，我们是否可以正确推断 Javascript 引擎实现将保存对事件监听器的某种内部引用，并且在触发事件时调用该引用？

eventHandlerRef = //assignment to "ele.onclick" handler/listener;

如果有像上面那样的引用，那么赋值到空的修复是否会依赖于实现？或者，它是 ECMAScript 规范的一部分。

据我了解，此修复始终是跨浏览器安全的。我还没有遇到很多具体提到在应用空分配之前检测/嗅探浏览器类型的示例。

===============编辑==================

我认为由于我提出问题的方式，可能会在不知不觉中直接与我试图传达的内容进行讨论。正在引用的几个概念:

对象句柄/对象引用:

 var obj1, obj2;
     obj1 = {foo: "bar"}; //obj1 points to the an area of the heap allocated 
                          //for the object literal.

 obj2 = obj1;     //obj2 points to the same position in the heap
                      //as obj1.

 //obj1 = null or
 obj1 = {/*another obj literal*/}  //the new object literal is created 
                                       //and allocated in some other part 
                                       //in the heap, and obj1 now points 
                                       //to the new location.

//obj2 is unaffected by obj1's re-assignment. 

上面不是我的痒处，我很遗憾添加了这行:

console.log("accessing ele ... after set to null " + ele.onclick);

以上内容使这看起来像是一个封闭问题。我完全预料到会按照原始帖子中的指示抛出错误。

我的渴望更多的是......出于某种原因，在我看来，我一直认为 Javascript 引擎会在事件触发和设置时直接调用 ele.onlick()元素为 null 类似于以下流程:

var obj = {};
obj.method = function() {};

obj = null;
//error calling obj.method(), i.e., obj is null

鉴于我们在原始帖子中知道在 ele 设置为 null 后事件处理程序仍然会触发，在我看来流程更类似于:

var obj = {};
obj.method = function() {};

var objRef = obj; 

obj = null;  

//The Javascript Engine calling objRef.method when event triggered.

我的问题归结为一个问题，上面的大多数 Javascript 实现是如何工作的，其中一些内部引用指向分配的事件处理程序，并且是在触发事件时调用这个内部引用？

或者换句话说，是什么阻止了 Javascript 引擎实现直接调用 an ele.onclick()(暂时搁置设计和架构问题)？

也许我的思维过程不同，但当其他人第一次遇到空赋值修复时，没有人再看一眼，元素引用为空，但处理程序的代码还是被处决了？

最佳答案

丢弃所有旧答案，并解决编辑问题:)

让我们举一个更简单的例子:textContent。

var ele = document.getElementById('foo');
ele.textContent = 'abc';
ele = null;

此代码将#foo 的textContent 设置为abc，并丢弃对ele 的引用。现在如果我再次请求 #foo 会发生什么？...

var ele = document.getElementById('foo');
ele.textContent = 'abc';
ele = null;
ele = document.getElementById('foo');
console.log('#foo is ' + ele.textContent);

它将记录 “#foo is abc”。这只是表明 #foo 在我的脚本之外继续存在，并且 document 保留对它的引用(因为我得到它调用 document<>)。它与事件处理程序的工作方式相同。

var ele = document.getElementById('foo');
ele.onclick = function() { console.log('abc'); };
ele = null;
ele = document.getElementById('foo');
console.log('#foo.onclick is ' + ele.onclick);

事件处理程序不是一种特殊的属性。它们只是您在其上编写引用(对函数)的变量。这些大致是函数式语言的特性，其中函数可以用作简单的值。 JavaScript 实现只是从 DOM 引用调用事件处理程序，而不是从 ele 引用调用。让我们再举一个更简单的例子，没有 document.getElementById。

var a = {};
var b = a;
b.foo = function() { console.log("hello world!"); };
console.log(a.foo + " is the same as " + b.foo);
b = null;
console.log("Even though b is " + b + ", a.foo is still " + a.foo);
a.foo();

如您所见，函数与我们为其分配的引用无关:它们与引用指向的对象相关联。您可以从对对象的任何引用调用它们，而不仅仅是从您用来分配函数的引用。

因此，您可以取消引用以打破循环依赖，而不影响对象的正确行为。

关于Javascript 内存泄漏 : why would assigning object to null work?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6326778/