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

研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,

一般来说,常见的库就会用外观模式,最后暴露一个对象给用户调用,

比如jQuery,requirejs,angular,react均是用这种方式。

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

如React

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

How

可以通过ES5的新增api(Object.keys)看浏览器全局变量列表: Object.keys(window)

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

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

但并不是所有的原生对象都是seaded. 所以此方法行不通。

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

对于浏览器环境,我们有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.toString API,对原生函数返回 [native code]

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

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

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

可以用此特性,来检测是否是原生的api(仅适用于浏览器运行环境,node环境有差异).

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

文章来源:博客园

时间: 2024-08-06 03:50:54

javascript如何列出全局对象的非原生属性的相关文章

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

Why 研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,一般来说,常见的库就会用外观模式,最后暴露一个对象给用户调用,比如jQuery,requirejs,angular,react均是用这种方式. 如果没有用cmd/amd模块化或类似webpack工具打包的话,会给全局对象window添加一个属性,如angular: 如React 同时,为了避免全局污染,也要关注全局变量的个数和详情. How 可以通过ES5的新增api(Object.keys)看浏览器全局变量列表:Object

读书笔记-JavaScript中的全局对象

对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性值.比如undefined.Infinity以及NaN.2.全局对象拥有一些常用的属性对象.比如Math.JSON和Number对象均为该全局对象的属性.3.全局对象提供一些全局函数供调用.比如isNaN().isFinite().parseInt()和eval()等.4.全局对象提供一些全局构造器

JavaScript学习笔记——document对象的内容、属性、样式的操作

javascript-对文档对象的内容.属性.样式的操作(上) 一.操作内容 1. innerHTML 用来设置或获取对象起始和激素标签内的内容(识别html标签) 2. innerText 用来设置或获取对象起始和激素标签内的内容 (IE)   textContent用来设置或获取对象起始和激素标签内的内容 (FF) 3. outerHTML 用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签)   outerText 用来设置或获取包括本对象在内起始和激素标签内的内容 二.

javascript对文档对象的内容、属性、样式的操作

一.操作内容 1.innerHTML  用来设置或获取对象起始和激素标签内的内容(识别html标签) 2.innerText  用来设置或获取对象起始和激素标签内的内容 (IE) textContent用来设置或获取对象起始和激素标签内的内容 (FF) 3.outerHTML  用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签) outerText  用来设置或获取包括本对象在内起始和激素标签内的内容 二.操作属性 1.直接操作 对象.属性 对象.属性=值  (设置.获取.添

JavaScript 全局对象

JavaScript 全局对象 全局属性和函数可用于所有内建的 JavaScript 对象. 顶层函数(全局函数) 函数 描述 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码的 URI 组件. encodeURI() 把字符串编码为 URI. encodeURIComponent() 把字符串编码为 URI 组件. escape() 对字符串进行编码. eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行. getC

JavaScript中两种类型的全局对象/函数

这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Object,分为以下几种 1, 值属性的全局对象(Value Properties of the Global Object).有NaN

JavaScript中两种类型的全局对象/函数(转)

转自:http://www.cnblogs.com/snandy/archive/2011/03/19/1988626.html 这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Objec

Javascript教程:delete删除对象

在javascript中,我们有时候要使用delete删除对象.但是,对于delete的一些细节我们未必尽知.昨天,看到kangax分析delete的文章,获益匪浅.本文将文章的精华部分翻译出来,与各位分享. 原理 代码类型 执行上下文 激活对象/可变对象 属性特性 内置对象和DontDelete 未声明的赋值 Firebug 困惑 通过eval删除变量 浏览器兼容性 Gecko DontDelete bug IE bugs 误区 ‘delete’和宿主对象 ES5严格模式 总结 原理 为什么我

Javascript初学篇章_5(对象)

对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象,它有属性颜色.身高之类,而它的方法就有抓老鼠. 本地对象1.Date 日期对象用来处理日期和时间.在<Javascript初学篇章_1>中就有提到过 var myDate = new Date(); myDate.getFullYear(); //获取完整的年份(4位,1970-????) myD