🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将带你深入了解JavaScript中的构造函数，让你掌握如何使用构造函数来创建对象，以及如何通过原型链来实现对象的继承。我们将从基础概念入手，逐步深入，带你揭开构造函数的神秘面纱。🌟

引言：

构造函数是JavaScript中一个非常重要的概念，它是用来创建对象的特殊函数。在JavaScript中，每个函数都可以用作构造函数，你可以通过new关键字来创建对象。构造函数的作用是创建对象并初始化对象的属性。在本篇文章中，我们将详细讲解构造函数的相关知识，帮助你更好地理解和应用这一概念。🎯

正文：

1. 基础概念

构造函数是一种特殊类型的函数，它的作用是创建对象并初始化对象的属性。在JavaScript中，每个函数都可以用作构造函数，当你使用new关键字调用一个函数时，该函数就会成为构造函数。

2. 构造函数的使用

（1）创建对象
使用构造函数创建对象的基本语法是：

const obj = new ConstructorFunction();

其中，ConstructorFunction是你定义的构造函数。
示例：

function Person(name, age) {this.name = name;this.age = age;
}
const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age); // 25

（2）构造函数的属性
构造函数有一个特殊的属性，即prototype属性。这个属性是一个对象，它包含了构造函数的默认属性和方法。
示例：

function Person() {// ...
}
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};
const person2 = new Person("Bob", 30);
person2.sayHello(); // Hello, my name is Bob

3. 构造函数的继承

在JavaScript中，继承是通过原型链实现的。你可以通过设置构造函数的prototype属性来继承其他构造函数的属性和方法。
示例：

function Animal() {this.species = "Animal";
}
function Dog() {// 继承AnimalAnimal.call(this);this.breed = "Dog";
}
// 设置Dog的原型为Animal的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {console.log("Woof woof");
};
const dog1 = new Dog();
console.log(dog1.species); // Animal
dog1.bark(); // Woof woof

4. 原型链

原型链是JavaScript中实现继承的基础。每个对象都有一个原型，对象通过原型链可以访问到构造函数的属性和方法。
示例：

function Person() {this.sayHello = function() {console.log("Hello, my name is " + this.name);};
}
const person3 = new Person("Charlie", 35);
console.log(person3.sayHello); // [Function: sayHello]
person3.sayHello(); // Hello, my name is Charlie

5. 动态原型

在JavaScript中，你可以使用Object.create()方法来创建一个空对象，然后将这个空对象设置为构造函数的prototype属性。这种方法称为动态原型，它可以让你在运行时动态地添加属性和方法。
示例：

function Person() {// ...
}
// 动态原型
Person.prototype = Object.create(null);
Person.prototype.constructor = Person;
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};
const person4 = new Person("Diana", 40);
person4.sayHello(); // Hello, my name is Diana

总结：

本文带你深入理解了JavaScript中的构造函数。你了解了构造函数的基础概念，如何使用构造函数