资讯专栏INFORMATION COLUMN

悄悄地说一个bug

layman / 2720人阅读

摘要:客观别急,今天真的是要说一个,也许你早已知晓,也许你时常躺枪于他手,悄悄地,我们慢慢开始。使用案例源码用到了前面已经写好的函数,所以认为获取的属性值,不包括原型返回一个副本,使其键和值对换。

前言

underscore.js源码分析第四篇,前三篇地址分别是,如果你对这个系列感兴趣,欢迎点击watch,随时关注动态。

教你认清这8大杀手锏

那些不起眼的小工具?

(void 0)与undefined之间的小九九

原文地址
源码地址

逗我呢?哥!你要说什么bug,什么bug,什么bug,我最讨厌bug。去他妹的bug。

客观别急,今天真的是要说一个bug,也许你早已知晓,也许你时常躺枪于他手,悄悄地,我们慢慢开始。

for in 遍历对象属性时存在bug

for in 遍历对象属性时存在bug

for in 遍历对象属性时存在bug

使用for in去遍历一个对象俺们再熟悉不过了,经常干这种事,那他到底可以遍历一个对象哪些类型的属性呢? 长得帅的还是看起来美美的,瞎说,它能够遍历的是对象身上那些可枚举标志([[Enumerable]])为true的属性。

对于通过直接的赋值和属性初始化的属性,该标识值默认为即为 true

对于通过 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

可以看到我们手动地用defineProperty,给某个对象设置属性时,enumerable为false此时该属性是不可枚举的

Person继承自Object构造函数,但是for in并没有枚举出Object原型上的一些方法

手动地覆盖对象原型上面的方法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问题,for in到底有啥bug,终于可以说出来了。

简单地说就是如果对象将其原型上的类似toString的方法覆盖了的话,那么我们认为toString就是可枚举的了,但是在ie9以下的浏览器中还是认为是不可以枚举的,又是万恶的ie

源码

// 判断浏览器是否存在枚举bug,如果有,在取反操作前会返回false
var hasEnumBug = !{toString: null}.propertyIsEnumerable("toString"); 
// 所有需要处理的可能存在枚举问题的属性
var nonEnumerableProps = ["valueOf", "isPrototypeOf", "toString",
                    "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"]; 

// 处理ie9以下的一个枚举bug                      
function collectNonEnumProps(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去判断

_.values()

返回object对象所有的属性值。

使用案例

let obj = {
  name: "qianlongo",
  sex: "boy"
}

_.values(obj)
// ["qianlongo", "boy"]

源码

// Retrieve the values of an object"s properties.
_.values = function(obj) {
  // 用到了前面已经写好的keys函数,所以values认为获取的属性值,不包括原型
  var keys = _.keys(obj);
  var length = keys.length;
  var values = Array(length);
  for (var i = 0; i < length; i++) {
    values[i] = obj[keys[i]];
  }
  return values;
};

_.invert(object)

返回一个object副本,使其键(keys)和值(values)对换。

使用案例

let obj = {
  name: "qianlongo",
  secName: "qianlongo",
  age: 100
}

_.invert(obj)

// {100: "age", qianlongo: "secName"}

注意哟,如果对象中有些属性值是相等的,那么翻转过来的对象其key取最后一个

源码

_.invert = function(obj) {
  var result = {};
  // 所以也只是取对象本身的属性
  var keys = _.keys(obj); 
  for (var i = 0, length = keys.length; i < length; i++) {
    // 值为key,key为值,如果有值相等,后面的覆盖前面的
    result[obj[keys[i]]] = keys[i]; 
  }
  return result;
};
_.functions(object)

返回一个对象里所有的方法名, 而且是已经排序的(注意这里包括原型上的属性)

源码

_.functions = _.methods = function(obj) {
  var names = [];
  for (var key in obj) {
    // 是函数,就装载进去
    if (_.isFunction(obj[key])) names.push(key);
  }
  return names.sort(); // 最后返回经过排序的数组
};
结尾

夜深人静,悄悄地说一个bug这个鬼故事讲完了,各位good night。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82939.html

相关文章

  • 我在全球最大的同性社交平台那点事

    摘要:从最大的同性社交平台获取数据好了,言归正传,回到题目。乌云密布的爬虫百度网盘这件事,是我不想看到的,这类安全问题的一个共同特点用户自身确实存在问题。 本文作者:夏之冰雪,i春秋签约作家 《我在百度网盘上看到上万条车主个人信息,企业、政府高官信息、各种数据库和无穷无尽的盗版》,一时间,这篇文章就火了,火爆程度另百度猝不及防。 其实呢,这事真不能全怪百度,毕竟用户分享出去了。之所以引起这么...

    AlphaWatch 评论0 收藏0
  • 蜷缩在你耳膜边的AI

    摘要:苹果公司也参与进来苹果将在新版上取消耳机插孔,取而代之的可能是一对无线。苹果在上线之前就建立了全世界第一个数据中心,耗资亿美元,用来进行的计算。它是一个蜷缩在你的耳膜附近的或者。外加你还得忍受耳廓的疼痛。整体满意度将只能徘徊在或。 多希望我可以触碰你。 西奥多躺在床上,静静地说。他的生活中充满了沉默与拒绝,但这一次,塞曼莎温柔地问:你想怎样触碰我呢? showImg(https://s...

    zhichangterry 评论0 收藏0
  • 深度学习的这些坑你都遇到过吗?神经网络11大常见陷阱及应对方法

    摘要:类似地,输入中的大规模特征将主导网络并导致下游发生更大的变化。因此,使用神经网络库的自动规范化往往是不够的,这些神经网络库会在每个特征的基础上盲目地减去平均值并除以方差。 如果你的神经网络不工作,该怎么办?作者在这里列出了建神经网络时所有可能做错的事情,以及他自己的解决经验。忘记规范化数据忘记检查结果忘记预处理数据忘记使用正则化使用的batch太大使用了不正确的学习率在最后层使用了错误的激活...

    DirtyMind 评论0 收藏0
  • 2017前端发展回顾

    摘要:前端开发在年依然持续火热,本文将对热点事件做一个总结。版的和协议在前端领域,一直独占鳌头。年又发布了一个重大的版本更新。主要是配合使用了服务工作线程。而且还提供了供前端开发者接入。快速发布了和在悄悄地跳过之后,在月号正式发布。 译者按: 老技术日趋成熟,新技术层出不穷。 原文: A recap of front-end development in 2017 译者: Fundebu...

    lmxdawn 评论0 收藏0
  • C++入门篇(3)之类和对象上

    文章目录 前言面向过程与面向对象类与对象的引入何为类类的定义访问限定符说明封装类的实例化类模型1.如何计算类对象大小2.类对象的存储方式 this指针面试题1.`this`指针存在哪里?2.this指针可以为空吗? 前言 在讲解了C++的部分基础后,我们来到了C++的精华部分,类与对象.在本章节中,博主将会带领大家了解类的定义和类的使用. 面向过程与面向对象 我们熟悉的C语言是面向过程...

    刘永祥 评论0 收藏0

发表评论

0条评论

layman

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<