理解Javascript_11_constructor实现原理

什么是constructor

在 JavaScript 中，每一个函数都有一个特殊的属性叫做 constructor。这个属性指向的是函数的构造器。

例如，我们定义一个叫做 Person 的构造器函数：

function Person(name) {
  this.name = name;
}

那么 Person.prototype.constructor 属性就指向了 Person 函数本身。

constructor实现原理

在使用构造器创建对象时，会遵循以下流程：

1. 创建一个新的空对象。
2. 将新对象的原型（也就是 __proto__ 属性）指向构造器函数的 prototype 属性。
3. 将构造器函数的 this 指向这个新对象。
4. 执行构造器函数，如果函数中没有返回值或者返回非对象类型，则返回新对象。

function myConstructor() {
  this.property1 = 'value1';
  this.property2 = 'value2';
}

const newObj = new myConstructor();

// 执行流程大致如下：
// 1. 创建一个新的空对象：const newObj = {};
// 2. 将新对象的原型指向构造器函数的 prototype 属性：newObj.__proto__ = myConstructor.prototype;
// 3. 将构造器函数的 this 指向新对象：myConstructor.call(newObj);
// 4. 返回新对象：return newObj;

为什么使用constructor

使用构造器的好处是，可以方便地创建多个拥有相同属性和方法的对象。这样可以避免在每个对象中都定义一遍属性和方法。

例如，我们可以通过创建多个拥有相同属性和方法的 Person 对象来管理不同的用户：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.greet(); // 输出 'Hello, my name is Alice'
person2.greet(); // 输出 'Hello, my name is Bob'

示例说明

示例1：创建一个简单的类

下面的代码展示了如何创建一个类，并使用它创建多个具有相同属性和方法的对象：

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.greet(); // 输出 'Hello, my name is Alice'
person2.greet(); // 输出 'Hello, my name is Bob'

示例2：使用函数创建对象

下面的代码展示了如何使用函数创建对象并给对象添加属性和方法：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.greet(); // 输出 'Hello, my name is Alice'
person2.greet(); // 输出 'Hello, my name is Bob'

在这个例子中，我们可以通过 Person 函数，创建具有相同属性和方法的 person1 和 person2 对象。

阅读剩余 56%