如何检测 JavaScript 中的自定义全局变量

简介: 译者注: 全局变量的滥用是一种很糟糕的程序设计。很容易造成依赖和状态混乱。 而在 Java 和 JavaScript 这种自动垃圾回收的语言里面,全局(可见的)变量一直是内存泄露的隐藏杀手。

译者注: 全局变量的滥用是一种很糟糕的程序设计。很容易造成依赖和状态混乱。 而在 Java 和 JavaScript 这种自动垃圾回收的语言里面,全局(可见的)变量一直是内存泄露的隐藏杀手。

本文提供了一种靠谱的检测全局变量实现方式.

在 JavaScript中随意设置全局变量并不是个好习惯。原文作者参与了 MooTools 项目, 据他所说, 已经有十年时间天天听到与此相关的谈论。 MooTools 扩展了浏览器的原生JS对象, 但也使用了一些全局变量, 如 Browser$$。我觉得 “全局变量太恐怖了!(原文 global vars are terrible)” , 有点无奈的是, jQuery 和 JavaScript loaders 都用了至少一个全局变量。

除了故意的全局变量, 否则将一个对象泄漏到全局空间其实是很糟糕的习惯, 一般就是烂代码才会这样做。那么怎么检测有哪些全局变量是我们自己放进去的呢? 明白了原理代码就很简单:

// 创建一个新的  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)) {
                // 输出到控制台,也可以加入数组,自己处理
                window.console && console.log && console.log(key);
            }
        });
    };
    // 必须在 设置 src 属性之前添加 onload 事件。
    // 在 onload 里面 contentWindow 才变得可用! 
    iframe.src = 'about:blank';
    document.body.appendChild(iframe);
})();

当然,因为是2个 window 对象,也是 2个不同的 document, 所以你会看到 window, document, top, 和 location 都被输出了。但其他的都是被 JavaScript 代码有意或无意地泄露到全局空间。

原文链接: Get Global Variables with JavaScript

原文日期: 2015年08月31日

翻译日期: 2015年09月10日

翻译人员: 铁锚 http://blog.csdn.net/renfufei

目录
相关文章
|
3月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
141 59
|
3月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
185 9
|
1月前
|
监控 JavaScript 前端开发
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
46 6
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
94 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
3月前
|
JavaScript 前端开发
JavaScript如何创建,全局变量
JavaScript如何创建,全局变量
|
2月前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
49 0
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
128 1
|
4月前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
37 1