手写 typeof 和 instanceof 的原理和实践

2023-10-01 09:50:06

绪论

在 JavaScript 中，typeof 和 instanceof 是两个非常重要的操作符，它们可以用来检查变量的类型。typeof 操作符返回一个字符串，表示变量的类型，而 instanceof 操作符返回一个布尔值，表示变量是否属于某个类。

typeof 操作符

typeof 操作符的语法非常简单，它只有一个参数，即要检查类型的值。typeof 操作符可以返回以下几种值：

"undefined"：如果值是 undefined，则返回 "undefined"。
"boolean"：如果值是布尔值，则返回 "boolean"。
"number"：如果值是数字，则返回 "number"。
"string"：如果值是字符串，则返回 "string"。
"object"：如果值是对象，则返回 "object"。
"function"：如果值是函数，则返回 "function"。
"symbol"：如果值是 Symbol 值，则返回 "symbol"。

console.log(typeof undefined); // "undefined"
console.log(typeof true); // "boolean"
console.log(typeof 10); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof { name: "John Doe" }); // "object"
console.log(typeof function() {}); // "function"
console.log(typeof Symbol("symbol")); // "symbol"

需要注意的是，typeof 操作符不能区分数组和对象。数组和对象都是对象，因此 typeof 操作符都会返回 "object"。

instanceof 操作符

instanceof 操作符的语法也非常简单，它有两个参数，即要检查类型的对象和要检查的类。instanceof 操作符返回一个布尔值，表示对象是否属于该类。

console.log("hello" instanceof String); // true
console.log([1, 2, 3] instanceof Array); // true
console.log({ name: "John Doe" } instanceof Object); // true
console.log(function() {} instanceof Function); // true

instanceof 操作符不仅可以检查对象是否属于某个类，还可以检查对象是否属于某个类的子类。例如，以下代码检查对象是否属于 Error 类的子类：

console.log(new TypeError() instanceof Error); // true

实现原理

typeof 操作符

typeof 操作符的实现原理很简单，它只需要检查值的类型，然后返回相应的字符串即可。以下是 typeof 操作符的实现代码：

function myTypeOf(value) {
  if (value === undefined) {
    return "undefined";
  } else if (value === null) {
    return "object";
  } else if (typeof value === "object") {
    if (Array.isArray(value)) {
      return "array";
    } else if (value instanceof Date) {
      return "date";
    } else if (value instanceof RegExp) {
      return "regexp";
    } else {
      return "object";
    }
  } else {
    return typeof value;
  }
}

instanceof 操作符

instanceof 操作符的实现原理要比 typeof 操作符复杂一些。instanceof 操作符需要检查对象的原型链，看看它是否属于某个类的原型链。以下是 instanceof 操作符的实现代码：

function myInstanceof(object, constructor) {
  let proto = object.__proto__;
  while (proto !== null) {
    if (proto === constructor.prototype) {
      return true;
    }
    proto = proto.__proto__;
  }
  return false;
}

应用场景

typeof 和 instanceof 操作符在实际项目中有很多应用场景。例如：

类型检查：可以使用 typeof 操作符来检查变量的类型，以确保它们符合预期的类型。
对象检测：可以使用 instanceof 操作符来检测对象是否属于某个类，以确保它们具有预期的行为。
类型转换：可以使用 typeof 操作符来获取变量的类型，以便进行相应的类型转换。
鸭子类型：可以使用 instanceof 操作符来实现鸭子类型，即只要对象具有预期的行为，就可以将其视为具有预期的类型。

总结

typeof 和 instanceof 是 JavaScript 中非常重要的两个操作符，它们可以用来检查变量的类型。typeof 操作符可以返回变量的类型字符串，而 instanceof 操作符可以返回变量是否属于某个类的布尔值。这两种操作符在实际项目中有很多应用场景，例如类型检查、对象检测、类型转换和鸭子类型。