【面试题】 JS手写ES6的Object.create方法

简介: 【面试题】 JS手写ES6的Object.create方法

方法介绍

Object.create() 方法用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。

用法:

Object.create(proto,[propertiesObject])
  • proto:新创建对象的原型对象。
  • propertiesObject (可选):如果该参数被指定且不为 undefined,则该传入对象的自有可枚举属性即其自身定义的属性,而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。这些属性对应于 Object.defineProperties() 的第二个参数。

Object.defineProperties()方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

Object.defineProperties()使用示例:

let obj1 = { a: 2, b: 3 }
Object.defineProperties(obj1, {
  a: {
    enumerable: false, // 数据、存储描述符号
    configurable: false, // 数据描述符
    writable: false, // 数据描述符
    value: 'xxx' // 数据描述符号
    get: function(){}, // 储存描述符
    set: function(){} // 储存描述符
  }
})

有关Object.defineProperties()的具体细节请看我的这篇文章:戳我传送

Object.create 返回值:一个新对象,带着指定的原型对象及其属性。

使用Object.create(null)的原因

很多框架源码作者使用它来初始化一个新的对象,难道是最佳实践?

通过Object.create(null)创建出来的对象,没有任何属性,显示No properties。我们可以将其当成一个干净的 map 来使用,自主定义 toString,hasOwnProperty等方法,并且不必担心将原型链上的同名方法被覆盖。

注意: {...}创建的对象,使用for in遍历对象的时候,会遍历原型链上的属性,带来性能上的损耗。使用Object.create(null)则不必再对其进行遍历了。

框架源码对性能的要求极高,哪怕是一点点,都值得关注。

开始手写

// 第一个参数传递null时,返回的实例原型为null
// 第一个参数类型只能是object、function或者null,否则报错。
// 第二个参数类型,不能是null,否则报错
// 第二个参数如果不为 undefined ,需要将其挂载到实例的  Object.defineProperties 上。
Object.mjy_create = function(proto, defineProperties) {
    if ( typeof proto !== 'object' && typeof proto !== 'function' ) {
      throw new TypeError(`Object prototype may only be an Object or null: ${proto}`)
    }
    if ( defineProperties === null ) {
      throw new TypeError('Cannot convert undefined or null to object')
    }
    // 定义新对象 
      const obj = {}
      // 设置原型
      // obj.__proto__ = proto // 不建议这么做了
      // 通常,应该使用 Object.setPrototypeOf() 方法来设置对象的原型。
      // 因为 Object.prototype.__proto__ 访问器已被弃用。
       Object.setPrototypeOf(obj, proto) // 建议使用setPrototypeOf设置原型
    if ( defineProperties !== undefined ) {
      Object.defineProperties(obj, defineProperties)
    }
    return obj
  }
  let obj1={b:2}
  let obj2 = Object.mjy_create(obj1, { a: { enumerable: false } })
  console.log(obj2)//{}
  let obj2_ = Object.mjy_create(obj1, { a: { enumerable: true } })
  console.log(obj2_)//{ a: undefined }
  let obj3 = Object.create('222', undefined) // TypeError: Object prototype may only be an Object or null: 222
  let obj4 = Object.create(obj1, null) // TypeError: Cannot convert undefined or null to object
  console.log(obj2.a) // undefined

 

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
15天前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
40 3
|
6天前
|
数据安全/隐私保护
作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
该博客文章通过示例演示了如何使用session对象的`setAttribute`和`getAttribute`方法在不同页面间传递和显示用户的用户名和密码信息,并说明了如何设置会话的有效期。
作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
|
12天前
|
SQL 安全 测试技术
[go 面试] 接口测试的方法与技巧
[go 面试] 接口测试的方法与技巧
|
13天前
|
机器学习/深度学习 算法 Python
【机器学习】面试问答:决策树如何进行剪枝?剪枝的方法有哪些?
文章讨论了决策树的剪枝技术,包括预剪枝和后剪枝的概念、方法以及各自的优缺点。
29 2
|
13天前
|
机器学习/深度学习
【机器学习】面试题:LSTM长短期记忆网络的理解?LSTM是怎么解决梯度消失的问题的?还有哪些其它的解决梯度消失或梯度爆炸的方法?
长短时记忆网络(LSTM)的基本概念、解决梯度消失问题的机制,以及介绍了包括梯度裁剪、改变激活函数、残差结构和Batch Normalization在内的其他方法来解决梯度消失或梯度爆炸问题。
27 2
|
17天前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
13天前
|
存储 机器学习/深度学习 缓存
【数据挖掘】XGBoost面试题:与GBDT的区别?为什么使用泰勒二阶展开?为什么可以并行训练?为什么快?防止过拟合的方法?如何处理缺失值?
XGBoost与GBDT的区别、XGBoost使用泰勒二阶展开的原因、并行训练的原理、速度优势、防止过拟合的策略以及处理缺失值的方法,突出了XGBoost在提升模型性能和训练效率方面的一系列优化。
17 1
|
14天前
|
机器学习/深度学习
|
17天前
|
JavaScript 前端开发 UED
小白请看! 大厂面试题 :如何用JS实现瀑布流
小白请看! 大厂面试题 :如何用JS实现瀑布流
|
27天前
|
JSON 前端开发 数据格式