购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.1 JavaScript构造函数

本节将介绍JavaScript构造函数的定义和使用。

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

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

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

1.1.1 原始构造函数

原始构造函数是最基本的构造函数方法。它使用关键字new创建新对象,并设置其属性和方法。以下是一个使用原始构造函数创建对象的示例。

```javascript
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
var person1 = new Person("Tom", 25, "男");
console.log(person1);
```

【代码解析】

注意,本书为所有代码标注了markdown标记,如上所示,“```”是markdown标记,javascript表示此段代码为javascript。

在上面的示例代码中,我们定义了一个名为Person的构造函数。它接收三个参数:name、age和gender。当我们使用关键字new创建一个新的Person对象时,我们传入这些参数并将它们分配给该对象的属性。最后,可以通过访问person1对象来查看它的属性值。

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

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

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

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

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

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

本节内容讲解构造函数中的实例属性和静态属性。1.1.1节定义了一个名为Person的构造函数,它接收三个参数:name、age和gender。

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

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

以下是一个静态属性示例。

```javascript
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本身,这种挂载属性的形式就是静态属性。

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

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

以下是向Person构造函数添加sayHi()方法示例。

```javascript
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()方法。

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

接下来看一下如何定义静态方法,通过构造函数直接访问的方法就是静态方法。

以下是定义静态方法示例。

```javascript
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()进行调用,这种通过构造函数直接调用的方法称作静态方法。 MWF1x9nERgIt60XpO5FeObAINHLQkAQV7JtFeYeVrwMgEoYBr0u0lblZs7xLdpY4

点击中间区域
呼出菜单
上一章
目录
下一章
×

打开