JavaScript 构造函数

文章目录

使用构造函数创建多个对象
JavaScript this 关键字
JavaScript 构造函数的形参
创建对象：构造函数 VS 对象字面量（Object Literal）
在对象中添加属性和方法
JavaScript 对象原型
JavaScript 内置构造函数
参考文档

在本教程中，您将借助示例了解 JavaScript 构造函数。
在 JavaScript 中，构造函数用于创建对象。例如，

// constructor function
function Person () {this.name = 'John',this.age = 23
}// create an object
const person = new Person();

在上面的例子中，function Person() 是一个对象构造函数。
要从构造函数创建对象，我们使用 new 关键字。
注意：将构造函数的第一个字母大写被认为是一个很好的做法。

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

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

// constructor function
function Person () {this.name = 'John',this.age = 23,this.greet = function () {console.log('hello');}
}// create objects
const person1 = new Person();
const person2 = new Person();// access properties
console.log(person1.name);  // John
console.log(person2.name);  // John

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

JavaScript this 关键字

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

// constructor function
function Person () {this.name = 'John',
}// create object
const person1 = new Person();// access properties
console.log(person1.name);  // John

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

JavaScript 构造函数的形参

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

// constructor function
function Person (person_name, person_age, person_gender) {// assigning  parameter values to the calling objectthis.name = person_name,this.age = person_age,this.gender = person_gender,this.greet = function () {return ('Hi' + ' ' + this.name);}
}// creating objects
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');// accessing properties
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 对象字面量（Object Literal）

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

// using object literal
let person = {name: 'Sam'
}

// using constructor function
function Person () {this.name = 'Sam'
}let person1 = new Person();
let person2 = new Person();

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

// using constructor function
function Person () {this.name = 'Sam'
}let person1 = new Person();
let person2 = new Person();// adding new property to person1
person1.age = 20;

现在，age 属性是 person1 对象独有的，person2 对象无法使用。
但是，如果使用对象字面量创建对象，并且使用该对象值定义变量，则变量值的任何更改都将更改原始对象。例如，

// using object lateral
let person = {name: 'Sam'
}console.log(person.name); // Samlet student = person;// changes the property of an object
student.name = 'John';// changes the origins object property
console.log(person.name); // John

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

在对象中添加属性和方法

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

// constructor function
function Person () {this.name = 'John',this.age = 23
}// creating objects
let person1 = new Person();
let person2 = new Person();// adding property to person1 object
person1.gender = 'male';// adding method to person1 object
person1.greet = function () {console.log('hello');
}person1.greet();   // hello// Error code
// person2 doesn't have greet() method
person2.greet();

输出

hello
Uncaught TypeError: person2.greet is not a function

在上面的示例中，person1 对象中添加了一个新属性 gender 和一个新方法 greet（）。
然而，这个新的属性和方法只添加到 person1 中。您无法从 person2 访问 gender 或 greet() 。因此，当我们试图访问 person2.greet(); 时，程序会出错。

JavaScript 对象原型

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

// constructor function
function Person () {this.name = 'John',this.age = 23
}// creating objects
let person1 = new Person();
let person2 = new Person();// adding new property to constructor function
Person.prototype.gender = 'Male';console.log(person1.gender); // Male
console.log(person2.gender); // Male

要了解有关原型的更多信息，请访问JavaScript Prototype。

JavaScript 内置构造函数

JavaScript 也有内置的构造函数。他们之中有一些是：

let a = new Object();    // A new Object object
let b = new String();    // A new String object
let c = new Number();    // A new Number object
let d = new Boolean();   // A new Boolean object

在 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）中引入的，它还允许我们创建对象。class 类似于 JavaScript 中的构造函数。要了解更多信息，请访问 JavaScript 类。

上一教程 ：JS Methods 下一教程 ：Getter and Setter

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/constructor-function