今天真的是要说一个bug,也许你早已知晓,也许你时常躺枪于他手,悄悄地,我们慢慢开始。
for in 遍历对象属性时存在bug
使用 for in 去遍历一个对象俺们再熟悉不过了,经常干这种事,那他到底可以遍历一个对象哪些类型的属性呢? 长得帅的 还是 看起来美美的 ,瞎说,它能够遍历的是对象身上那些可枚举标志( [[Enumerable]] )为 true 的属性。
1、对于通过直接的赋值和属性初始化的属性,该标识值默认为即为 true
2、对于通过 Object.defineProperty 等定义的属性,该标识值默认为 false
举个例子哪些属性可以被枚举
let Person = function(name, sex){
this.name = name
this.sex = sex
}
Person.prototype = {
constructor: Person,
showName () {
console.log(this.name)
},
showSex () {
console.log(this.sex)
}
}
Person.wrap = {
sayHi () {
console.log('hi')
}
}
var p1 = new Person('qianlongo', 'sex')
p1.sayBye = ()=> {
console.log('bye')
}
p1.toString = ()=> {
console.log('string')
}
Object.defineProperty(p1, 'info', {
enumerable: false,
configurable: false,
writable: false,
value: 'feDev'
});?
for (var key in p1) {
console.log(key)
}
// name
// sex
// sayBye
// constructor
// showName
// showSex
// toString
1、可以看到我们手动地用defineProperty,给某个对象设置属性时,enumerable为false此时该属性是不可枚举的
2、Person继承自Object构造函数,但是 for in 并没有枚举出Object原型上的一些方法
3、手动地覆盖对象原型上面的方法 toString 也是可枚举的
如何判断一个对象的属性是可枚举的
方式其实很简单,使用原生js提供的 Object.propertyIsEnumerable 来判断
let obj = {
name: 'qianlongo'
}
let obj2 = {
name: 'qianlongo2',
toString () {
return this.name
}
}
obj.propertyIsEnumerable('name') // true
obj.propertyIsEnumerable('toString') // false
obj2.propertyIsEnumerable('name') // true
obj2.propertyIsEnumerable('toString') // true
为什么obj判断toString为不可枚举属性,而obj2就是可枚举的了呢?原因很简单,obj2将 toString 重写了,而一个对象自身直接赋值的属性是可被枚举的
说了这么多,接下来我们来看一下下划线中涉及到遍历的部分对象方法,come on!!!
_.has(object, key)
判断对象obejct是否包含key属性
平时你可能经常这样去判断一个对象是否包含某个属性
if (obj && obj.key) {
// xxx
}
但是这样做有缺陷,比如某个属性其对应的值为0,null,false,’’空字符串呢?这样明明obj有以下对应的属性,却因为属性值为假而通过不了验证
let obj = {
name: '',
sex: 0,
handsomeBoy: false,
timer: null
}
所以我们可以采用下划线中的这种方式
源码
var hasOwnProperty = ObjProto.hasOwnProperty;
_.has = function(obj, key){
return obj != null && hasOwnProperty.call(obj, key);
};
_.keys(object)
获取object对象所有的属性名称。
使用示例
let obj = {
name: 'qianlongo',
sex: 'boy'
}
let keys = _.keys(obj)
// ["name", "sex"]
源码
_.keys = function(obj){
// 如果obj不是object类型直接返回空数组
if (!_.isObject(obj)) return [];
// 如果浏览器支持原生的keys方法,则使用原生的keys
if (nativeKeys) return nativeKeys(obj);
var keys = [];
// 注意这里1、for in会遍历原型上的键,所以用_.has来确保读取的只是对象本身的属性
for (var key in obj) if (_.has(obj, key)) keys.push(key);
// Ahem, IE < 9.
// 这里主要处理ie9以下的浏览器的bug,会将对象上一些本该枚举的属性认为不可枚举,详细可以看collectNonEnumProps分析
if (hasEnumBug) collectNonEnumProps(obj, keys);
return keys;
};
collectNonEnumProps函数分析
该函数为下划线中的内部函数一枚,专门处理ie9以下的枚举bug问题
源码
// 判断浏览器是否存在枚举bug,如果有,在取反操作前会返回false
var hasEnumBug = !{toString: null}.propertyIsEnumerable('toString');
// 所有需要处理的可能存在枚举问题的属性
var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];
// 处理ie9以下的一个枚举bug
functioncollectNonEnumProps(obj, keys){
var nonEnumIdx = nonEnumerableProps.length;
var constructor = obj.constructor;
// 读取obj的原型
var proto = (_.isFunction(constructor) && constructor.prototype) || ObjProto;
// 这里我有个疑问,对于constructor属性为什么要单独处理?
// Constructor is a special case.
var prop = 'constructor';
if (_.has(obj, prop) && !_.contains(keys, prop)) keys.push(prop);
while (nonEnumIdx--) {
prop = nonEnumerableProps[nonEnumIdx];
// nonEnumerableProps中的属性出现在obj中,并且和原型中的同名方法不等,再者keys中不存在该属性,就添加进去
if (prop in obj && obj[prop] !== proto[prop] && !_.contains(keys, prop)) {
keys.push(prop);
}
}
}
代码看起来并不复杂,但是有一个小疑问,对于constructor属性为什么要单独处理呢?各个看官,如果知晓,请教我啊
_.allKeys(object)
获取object中所有的属性,包括原型上的。
举个简单的例子说明
let Person = function(name, sex){
this.name = name
this.sex = sex
}
Person.prototype = {
constructor: Person,
showName () {
console.log(this.name)
}
}
let p = new Person('qianlongo', 'boy')
_.keys(p)
// ["name", "sex"] 只包括自身的属性
_.allKeys(p)
// ["name", "sex", "constructor", "showName"] 还包括原型上的属性
接下来看下源码是怎么干的
源码
// 获取对象obj的所有的键
// 与keys不同,这里包括继承来的key
// Retrieve all the property names of an object.
_.allKeys = function(obj){
if (!_.isObject(obj)) return [];
var keys = [];
// 直接读遍历取到的key,包括原型上的
for (var key in obj) keys.push(key);
// Ahem, IE < 9.
if (hasEnumBug) collectNonEnumProps(obj, keys); // 同样处理一下有枚举问题的浏览器
return keys;
};
可以看到和_.keys的唯一的不同就在于遍历obj的时候有没有用 hasOwnProperty 去判断
悄悄地说一个Bug
发表于:2017-08-07
作者:谦龙
来源:
- 周排行
- 月排行
-   高质量的缺陷分析:让自己少写 bug
-   从“扁鹊三兄弟”谈缺陷预防
-   实例!软件缺陷数据度量和分析
-   软件缺陷的描述
-   面对Bug的正确姿势
-   认识软件中的Bug
-   怎么用Leangoo管理Bug
-   实例!软件缺陷数据度量和分析
-   缺陷是什么?
-   高质量的缺陷分析:让自己少写 bug
-   多种缺陷管理软件简介
-   游戏测试中缺陷的分类
-   从“扁鹊三兄弟”谈缺陷预防
-   像个专业人士一样去调试Bug