手动实现new 和 instanceof

这篇文章是手写实现xxx功能部分的第三篇,后续会陆续更新其他的。

目录传送门 github地址

考察点 new 操作符做了什么? instanceof有什么作用

new做了什么

首先, new 操作符后面只能加一个构造函数(函数)

new操作符所做的东西可以分成四个内容:

  1. 创建一个全新的Javascript对象 {}
  2. 将new 操作符调用的构造函数的prototype 原型对象 指向上面的新对象
  3. 将这个对象作为该函数的上下文对象(this)
  4. 如果该函数没有返回值或者返回值不是引用类型,则返回上面的对象

根据上述规则完成new

 /**
  * 接受一个function作为构造函数, 后续为function的参数
  * @return Object
  */
function New(fn) {
  let newObj = {}

  if (fn.prototype !== null) {
    newObj.__proto__ = fn.prototype
  }
  // 提取
  let res = fn.call(newObj, Array.prototype.slice.call(arguments, 1))
  if (res !== null && (typeof res === 'object' || typeof res === 'function')) {
    return res
  }

  return newObj
}

// 测试代码
function Animal(name) {
  this.name = name
  this.test = 'test'
}

let a = New(Animal, 'mm')

instanceof

instanceof 用于判断某个对象是否是另一个对象(构造方法)的实例。instanceof会查找原型链,直到null如果还不是后面这个对象的实例的话就返回false,否则就返回true

根据上述规则完成instanceof

function instanceofFunc(obj, cons) {
  // 错误判断 构造函数必须是一个function 其他的均报错
  if (typeof cons !== 'function') throw new Error('instance error')
  if (!obj || (typeof obj !== 'object' && typeof obj !== 'function')) return false
  // 获取到原型对象
  let proto = cons.prototype
  // 如果obj的原型对象不是null
  while (obj.__proto__) {
    if (obj.__proto__ === proto) return true
    obj = obj.__proto__
  }
  return false
}

console.log(instanceofFunc(() => {}, Function)) // true

最后留几个小题

  1. typeof 和 instanceof 可以判断出对象的真正类型吗?
  2. 如果上面的不可以,那么用什么办法?
  3. 如何在方法内部判断使用了 new 操作符

答案见基hub

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容