[Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染
之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题。看下面关于字典的一些操作
'zhangsan' in dict;
dict.zhangsan;
dict.zhangsan=22;
js的对象操作总是经继承的方式工作的。即使是一个空的对象字面量也是继承了Object.protoype属性。
var dict={};
'zhangsan' in dict;//false
'lisi' in dict;//false
'wangwu' in dict;//false'
toString' in dict;//true'
valueOf' in dict;//true
无法避免从Object.prototype对象继承方法。
去除原型污染
Object.prototype提供了hasOwnProperty方法。当测试字典条目时,它可以避免原型污染,这正好可以解决之前的问题。看一段代码
dict.hasOwnProperty('zhangsan');//false
dict.hasOwnProperty('toString');//false
dict.hasOwnProperty('valueOf');//false
可以利用上面代码的特性,来对属性查找使用,可以避免其受原型污染
dict.hasOwnProperty('zhangsan')?dict.hasOwnProperty('zhangsan'):undefined;
dict.hasOwnProperty('x')?dict.hasOwnProperty('x'):undefined;
这里还有一个问题,我们是使用dict对象的hasOwnProperty方法,但其实它自身并没有这个方法,而是继承自Object.prototype对象。如果dict字典对象有一个同为"hasOwnProperty"名称的属性,那么原型中的hasOwnProperty方法不会被访问到。这里会优先读取自身包含的属性,找不到才会从原型链中查找。
dict.hasOwnProperty=10;
dict.hasOwnProperty('zhangsan');//这里会产生一个错误
虽然字典很少会存储这样的属性名。但小概率事件也会发生,因为你不知道处理的数据,是不是来自第三方。下面就介绍一种最安全的方法,不做任何假设。这里不用字典对象来访问hasOwnProperty方法,可能被改写。
使用Object.prototpye.hasOwnProperty
这里直接使用Object.prototype中的hasOwnProperty方法,然后使用函数的call方法,把函数的接收者绑定到字典对象。
首先,先提取出hasOwnProperty方法
var hasOwn=Object.prototype.hasOwnProperty;
或
var hasOwn={}.hasOwnProperty;
然后,确定函数运行的接收者,使用call方法来指定
hasOwn.call(dict,'zhangsan');
这里就可以安全地调用Object.prototype.hasOwnProperty方法来对字典对象的属性名进行检测了。
var dict={};
dict.zhangsan=12;
hasOwn.call(dict,'hasOwnProperty');//false
hasOwn.call(dict,'zhangsan');//true
dict.hasOwnProperty=10;
hasOwn.call(dict,'hasOwnProperty');//true
hasOwn.call(dict,'zhangsan');//true
为了避免所以地方都插入上面的检测代码,可以把该模式抽象为Dict的方法。
Dict初级版
Dict构造函数封装了所有在单一数据类型定义中编写健壮字典的技术细节。代码好下
function Dict(elements){
this.elements=elements||{};
}
Dict.prototype.has=function(key){
return {}.prototype.hasOwnProperty.call(this.elements,key);
};
Dict.prototype.get=function(key){
return this.has(key)?this.elements[key]:undefined;
};
Dict.prototype.set=function(key,val){
this.elements[key]=val;
};
Dict.prototype.remove=function(key){
delete this.elements[key];
};
这样的实现比使用js默认的对象语法更健壮,而且也同样方便使用。
var dict=new Dict({
zhangsan:12,
lisi:23,
wangwu:40
});
dict.has('zhangsang');//true
dict.has('lisi');//true
dict.has('toString');//false
__proto__自身污染
之前在44条中提到,在一些特殊js环境中,特殊的属性名__proto__可能导致自身的污染问题。在某些环境中,__proto__只是简单地继承自Object.prototype,因此空对象是真正的空对象。
一些环境下
var empty=Object.create(null);
'__proto__' in empty;//false
var hasOwn={}.hasOwnProperty;
hasOwn.call(empty,'__proto__');//false
在其它环境下
var empty=Object.create(null);
'__proto__' in empty;//true
var hasOwn={}.hasOwnProperty;
hasOwn.call(empty,'__proto__');//false
某些环境下
因为存在一个实例属性__proto__而永久污染所有的对象
var empty=Object.create(null);
'__proto__' in empty;//true
var hasOwn={}.hasOwnProperty;
hasOwn.call(empty,'__proto__');//true
在不同的环境中,__proto__的值无法确定
var dict=new Dict();
dict.has('__proto__');//无法确定
为了达到代码的可移植性和安全性,只能对__proto__关键字增加一些操作。
Dict最终版
下面就是Dict更安全、更复杂的最终实现。
function Dict(elements){
this.elements=elements||{};
this.hasSpecialProto=false;
this.specialProto=undefined;
}
Dict.prototype.has=function(key){
if(key === '__proto__'){
return this.hasSpecialProto;
}
return {}.prototype.hasOwnProperty.call(this.elements,key);
};
Dict.prototype.get=function(key){
if(key === '__proto__'){
return this.specialProto;
}
return this.has(key)?this.elements[key]:undefined;
};
Dict.prototype.set=function(key,val){
if(key === '__proto__'){
this.hasSpecialProto=true;
this.specialProto=val;
}else{
this.elements[key]=val;
}
};
Dict.prototype.remove=function(key){
if(key === '__proto__'){
this.hasSpecialProto=false;
this.specialProto=undefined;
}else{
delete this.elements[key];
}
};
不管环境处不处理__proto__属性,以上代码都能工作。
var dict=new Dict();
dict.has('__proto__');//false
提示
使用hasOwnProperty方法避免原型污染
使用词法作用域和call方法避免覆盖hasOwnProperty方法
考虑在封装hasOwnProperty测试样板代码的类中实现字典操作
使用字典类避免将'__proto__'作为key来使用
[Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染的更多相关文章
- [Effective JavaScript 笔记]第50条:迭代方法优于循环
"懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人 ...
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- [Effective JavaScript 笔记]第20条:使用call方法自定义接收者来调用方法
不好的实践 函数或方法的接收者(即绑定到特殊关键字this的值)是由调用者的语法决定的.方法调用语法将方法被查找的对象绑定到this变量,(可参阅之前文章<理解函数调用.方法调用及构造函数调用之 ...
- [Effective JavaScript 笔记]第35条:使用闭包存储私有数据
js的对象系统并没有特别鼓励或强制信息隐藏.所有的属性名都是一个字符串,任意一个程序都可以简单地通过访问属性名来获取相应的对象属性.例如,for...in循环.ES5的Object.keys()和Ob ...
- [Effective JavaScript 笔记]第41条:将原型视为实现细节
对象原型链 一个对象给其使用者提供了轻量.简单.强大的操作集.使用者与一个对象最基本的交互是获取其属性值和调用其方法.这些操作不是特别在意属性存储在原型继承结构的哪个位置.随着时间推移,实现对象时可能 ...
- [Effective JavaScript 笔记]第43条:使用Object的直接实例构造轻量级的字典
js对象的核心是一个字符串属性名与属性值的映射表.使用对象实现字典易如反掌,字典是可变长的字符串与值的映射集合. for...in js提供了枚举一个对象属性名的利器--for...in循环. var ...
随机推荐
- iOS 常用的向上,向下取整, 四舍五入函数
向上取整:ceil(x),返回不小于x的最小整数; 向下取整:floor(x),返回不大于x的最大整数; 四舍五入:round(x) 截尾取整函数:trunc(x)
- linux系统安装(上)
1.VMware虚拟机的软件应用 www.vmware.com 2.linux系统安装设置(分区为重点) 3.远程登录管理工具介绍centOS5.5 使用虚拟机的优点 1.不用分区 2.可以完成本机与 ...
- spring接收json格式的多个对象参数(变通法)
两种方法 方法1 如果使用spring mvc同客户端通信,完全使用json数据格式,需要如下定义一个RequestMapping @Controller public class TestContr ...
- SQL DELETE 语句
DELETE 语句用于删除表中的行. 语法 DELETE FROM 表名称 WHERE 列名称 = 值 Person: LastName FirstName Address City Gates Bi ...
- ubuntu-vnc
Centos 中文gnome: 全新以最小化包安装了64位的CentOS6.3系统,作为本地的Web服务器使用,现记录全过程: 1.先安装X Window yum groupinstall " ...
- HTML JQuery 技巧总结
元素之间的操作 $(".level1").children() 获取到所有相邻的子元素$(".level1").children("a") ...
- @Html.Raw()
在用VS 2015写代码时,匹配邮箱的正则表达式 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ @报错 主要因为 @是MVC里的关键字,所以不能直 ...
- dom4j学习
在使用xml读写的过程中,用到了dom4j,也算是一个比较主流的xml包了,在使用的过程中,将学习经历记录一下,以后查阅也比较方便. 首先是在pom中添加依赖,在Maven的中心库搜索后选择了该包: ...
- 微信小程序开发POST请求
onLoad: function() { that = this; wx.request( { url: "http://op.juhe.cn/onebox/weather/query&qu ...
- nginx 参数详解
nginx的http web功能 必须使用虚拟机来配置站点:每个虚拟主机使用一个server{}段来配置 非虚拟主机的配置.公共选项,需要定义在server之外,http之内 ...