不得不看之JavaScript构造函数及new运算符

不得不看之JavaScript构造函数及new运算符攻略

什么是构造函数

构造函数是一种特殊的函数，用于创建自定义对象。 JavaScript 提供了很多预定义的构造函数，比如 Array, Date, Function 等等。我们也可以使用 function 关键字自定义构造函数。

构造函数的定义

在 JavaScript 中，构造函数就是一个普通的函数，它可以通过 new 关键字来调用，创建一个新的对象。

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

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

console.log(person1); // Person { name: 'Alice', age: 30 }
console.log(person2); // Person { name: 'Bob', age: 25 }

上面的例子中，Person 就是一个构造函数。我们使用 new 关键字，调用 Person 函数，创建了两个新的对象：person1 和 person2。在构造函数中，我们使用 this 关键字表示新创建的对象。

构造函数中的 name 和 age 参数，分别用于设置新对象的 name 和 age 属性。

构造函数的特点

构造函数的特点是，创建的对象都是相同类型的，他们都有相同的属性和方法，它们都是由相同的构造函数创建的。

console.log(person1.constructor === Person); // true
console.log(person2.constructor === Person); // true

上面的例子中，我们使用 constructor 属性检查 person1 和 person2 的构造函数是否为 Person。

new 运算符

new 运算符用于创建一个新的对象，并调用指定的构造函数。它返回一个新的对象，如果构造函数中没有显示地返回任何数据，则返回新创建的对象。

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

const person = new Person('Alice', 30);

console.log(person); // Person { name: 'Alice', age: 30 }

上面的例子中，我们创建了一个 Person 的对象 person。

当使用 new 运算符创建一个新对象时，JavaScript 会执行以下操作：

1. 创建一个新的空对象。
2. 将新创建的空对象的原型链指向构造函数的 prototype 属性。
3. 将构造函数的 this 关键字指向新创建的空对象，执行构造函数的代码。
4. 如果构造函数没有显示地返回任何数据，则返回新创建的对象。

new 运算符与普通函数的区别

使用 new 运算符调用构造函数创建对象与使用普通函数调用创建对象的区别在于：

1. 使用 new 运算符调用构造函数时，会执行上面的四个步骤，创建一个新的对象，并将 this 关键字指向新创建的对象。而普通函数的 this 关键字则指向全局对象（window 或 global）, 通常会导致不可预料的后果。
2. 使用 new 运算符调用构造函数时，会让新创建的对象的 __proto__ 属性指向构造函数的 prototype 属性，从而让新创建的对象可以使用构造函数原型链上的属性和方法。而普通函数创建的对象则没有原型链。

构造函数的继承

如果我们想让一个构造函数继承另一个构造函数的属性和方法，可以使用 JavaScript 的原型继承机制。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}!`);
}

function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}

Student.prototype = new Person();

const student = new Student('Alice', 1);

console.log(student.name); // 'Alice'
console.log(student.grade); // 1
student.sayHello(); // 'Hello, I'm Alice!'

上面的例子中，我们定义了一个 Person 和一个 Student 的构造函数。Person 中有一个 sayHello 方法，用于打个招呼。我们使用 Student.prototype = new Person() 让 Student 继承了 Person 的原型链，并在 Student 中定义了 name 和 grade 两个属性。

最后我们使用 new 运算符创建了一个 Student 对象 student，并验证了其能够使用 Person 原型链中的 sayHello 方法。

结束语

通过本篇攻略，你已经了解了 JavaScript 中的构造函数和 new 运算符的使用方法，并学会了如何实现构造函数的继承。掌握这些知识，可以让你更好地理解 JavaScript 的面向对象编程机制，从而开发出更加优秀的 JavaScript 代码。

阅读剩余 57%