JavaScript 构造函数

x33g5p2x  于2022-04-18 转载在 Java  
字(4.1k)|赞(0)|评价(0)|浏览(547)

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

  1. // constructor function
  2. function Person () {
  3. this.name = 'John',
  4. this.age = 23
  5. }
  6. // create an object
  7. const person = new Person();

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

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

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

  1. // constructor function
  2. function Person () {
  3. this.name = 'John',
  4. this.age = 23,
  5. this.greet = function () {
  6. console.log('hello');
  7. }
  8. }
  9. // create objects
  10. const person1 = new Person();
  11. const person2 = new Person();
  12. // access properties
  13. console.log(person1.name); // John
  14. console.log(person2.name); // John

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

JavaScript this 关键字

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

  1. // constructor function
  2. function Person () {
  3. this.name = 'John',
  4. }
  5. // create object
  6. const person1 = new Person();
  7. // access properties
  8. console.log(person1.name); // John

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

JavaScript 构造函数的形参

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

  1. // constructor function
  2. function Person (person_name, person_age, person_gender) {
  3. // assigning parameter values to the calling object
  4. this.name = person_name,
  5. this.age = person_age,
  6. this.gender = person_gender,
  7. this.greet = function () {
  8. return ('Hi' + ' ' + this.name);
  9. }
  10. }
  11. // creating objects
  12. const person1 = new Person('John', 23, 'male');
  13. const person2 = new Person('Sam', 25, 'female');
  14. // accessing properties
  15. console.log(person1.name); // "John"
  16. console.log(person2.name); // "Sam"

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

  1. const person1 = new Person('John', 23, 'male');
  2. const person2 = new Person('Sam', 25, 'male');

这允许每个对象具有不同的属性。如上所示,
    console.log(person1.name); 得到 John
    console.log(person2.name); 得到 Sam

创建对象:构造函数 VS 对象字面量(Object Literal)
  • 对象字面量通常用于创建单个对象。如果要创建多个对象,构造函数很有用。例如,
  1. // using object literal
  2. let person = {
  3. name: 'Sam'
  4. }
  1. // using constructor function
  2. function Person () {
  3. this.name = 'Sam'
  4. }
  5. let person1 = new Person();
  6. let person2 = new Person();
  • 从构造函数创建的每个对象都是唯一的。可以具有与构造函数相同的属性,也可以向一个特定对象添加新属性。例如,
  1. // using constructor function
  2. function Person () {
  3. this.name = 'Sam'
  4. }
  5. let person1 = new Person();
  6. let person2 = new Person();
  7. // adding new property to person1
  8. person1.age = 20;

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

  1. // using object lateral
  2. let person = {
  3. name: 'Sam'
  4. }
  5. console.log(person.name); // Sam
  6. let student = person;
  7. // changes the property of an object
  8. student.name = 'John';
  9. // changes the origins object property
  10. console.log(person.name); // John

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

在对象中添加属性和方法

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

  1. // constructor function
  2. function Person () {
  3. this.name = 'John',
  4. this.age = 23
  5. }
  6. // creating objects
  7. let person1 = new Person();
  8. let person2 = new Person();
  9. // adding property to person1 object
  10. person1.gender = 'male';
  11. // adding method to person1 object
  12. person1.greet = function () {
  13. console.log('hello');
  14. }
  15. person1.greet(); // hello
  16. // Error code
  17. // person2 doesn't have greet() method
  18. person2.greet();

输出

  1. hello
  2. Uncaught TypeError: person2.greet is not a function

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

JavaScript 对象原型

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

  1. // constructor function
  2. function Person () {
  3. this.name = 'John',
  4. this.age = 23
  5. }
  6. // creating objects
  7. let person1 = new Person();
  8. let person2 = new Person();
  9. // adding new property to constructor function
  10. Person.prototype.gender = 'Male';
  11. console.log(person1.gender); // Male
  12. console.log(person2.gender); // Male

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

JavaScript 内置构造函数

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

  1. let a = new Object(); // A new Object object
  2. let b = new String(); // A new String object
  3. let c = new Number(); // A new Number object
  4. let d = new Boolean(); // A new Boolean object

在 JavaScript 中,可以通过以下方式将字符串创建为对象:

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

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

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

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

  1. const count = new Boolean(true);
  2. 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

相关文章

最新文章

更多