javascript如何列出全局对象的非原生属性。

Why

研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,
通常来讲,常见的库就会用外观模式,最后暴露一个对象给用户调用,
好比jQuery,requirejs,angular,react
均是用这种方式。javascript

若是没有用cmd/amd模块化或相似webpack工具打包的话,会给全局对象window添加一个属性,如angular:
html

如React
前端

同时,为了不全局污染,也要关注全局变量的个数和详情。java

How

能够经过ES5的新增api(Object.keys)看浏览器全局变量列表:Object.keys(window)node

发现通常的网站都有两百多个全局变量,人力去看且须要区分是不是用户定义的比较困难,须要一个script去列出全部的非原生的全局属性.react

开始想的是能不能防篡改对象的相关检测api(Object.isExtensible,Object.isSealed,Object.isFrozen)来判断是否原生api?webpack

但并非全部的原生对象都是seaded. 因此此方法行不通。web

那么能不能有一个纯净的、没有加载第三方库的全局对象?api

对于浏览器环境,咱们有iframe浏览器

能够添加一个iframe,而后对比当前的window,就能够获得详细列表。

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
Object.keys(iframe.contentWindow).length

列出非原来对象

(function(){
    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    var originWindow=iframe.contentWindow,
        currentWindow=window
    var origin =Object.keys(originWindow),
        current =Object.keys(currentWindow),
        extendAttr={};
    current.forEach((key)=>{
        if(originWindow[key]===undefined){
            extendAttr[key]=currentWindow[key]
        };
    })
    console.log(`origin window:${origin.length},current window:${current.length},extentAttr:${Object.keys(extendAttr).length}`)
    console.log("extendAttr:",extendAttr);
    document.body.removeChild(iframe);
})();

cnblogs的全局对象:

Node怎么处理

因为node没有像Chrome Dev Tools Console同样的工具,能够直观简单的执行js代码片断,

对于Nodejs,能够在应用运行稳定(全部的全局,单例对象都初始化完成)后,再导出全局对象,

再在同一环境,不导入任何库导出全局对象,进行对比便可。

怎么知道一个原生函数有没有覆盖

因为Function.prototype.toStringAPI,对原生函数返回[native code]

setTimeout.toString()
"function setTimeout() { [native code] }"

但对于自定义的函数会返回源码:

jQuery.toString()
"function (e,t){return new x.fn.init(e,t,r)}"

angular就是利用这一特性实现依赖注入http://www.cnblogs.com/etoah/p/5460441.html

能够用此特性,来检测是不是原生的api(仅适用于浏览器运行环境,node环境有差别).

一个原生属性(Object,string...)怎么检测有没有被用户重置,除了用typeof检测数据类型, 本人暂没有更好的方案,欢迎讨论。

相关文章
相关标签/搜索