【面试题】 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、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
130 52
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
47 5
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
27 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
45 7
|
1月前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
133 4
|
4月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
1月前
|
存储 缓存 算法
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
|
1月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?