JavaScript海底两万里:构造器

争取一文帮自己搞清楚JavaScript中的构造器。


构造器

在JavaScript中,我们通常使用let obj = {...};的方式来创建一个对象,或者是通过let obj = new Object();的方式,前者属于字面量的方式,而后者就是本篇要聊的话题之一 —— 构造器Constructor

常规的{...}语法允许创建一个对象,然而有时候需要创建很多类似的对象,例如多个用户或者菜单项等等,这类需求可以通过构造函数与"new"操作符来实现。

构造函数在技术上与常规函数相同,但是存在两个约定(不是规定):

  1. 它们的命名以大写字母开头
  2. 它们只能由"new"操作符来执行

一个例子可以像这样:

1
2
3
4
5
function User(name) {
this.name = name;
}

let user = new User("Jack");

这跟Java的构造方法其实有几分相似之处。在Java中,我们通过new一个class的方式在创建一个对象,实际上Java会调用这个类的构造方法来创建对象。而在JavaScript中,我们不需要像Java那么规范地先写class再写构造方法,**JavaScript的构造函数能够在通过new操作符执行时候创建一个新的空对象并分配给this**,函数体中的内容会修改this的属性,最后返回this

技术上来说任何函数都可以作为构造器,但箭头函数除外,它没有自己的this

对于最后“返回this”的这个步骤,其实是解释器帮助我们完成的,因为我们不需要显式地写出return语句,但并非不允许在里面写returnreturn语句存在一条规则:如果return返回一个对象,那么就返回这个对象,其他情况都返回this

1
2
3
4
5
6
7
8
function User(name) {
this.name = name;
return { name: 'Jack' }; // 返回一个对象
}

let newUser = new User('John');

console.log(newUser); // { name: 'Jack' }
1
2
3
4
5
6
7
8
function User(name) {
this.name = name;
return 1; // 返回非对象
}

let newUser = new User('John');

console.log(newUser); // User { name: 'John' }

所以用构造函数来创建对象具有很大的灵活性,其实这跟Java还是比较类似的,可以暂时参考Java的类来理解JavaScript的构造函数,所以构造函数中不仅可以添加属性,也可以添加方法,像这样:

1
2
3
4
5
6
7
8
9
10
function User(name) {
this.name = name;

this.sayHi = function() {
console.log('Hi, my name is ' + this.name + '.');
}
}

let john = new User('John');
john.sayHi(); // Hi, my name is John.

JavaScript海底两万里:构造器
https://skycurtain.github.io/2022/09/01/javascript-drowning-in-constructor/
作者
Skycurtain
发布于
2022年9月1日
许可协议