第五篇 手写原理代码 - 对象 【 实现 new 过程、实现 instanceof 】

发布时间 2023-04-11 23:15:10作者: caix-1987
在 JavaScript 中,new 关键字用于创建一个对象实例,它通常与构造函数一起使用。当使用 new 关键字时,会发生以下几件事情:

 1、创建一个新对象,并将该对象的属性设置为构造函数的原型(即 __proto__)

 2、将构造函数的作用域绑定到新对象上,并执行构造函数中的代码
 
 3、如果构造函数返回一个对象,则返回该对象;否则返回新创建的对象

通过使用 new 关键字可以创建一个新的对象实例,其内部会通过指定的构造函数来进行初始化,并且允许我们在构造函数中为对象添加属性和方法

instanceof 是 JavaScript 中的一元运算符,用于判断一个对象是否是另一个对象的实例。它的基本语法为

object instanceof constructor

需要注意的是,在使用 instanceof 运算符时,constructor 必须是一个函数对象,否则会抛出一个 TypeError 异常。此外,由于 JavaScript 中对象的类型属于动态类型,因此在进行类型检测时需要格外小心,避免出现意料之外的错误

1、实现 new 的过程

// 方法一

function _myNew(fn, ...args) {
  const newObj = {};

  newObj.__proto__ = fn.prototype;

  fn.apply(newObj, args);

  return newObj;
}

// 方法二
function _myNew_2(fn, ...args) {
  if (typeof fn !== "function") {
    throw "fn must a function";
  }

  const obj = Object.create(fn.prototype);

  const res = fn.apply(obj, args);

  return res instanceof Object ? res : obj;
}
使用
function People(a) {
  this.name = "caix";
  this.sex = "男";
}

const people = _myNew(People, 1, 2, 3);

const people_1 = _myNew_2(People, 2, 3, 4, 5);

2、实现 instanceof

const myInstanceof = (obj, Fn) => {
  const flag =
    !["object", "function"].includes(typeof obj) ||
    typeof obj === null ||
    typeof Fn !== "function";

  if (flag) return;

  let proto = obj.__proto__;

  const prototype = Fn.prototype;

  while (true) {
    // 到达顶端 返回 false
    if (proto === null) return false;

    // 相等找到了 返回 true
    if (proto === prototype) return true;

    // 重新赋值向上查找
    proto = proto.__proto__;
  }
};
使用
const testObj = new Object();

console.log("myInstanceof", myInstanceof(people_1, People)); // true

console.log("myInstanceof", myInstanceof(testObj, People)); // false