深入理解 JavaScript 关键字 instanceof 和 new 的实现原理

2023-10-11 15:03:50

JavaScript 的 instanceof 和 new 是两个常用的，它们在面向对象编程中发挥着重要作用。instanceof 用于判断一个对象是否属于某个类或接口，而 new 用于创建新对象的实例。这两个关键字的实现原理并不复杂，但掌握它们的底层运行机制可以帮助我们更好地理解 JavaScript 的面向对象机制和原型链。

1. instanceof 操作符

instanceof 操作符用于判断一个对象是否属于某个类或接口。它的语法格式为：

object instanceof constructor

其中，object 是要判断的对象，constructor 是类或接口的构造函数。如果 object 是 constructor 的一个实例，则返回 true，否则返回 false。

例如，以下代码将创建一个 Person 类，然后使用 instanceof 操作符判断一个对象是否是 Person 类的实例：

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

const person = new Person('John');

console.log(person instanceof Person); // true

2. new 操作符

new 操作符用于创建新对象的实例。它的语法格式为：

new constructor(...args)

其中，constructor 是类的构造函数，...args 是传递给构造函数的参数。new 操作符将调用构造函数并创建一个新对象，然后返回这个新对象。

例如，以下代码将创建一个 Person 类的实例，并使用 new 操作符创建了一个新的 Person 对象：

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

const person = new Person('John');

console.log(person); // { name: 'John' }

3. instanceof 和 new 的实现原理

instanceof 和 new 操作符的实现原理其实很简单，它们都是通过原型链来判断对象是否属于某个类或接口，以及创建新对象的实例。

3.1 instanceof 的实现原理

instanceof 操作符的实现原理是，它会沿着对象的原型链向上查找，直到找到 constructor 的原型对象。如果找到，则返回 true，否则返回 false。

例如，以下代码将创建一个 Person 类，然后使用 instanceof 操作符判断一个对象是否是 Person 类的实例：

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

const person = new Person('John');

console.log(person instanceof Person); // true

在上面的代码中，person 对象的原型对象是 Person.prototype。而 Person.prototype 的原型对象是 Object.prototype。Object.prototype 是所有对象的根原型对象。因此，instanceof 操作符沿着对象的原型链向上查找，直到找到 Person.prototype。由于 Person.prototype 是 Person 类的原型对象，因此返回 true。

3.2 new 的实现原理

new 操作符的实现原理是，它会创建一个新的对象，然后将这个新对象的原型对象设置为 constructor 的原型对象。然后，它会调用 constructor 的构造函数，并将新对象作为参数传递给构造函数。

例如，以下代码将创建一个 Person 类的实例，并使用 new 操作符创建了一个新的 Person 对象：

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

const person = new Person('John');

console.log(person); // { name: 'John' }

在上面的代码中，new 操作符创建了一个新的对象，然后将这个新对象的原型对象设置为 Person.prototype。然后，它调用了 Person 的构造函数，并将新对象作为参数传递给构造函数。构造函数将把 name 参数的值赋给新对象的 name 属性。因此，新对象将具有一个 name 属性，其值为 'John'。