跳到主要内容

JavaScript 构造函数

提示
  1. 构造函数的定义：在JavaScript中，构造函数用于创建对象，通常通过new关键字实例化。
  2. 构造函数参数和属性：构造函数可以包含参数和属性，允许创建具有不同属性的多个对象实例。
  3. 向对象添加属性和方法：可以向已创建的对象添加新的属性和方法，但这些添加仅对特定对象有效，不影响其他对象实例。

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

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

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

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

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

注意：将构造函数的首字母大写是一个良好的做法。

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

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

// 构造函数
function Person() {
  (this.name = "John"),
    (this.age = 23),
    (this.greet = function () {
      console.log("你好");
    });
}

// 创建对象
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 "你好" + " " + 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

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

  • 对象字面量通常用于创建单个对象。如果您想创建多个对象，则构造函数很有用。例如，
// 使用对象字面量
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("你好");
};

person1.greet(); // 你好

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

输出

你好
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 Prototype。

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 类。

最后于 更新