【零基础学JS - 19 】JavaScript中的对象 之 构造方法Constructor

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

在JavaScript中，构造函数用于创建对象。例如，

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建对象
const person = new Person();

在上面的示例中，Person()函数是一个对象构造函数。

要从构造函数创建对象，我们使用new关键字。

注意：将构造函数的首字母大写被认为是一种良好的习惯。

使用构造函数创建多个对象

在JavaScript中，您可以使用构造函数创建多个对象。例如，

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23,

     this.greet = function () {
        console.log('hello');
    }
}

// 创建对象
const person1 = new Person();
const person2 = new Person();

// 访问属性
console.log(person1.name);  // John
console.log(person2.name);  // John

在上面的程序中，使用相同的构造函数创建了两个对象。

JavaScript的this关键字

在JavaScript中，当在构造函数中使用this关键字时，this指的是创建对象时的对象。例如，

// 构造函数
function Person () {
    this.name = 'John',
}

// 创建对象
const person1 = new Person();

// 访问属性
console.log(person1.name);  // John

因此，当对象访问属性时，可以直接访问person1.name属性。

JavaScript构造函数参数

您还可以创建带有参数的构造函数。例如，

// 构造函数
function Person (person_name, person_age, person_gender) {

   // 将参数值分配给调用对象
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

    this.greet = function () {
        return ('Hi' + ' ' + this.name);
    }
}

// 创建对象
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');

// 访问属性
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"

在上面的示例中，我们在创建对象时向构造函数传递了参数。

const person1 = new Person('John', 23, 'male');和const person2 = new Person('Sam', 25, 'male');允许每个对象具有不同的属性。如上所示，

console.log(person1.name);输出John

console.log(person2.name);输出Sam

创建对象：构造函数 vs 对象字面量

对象字面量通常用于创建单个对象。如果要创建多个对象，则构造函数很有用。例如，

// 使用对象字面量
let person = {
    name: 'Sam'
}

// 使用构造函数
function Person () {
    this.name = 'Sam'
}

let person1 = new Person();
let person2 = new Person();

从构造函数创建的每个对象都是唯一的。您可以具有与构造函数相同的属性，或者将新属性添加到特定对象中。例如，

// 使用构造函数
function Person () {
    this.name = 'Sam'
}

let person1 = new Person();
let person2 = new Person();

// 向person1添加新属性
person1.age = 20;

现在，age属性是person1对象特有的，不可用于person2对象。

然而，如果使用对象字面量创建对象，并且如果使用该对象值定义变量，则变量值的任何更改都将更改原始对象。例如，

// 使用对象字面量
let person = {
    name: 'Sam'
}

console.log(person.name); // Sam

let student = person;

// 更改对象的属性
student.name = 'John';

// 更改原始对象的属性
console.log(person.name); // John

当使用对象字面量创建对象时，从该对象派生的任何对象变量将作为原始对象的克隆。因此，您对一个对象所做的任何更改也会反映在另一个对象中。

向对象添加属性和方法

您可以像这样向对象添加属性或方法：

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建对象
let person1 = new Person();
let person2 = new Person();

// 向person1对象添加属性
person1.gender = 'male';

// 向person1对象添加方法
person1.greet = function () {
    console.log('hello');
}

person1.greet();   // hello

// 错误代码
// person2没有greet()方法
person2.greet();

输出

hello
Uncaught TypeError: person2.greet is not a function

在上面的示例中，将新属性gender和新方法greet()添加到了person1对象。

然而，这个新属性和方法只添加到了person1。您无法从person2访问gender或greet()。因此，当我们尝试访问person2.greet()时，程序报错。

JavaScript对象原型

您还可以使用原型向构造函数添加属性和方法。例如，

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建对象
let person1 = new Person();
let person2 = new Person();

// 向构造函数添加新属性
Person.prototype.gender = 'Male';

console.log(person1.gender); // Male
console.log(person2.gender); // Male

要了解更多关于原型的知识，请访问JavaScript原型。

JavaScript内置构造函数

JavaScript还具有内置的构造函数。其中一些是：

let a = new Object();    // 创建一个新的Object对象
let b = new String();    // 创建一个新的String对象
let c = new Number();    // 创建一个新的Number对象
let d = new Boolean();   // 创建一个新的Boolean对象

在JavaScript中，字符串可以通过以下方式创建为对象：

const name = new String ('John');
console.log(name); // "John"

在JavaScript中，数字可以通过以下方式创建为对象：

const number = new Number (57);
console.log(number); // 57

在JavaScript中，布尔值可以通过以下方式创建为对象：

const count = new Boolean(true);
console.log(count); // true

注意：建议使用基本数据类型并以正常方式创建它们，例如const name = 'John';，const number = 57;和const count = true;。

不应将字符串、数字和布尔值声明为对象，因为它们会减慢程序的运行速度。

注意：在JavaScript中，关键字class在ES6（ES2015）中引入，它也允许我们创建对象。类在JavaScript中类似于构造函数。要了解更多，请访问JavaScript类。