js instanceof用法|极客笔记

js instanceof用法

什么是`instanceof`

instanceof 是一个用于检测对象的原型链是否存在于指定构造函数的原型链上的运算符。它返回一个布尔值，表示对象是否是指定构造函数的实例。

`instanceof` 的语法

object instanceof constructor

其中，object 是要检测的对象，constructor 是待检测的构造函数。

`instanceof` 的使用场景

instanceof 主要是用于判断一个对象是否属于某个类型。它常用于判断一个对象是否属于某个类的实例，或者是某个类的子类的实例。

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('Hello, I am an animal.');
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof woof!');
  }
}

const animal = new Animal('Tommy');
const dog = new Dog('Bobby');

console.log(animal instanceof Animal);  // true
console.log(animal instanceof Dog);     // false
console.log(dog instanceof Animal);     // true
console.log(dog instanceof Dog);        // true

在上面的代码中，我们首先定义了两个类 Animal 和 Dog。Dog 是 Animal 的子类，继承了它的所有属性和方法。然后，我们分别创建了一个 animal 实例和一个 dog 实例。

接着，我们使用 instanceof 来检测这两个实例对象是否属于特定的类或子类。根据结果可以看到，animal 是 Animal 的实例，但不是 Dog 的实例；而 dog 则既是 Animal 的实例，也是 Dog 的实例。

原理解析

当使用 instanceof 运算符时，它会检查对象是否在构造函数的原型链上。如果在该原型链上，那么返回 true，否则返回 false。

让我们来看看 instanceof 背后的原理：

首先，判断 constructor.prototype 是否出现在 object 的原型链上。如果是，则返回 true。
如果 constructor.prototype 不在 object 的原型链上，那么继续判断 constructor.prototype 的原型链是否在 object 的原型链上。如果有任何一个满足，则返回 true，否则返回 false。

`instanceof` 的性能问题

尽管 instanceof 是用于检测对象是否属于某一类型的常用运算符，但在某些情况下，它会导致性能问题。

instanceof 运算符需要追溯构造函数和对象的原型链，如果链条过长，或者进行了大量的继承，那么运行 instanceof 的时间消耗会变得很大。

因此，在某些情况下，我们可以使用其他更高效的方法来判断对象的类型，例如使用 typeof 或 Object.prototype.toString()。

以下是使用 typeof 和 Object.prototype.toString() 检测对象类型的示例代码：

function checkType(obj, type) {
  if (typeof obj === type) {
    console.log('The object is of type ' + type);
  } else {
    console.log('The object is not of type ' + type);
  }
}

function checkObjectType(obj, type) {
  if (Object.prototype.toString.call(obj) === '[object ' + type + ']') {
    console.log('The object is of type ' + type);
  } else {
    console.log('The object is not of type ' + type);
  }
}

const num = 10;
const str = 'Hello';
const arr = [1, 2, 3];
const obj = { name: 'John' };

checkType(num, 'number');        // The object is of type number
checkType(str, 'string');        // The object is of type string
checkType(arr, 'object');        // The object is of type object
checkType(obj, 'object');        // The object is of type object

checkObjectType(num, 'Number');  // The object is not of type Number
checkObjectType(str, 'String');  // The object is not of type String
checkObjectType(arr, 'Array');   // The object is of type Array
checkObjectType(obj, 'Object');  // The object is of type Object

可以看到，使用 typeof 可以直接判断基本数据类型，而 Object.prototype.toString() 可以准确判断对象的类型。