悄悄地说一个Bug

发表于:2017-5-12 09:47

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:谦龙    来源:谦龙的小天地

  今天真的是要说一个bug,也许你早已知晓,也许你时常躺枪于他手,悄悄地,我们慢慢开始。
  for in 遍历对象属性时存在bug
  for in 遍历对象属性时存在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 去判断
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号