js 使用for...in...遍历对象时需要注意的一个问题:遍历时莫名其妙的多了属性

时间:2022-08-25 15:12:31

前言

最近在做项目时遇到一个小问题:即在使用for…in…遍历对象的时候,突然发现对象莫名其妙的多了个属性,这个属性在声明的时候是没有的,后期也没有为它添加属性,但是究竟从何而来呢?经过一番调试之后找到原因,且看如下代码:

        Object.prototype.say = function(){
alert('hello world!');
}

var obj = {
name:'小明',
sex:'男',
year:'18'
}

for(var attr in obj){
console.log(attr);//name sex year say
}

显而易见,for…in…遍历对象会遍历出对象的所有可枚举的属性,这非常值得注意,因为在多人协作开发项目的时候,很有可能你的同事会在代码里Object.prototype.say来这么一段或是引入的插件里有那么一句,然而你并不知道,就会发生一些意想不到的事情,让你感到很诧异,调试了半天,原来是因为for…in…遍历莫名其妙的多了个属性。

然而如何去解决这个问题呢?可以利用es5的Object.defineProperty方法为属性添加限制,例子如下:

        Object.defineProperty(Object.prototype,'say',{
value:function(){
alert('hello world!');
},
enumerable: false //让say属性不可枚举,需设置enumerable属性值为false
});

var obj = {
name:'小明',
sex:'男',
year:'18'
}

for(var attr in obj){
console.log(attr);//name sex year
}

这是个值得注意的小问题,稍有不慎就会因此浪费很多时间,在此分享给大家。