How to detect custom global variables in JavaScript

Translator Note: The misuse of global variables is a very bad programming. It is easy to cause dependency and state confusion. In the language of automatic garbage collection, Java and JavaScript, the global (visible) variable has been a hidden killer of memory leaks.

This paper provides a reliable way to implement the global variable detection.

It is not a good practice to arbitrarily set global variables in JavaScript. The original author participated in the MooTools project, which, according to him, had been heard every day for about 10 years. MooTools extends the native JS object of the browser, but also uses some global variables, such as Browser and $$ . I think "global variables are too scary!" (Original global VARs is terrible) ", somewhat helpless, jQuery and JavaScript loaders all use at least one global variable.

In addition to intentional global variables, it is a bad habit to leak an object to the global space, which is usually the rotten code. So how do we detect which global variables we put in ourselves? Understand the principle code is very simple:

// 创建一个新的  iframe, 然后将其 `contentWindow` 中的属性值// 与当前 window 中的属性值对比, 不在其中的就是自定义对象(function() {    var iframe = document.createElement(‘iframe‘);    iframe.onload = function() {        // 使用 Object.keys() 获取对象的所有属性名         var iframeKeys = Object.keys(iframe.contentWindow);        Object.keys(window).forEach(function(key) {            // 如果存在 window 中,而 iframe 中却没有            if(!(key in iframeKeys)) {                // 输出到控制台,也可以加入数组,自己处理                console && console.log && console.log(key);            }        });    };    // 必须在 设置 src 属性之前添加 onload 事件。    // 在 onload 里面 contentWindow 才变得可用!     iframe.src = ‘about:blank‘;    document.body.appendChild(iframe);})();

Of course, because it is 2 window objects, it is also 2 different document, so you will see,, window document top , and location both are output. But the rest is intentionally or unintentionally leaked to the global space by JavaScript code.

Original link: Get Global Variables with JavaScript

Original date: August 31, 2015

Translation Date: September 10, 2015

Translators: Anchor Http://blog.csdn.net/renfufei

How to detect custom global variables in JavaScript