技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
  • http协议
  • cookie和session
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
    • What?
    • Why?
    • How?
  • TypeScript配置
  • Vue-Router
  • typescript入门到进阶
  • 前端
coderly
2020-12-08

Object.create(null)和{}

# Object.create(null) 和 {}

# What?

  • 你可能经常看到这样的代码
const map = Object.create(null)

let obj = {}
1
2
3
  • 上面的代码都是用来创建一个空对象,比如说我们需要用obj来存储数据,就可以如上面这样定义

总结: 这两个都是用来创建一个空对象

# Object.create()方法简要介绍

  • MDN解释:Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__。
  • 也就是说 Object.create()方法将创建一个 新对象 ,这个 新对象 的原型指向你提供的 参数 对象
  • 我们看下面这个栗子
图片
  1. 上面的栗子我们先创建了一个 person 对象
  2. 然后用 Object.create(person) 创建了一个 新对象,并将 新对象 赋值给 obj
  3. 输出 obj 可以看到, obj 对象上自身为 空 ,而展开它的原型我们发现 :它的原型居然是 我们定义的 person
  4. 再引用上面的一句话: Object.create()方法将创建一个 新对象 ,这个 新对象 的原型指向你提供的 参数 对象
  5. Object.create()还接受第二个参数,感兴趣的可以看看

# Why?

既然我们已经知道了 Object.create() 也是创建一个 新的空对象,直接用 {} 也是一个 空对象,那么我们为什么要用 Object.create(null)呢?

我们继续以栗子来说明:
图片

  1. 首先用Object.create(null) 创建了 一个 新对象,并将其 赋值给 empty
  2. 接着直接给 obj 赋值 {}
  3. 我们输出 empty 和 obj
  4. 展开之后发现 empty 下方有一行字 No properties ---> 没有属性,而 obj 有 原型对象,并且原型对象上有很多方法

结论: Object.create(null) 创建的 新对象 很干净,没有任何 多余的 东西,而 {} 有原型,原型上有很多方法

# How?

现在我们知道了 Object.create(null) 创建了一个 很干净的 新对象,那么我们为什么要这么做呢?

这里继续举个栗子

  • 比如我们想要对数据去重进行优化
function removal(arr) {
  let newArr = []
  let obj = {}
  arr.forEach((v) => obj[v] || ((obj[v] = true), newArr.push(v)))
  return newArr
}
1
2
3
4
5
6
  • 这里使用一个 中间变量 空对象obj 来 存储没有重复的数据
  • 每一次循环 都要判断 在去重的 newArr 中有没有 这个值,如果没有则存入,有,则不存入
  • 这样我们又需要 再次遍历 newArr,增加了函数开销
  • 而 用一个对象去存储,对象直接 以 key - value 的形式 存取值,不需要遍历,节省了开销
  • 如果考虑对象属性查找规则,当前对象 自身上 没有就去 原型链 上查找,那么查找原型链也需要开销。
  • 更好的做法是:我们在 对象自身上 存的数据,只在 自身上 查找,所以 用 Object.create(null) 创建一个没有 原型链 的 空对象,正好满足我们的要求
  • 最后改一下我们栗子,如下
function removal(arr) {
  let newArr = []
  let obj = Object.create(null) // 没有 原型链 的空对象
  arr.forEach((v) => obj[v] || ((obj[v] = true), newArr.push(v)))
  return newArr
}
1
2
3
4
5
6

总结: Object.create(null)创建一个 纯粹 的对象,以 防止原型污染

#JavaScript
上次更新: 2021/03/25, 12:42:28
构造函数和原型
TypeScript配置

← 构造函数和原型 TypeScript配置→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式