JavaScript 构造函数

Question

在本教程中，您将借助示例学习 JavaScript 构造函数 。

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

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// create an object
let 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
let person1 = new Person();
let person2 = new Person();

// access properties
console.log(person1.name);  // John
console.log(person2.name);  // John

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

---

JavaScript 这个关键字

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

// constructor function
function Person () {
    this.name = 'John',
}

// create object
let 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 object
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

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


// creating objects
let person1 = new Person('John', 23, 'male');
let person2 = new Person('Sam', 25, 'female');

// accessing properties
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"

在上面的示例中，我们在对象创建期间将参数传递给了构造函数 。

let person1 = new Person('John', 23, 'male');
let person2 = new Person('Sam', 25, 'male');

这允许每个对象具有不同的属性。如上图所示

console.log(person1.name); 给约翰

console.log(person2.name); 给山姆

---

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

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

// 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 对象是唯一的， person1 用于 person2 对象。

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

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

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

let 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

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

但是，此新属性和方法仅添加到 object1 。您无法从 object2 访问 gender 或 greet() 。因此，当我们尝试访问 person2.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 中，可以通过以下方式将字符串创建为对象：

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

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

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

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

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

注意 ：建议使用原始数据类型并以常规方式创建它们，例如 let name = 'John'; ， let number = 57; 并 let count = true;

您不应将字符串，数字和布尔值声明为对象，因为它们会使程序变慢。

---

注意 ：在 JavaScript 中，关键字 class 是 ES6(ES2015) 中引入的，它也允许我们创建对象。类类似于 JavaScript 中的构造函数。