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

禅趣      2022-02-07     641

关键词:

Why

研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,
一般来说,常见的库就会用外观模式,最后暴露一个对象给用户调用,
比如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.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检测数据类型, 本人暂没有更好的方案,欢迎讨论。

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

Why研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,一般来说,常见的库就会用外观模式,最后暴露一个对象给用户调用,比如jQuery,requirejs,angular,react均是用这种方式。如果没有用cmd/amd模块化或类似webpack工... 查看详情

如何列出 JavaScript 对象的属性?

】如何列出JavaScript对象的属性?【英文标题】:HowtolistthepropertiesofaJavaScriptobject?【发布时间】:2010-09-1712:08:09【问题描述】:假设我这样创建了一个对象:varmyObject="ircEvent":"PRIVMSG","method":"newURI","regex":"^http://.*";检索属性名称列... 查看详情

JavaScript:在 IE 中列出全局变量

】JavaScript:在IE中列出全局变量【英文标题】:JavaScript:ListglobalvariablesinIE【发布时间】:2010-03-1712:37:40【问题描述】:我正在尝试获取我的班级的实例名称。我这样做的方法是遍历所有全局对象并将其与this指针进行比较。它适... 查看详情

如何列出 javascript 对象的函数/方法? (这甚至可能吗?)

】如何列出javascript对象的函数/方法?(这甚至可能吗?)【英文标题】:Howtolistthefunctions/methodsofajavascriptobject?(Isitevenpossible?)【发布时间】:2011-05-2004:11:33【问题描述】:故意将这个问题表述为thisquestion。我什至不知道这是否... 查看详情

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

对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用。这个JavaScript自身提供的全局对象的功能包括:1.全局对象拥有一些常用的属性值。比如undefined、Infinity以及NaN。2.全局对象拥有一... 查看详情

javascript原生对象属性和方法详解——array对象

http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/length设置或返回数组中元素的数目。注意:设置length属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置... 查看详情

javascript中的全局对象,内置对象和预定义对象是啥?

RT1.全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。  通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。  全局对象不是任何对象的属性,所以它没有名称。2.内部对象是编写... 查看详情

javascript全局对象---常用

1.顶层函数(全局函数)1)isNaN()函数用于检查其参数是否是非数字值。-----isNaN(x)   x是必须参数,如果x是特殊的非数字值NaN(或者能被转换为这样的值),返回的值就是true。如果x是其他值,则返回false。2)Number()函数... 查看详情

html事件属性

...在浏览器中触发动作的能力,比如当用户点击元素时启动JavaScript。如需学习更多有关事件编程的知识,请访问我们的JavaScript教程。下面列出了添加到HTML元素以定义事件动作的全局事件属性。=HTML5中新的事件属性。Window事件属性... 查看详情

html事件属性

...在浏览器中触发动作的能力,比如当用户点击元素时启动JavaScript。如需学习更多有关事件编程的知识,请访问我们的JavaScript教程。下面列出了添加到HTML元素以定义事件动作的全局事件属性。=HTML5中新的事件属性。Window事件属性... 查看详情

全局对象

定义:  全局对象(globalobject)在JavaScript中有着重要的用途,全局对象的属性是全局定义的符号,JavaScript可以直接使用,比如:全局属性undefined,infinity和NaN全局函数isNaN(),parseINt(),eval())构造函数Date(),RegExp()... 查看详情

原生javascript对象的方法

createObject.create()方法创建一个拥有指定原型和若干个指定属性的对象。Object.create(proto[,propertiesObject])proto为新创建对象的原型对象,设置为null可创建没有原型的空对象。propertiesObject包涵若干个属性的描述符和defineProperties的第二... 查看详情

javascript全局属性/函数

JavaScript全局属性和方法可用于创建Javascript对象。JavaScript全局属性属性描述Infinity代表正的无穷大的数值。NaN指示某个值是不是数字值。undefined指示未定义的值。JavaScript全局函数函数描述decodeURI()解码某个编码的URI。decodeURICompone... 查看详情

javascript中15种原生对象类型系统综述

...1.数据类型:能够表示并操作的值的类型称作数据类型2.javascript的类型系统:原生对象、宿主对象、浏览器拓展对象;二.一张图看懂javascript的原生对象类型关系三 javascript15种原生对象的分类补充:在单体内置对象中忽略了... 查看详情

如果显示错误为“试图获取非对象的属性”,如何识别代码中的非对象?

】如果显示错误为“试图获取非对象的属性”,如何识别代码中的非对象?【英文标题】:howtoidentifywhichisanon-objectinthecodeifitshowserroras`tryingtogetpropertyofnon-object`?【发布时间】:2017-01-2223:56:21【问题描述】:对现有脚本进行一些修... 查看详情

如何在 VS 命令窗口中列出 JavaScript 对象的方法?

】如何在VS命令窗口中列出JavaScript对象的方法?【英文标题】:HowcanIlistthemethodsofaJavaScriptobjectinVScommandwindow?【发布时间】:2010-09-1902:46:22【问题描述】:在VisualStudio2008中调试JavaScript时,我使用?命令窗口中的命令列出JavaScript对... 查看详情

javascript全局对象

JavaScript全局对象全局属性和函数可用于所有内建的JavaScript对象。顶层函数(全局函数)函数描述decodeURI()解码某个编码的URI。decodeURIComponent()解码一个编码的URI组件。encodeURI()把字符串编码为URI。encodeURIComponent()把字符串编码为UR... 查看详情

javascript正则表达式三

正则表达式对象的方法:test用于测试字符串参数中是否存在匹配正则表达式模式的字符串,如果存在返回true,不存在返回false。exec使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配结果。如果没... 查看详情