首页 > 编程笔记 > JavaScript笔记 阅读:4

JavaScript构造函数的用法(附带实例)

JavaScript 中,构造函数是一种特殊的函数,其主要用途是实例化对象并初始化对象的属性和方法。通过使用构造函数,我们可以方便地创建多个相似的对象,而不必重复编写代码。

构造函数还提供了一种可重复使用和扩展的方式以创建对象。无论你是刚开始学习 JavaScript 还是已经具备一定经验,掌握构造函数的概念和运用对于提高代码的可维护性和重用性都是非常有益的。

接下来,我们将深入探讨构造函数的细节,并通过实例和示例代码说明其用法和优势。

原始构造函数

原始构造函数是最基本的构造函数方法。它使用关键字 new 创建新对象,并设置其属性和方法。以下是一个使用原始构造函数创建对象的示例。
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
var person1 = new Person("Tom", 25, "男");
console.log(person1);
在上面的示例代码中,我们定义了一个名为 Person 的构造函数。它接收三个参数:name、age 和 gender。当我们使用关键字 new 创建一个新的 Person 对象时,我们传入这些参数并将它们分配给该对象的属性。最后,可以通过访问 person1 对象来查看它的属性值。

使用原始构造函数创建对象有助于在代码中创建可重复使用的对象模板。通过使用构造函数,我们可以轻松创建多个具有相似属性和方法的对象。

此外,原始构造函数还可以使用原型(prototype)添加和共享方法。原型是一个指向对象的引用,我们可以向其添加方法和属性,并让所有通过该构造函数创建的对象都能访问这些方法和属性。

通过使用原始构造函数和原型,我们可以创建出更加灵活和可扩展的对象。这种方式不仅可以提高代码的可读性和可维护性,还可以节省内存空间。

在实际开发中,我们经常使用原始构造函数来创建对象,并在其基础上构建复杂的应用程序。无论是创建一个人物角色,还是构建一个电子商务网站的产品实例,原始构造函数都是一个非常有用的工具。

总而言之,原始构造函数是创建对象的一种基本方法。它使用关键字 new 来实例化对象,并设置其属性和方法。在代码中使用原始构造函数可以提高可重用性和可扩展性,同时也能使代码更加整洁和易于维护。使用原始构造函数和原型可以构建出更灵活和高效的对象。无论你是在开发小型项目还是复杂的应用程序,原始构造函数都是不可或缺的工具。

构造函数中的实例属性和静态属性

前面定义了一个名为 Person 的构造函数,它接收三个参数:name、age 和 gender。

由于构造函数中的 this 表示实例对象本身,所以 name、age 和 gender 三个属性又称作实例属性。换言之,通过实例对象访问的属性就是实例属性。

作为对比,通过构造函数直接访问的属性就是静态属性。

以下是一个静态属性示例:
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Person.msg="Hello World";
var person1 = new Person("Tom", 25, "男");
console.log(person1);
console.log(Person.msg);
上述代码在 Person 构造函数中新增了 msg 属性,person1 是通过构造函数创建的实例对象,此时 person1 中并没有打印 msg 属性,这是因为 msg 并不是实例属性。

msg 属性挂载到构造函数 Person 本身,这种挂载属性的形式就是静态属性。

构造函数中的实例方法和静态方法

在构造函数中为了节约内存,方法一般会添加到构造函数的原型对象中。如果将方法定义在构造函数内部,后期每创建一个实例对象都会相对应地创建其方法,从而导致消耗内存,所以我们将方法定义在构造函数的原型对象中。

以下是向 Person 构造函数添加 sayHi() 方法示例:
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Person.prototype.sayHi=function{
  console.log("实例方法")
}
var person1 = new Person("Tom", 25, "男");
console.log(person1);
person1.sayHi()
上述代码调用 Person.prototype 向原型对象中添加了 sayHi() 方法,通过实例对象 person1 可以直接调用 sayHi() 方法。

通过实例对象访问的方法可以称作实例方法。

接下来看一下如何定义静态方法,通过构造函数直接访问的方法就是静态方法。以下是定义静态方法示例:
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Person.show=function{
  console.log("静态方法")
}
var person1 = new Person("Tom", 25, "男");
console.log(person1);
Person.show()
上述代码在 Person 构造函数中直接挂载 show() 方法。注意,并不是在 Person.prototype 原型对象中。

show() 方法通过构造函数 Person.show() 直接调用,而不是通过 person1.show() 进行调用,这种通过构造函数直接调用的方法称作静态方法。

相关文章