JavaScript服务器编程(对象属性枚举中应当避免原型污染问题)

简介:

  前面文章中讨论了JS开发中对象属性枚举的ES3和ES5方案并给出了一组常用工具函数,其实,企业开发中真正应用时还存在不少问题。本文想基于前文进一步探讨一下有关原型污染的问题。由于JS的先天不足,有关原型污染背后隐藏着一个大的“故事”,以后我们的文章中还要涉及其中一些情节。

 

问题

前面在讨论使用in运算符检测对象中是否存在属性的方案,但是通过所举的示例也发现一个问题,例如:

console.log('"ID" in contacts: ',"ID" in contacts);

其输出结果也是true。这说明in运算符在属性检测时不仅搜索当前对象的自有属性,还会沿着对象的原型链搜索。

根据前面对于属性继承的分析可得知,JS中的对象总是以继承的方式工作,即使是一个空的对象字面量也会继承Object.prototype的大量属性。因此,对于下面的测试结果正在我们的意料之中:

var pol={};

console.log("Hi" in pol);  //false

console.log("toString" in pol);  //true

console.log("valueOf" in pol);  //true

console.log("constructor" in pol);  //true

console.log("__defineGetter__" in pol);  //true

console.log("__defineSetter__" in pol);  //true

console.log("__lookupGetter__" in pol);  //true

console.log("__lookupSetter__" in pol);  //true

console.log("hasOwnProperty" in pol);  //true

console.log("isPrototypeOf" in pol);  //true

console.log("propertyIsEnumerable" in pol);  //true

console.log("toLocaleString" in pol);  //true

而在ES5中使用Object.prototype中的hasOwnProperty方法正好可以避免上面的问题,因为它只检索对象的自有属性,包括不可枚举的属性(ES3中没有定义这样的概念)。

更进一步

如果对象本身有一个自有属性hasOwnProperty,情况又该如何呢?参考如下代码:

var o={};

o.hasOwnProperty="*********";

console.log(o.hasOwnProperty("Alice");

运行测试时,出现如下图所示的运行时错误:

wKiom1VdeFzzyFEeAAFdskcrBaM427.jpg

对于这种情况,专家的建议是“最安全的方法是不做任何假设”。于是,我们可以提前在任何安全的位置提取出hasOwnProperty方法,同时利用立即执行的匿名函数的词法作用域特点,实现如下解决方案:

(function testOwnProperty(){

    //var hasOwn=Object.prototype.hasOwnProperty;也可以使用如下更简洁方式

    var hasOwn={}.hasOwnProperty;

 

    var dict={};

    dict.Alice=12;

    console.log("------------");

    console.log(hasOwn.call(dict,"hasOwnProperty"));

    console.log(hasOwn.call(dict,"Alice"));

    dict.hasOwnProperty=100;

    console.log("-------------");

    console.log(hasOwn.call(dict,"hasOwnProperty"));

    console.log(hasOwn.call(dict,"Alice"));

    console.log("---------------");

})();

于是,不管对象的hasOwnProperty方法是否被覆盖,上述方案都能够正常工作。值得注意的是,许多知名JS库就是利用了上述技术。
















本文转自朱先忠老师51CTO博客,原文链接:http://blog.51cto.com/zhuxianzhong/1653484,如需转载请自行联系原作者



相关文章
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
7月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
217 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
272 1
|
7月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
235 23
|
8月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
9月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
1186 2
|
12月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
193 1
JavaScript中对象的数据拷贝
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
215 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章