多个 JavaScript 构造函数的模式
Habdul Hazeez
2023年1月30日
2022年5月10日
本文将教你 JavaScript 中多个构造函数的五种不同模式。以下是多个构造函数的模式。
- 参数嗅探
- 静态方法
- 函数中的方法
- 带默认值的可选参数
- 单对象字面量
JavaScript 中的参数嗅探
参数嗅探是关于检查参数类型并为其创建构造函数。如果参数是字符串，你可以使用 typeof 运算符来确定字符串。
你还可以指定构造函数如何为字符串工作并为其他数据类型执行此操作。
代码：
function ConstructWithParam(a) {
if (typeof(a) === 'string') {
this.name = "You supplied a string";
console.log(this.name);
}
if (typeof(a) === 'number') {
this.name = "You supplied a number";
console.log("You supplied a number");
}
}
let aNumber = new ConstructWithParam(2);
let aString = new ConstructWithParam('Hello');
console.log(aNumber, aString);
输出：
You supplied a number
You supplied a string
Object { name: "You supplied a number" }
Object { name: "You supplied a string" }
在这种情况下，我们在控制台中记录了一条消息。
JavaScript 中的静态方法
你可以创建返回新类实例的静态方法，从而产生多个构造函数。如果你想严格地实例化一个类或创建具有复杂组合的对象，你会发现这种方法很有用。
代码：
class multiConstructor {
constructor (w = '',x = '',y = '',z = '') {
this.w = w;
this.x = x;
this.y = y;
this.z = z;
}
static WandXInstance(w,x) {
return new multiConstructor(w,x, '', '');
}
static YandZInstance(y,z) {
return new multiConstructor('', '', y, z)
}
}
let objectWithDefaultConstructor = new multiConstructor('Alpha', 'Bravo');
let objectFromStaticMethod = multiConstructor.YandZInstance('Charlie', 'Delta');
console.log(objectWithDefaultConstructor);
console.log(objectFromStaticMethod);
输出：
Object { w: "Alpha", x: "Bravo", y: "", z: "" }
Object { w: "", x: "", y: "Charlie", z: "Delta" }
这些静态方法使用不同的类参数并返回该类的新实例。你不仅限于使用默认构造函数创建一种类型的实例。
函数中的 JavaScript 方法
函数可以像其他所有对象一样具有属性和方法。使用函数中的方法，你可以使用这些方法来服务于构造函数的目的。
因此，你可以使用替代参数创建对象。尽管这些方法不是一个精确的构造函数，但在这种情况下它就是你所需要的。
我们在下面的代码中定义了一个函数并向它添加了一个方法。
代码：
function MultiCon(multicon) {
this.multicon = multicon;
}
MultiCon.prototype = {
multiCon: null,
}
MultiCon.someComponents = function(a, b) {
var ab = a + b;
return new MultiCon(ab);
}
var x = MultiCon.someComponents('Mada', 'Gascar');
var y = new MultiCon('Mada');
console.log(x,y);
输出：
Object { multicon: "MadaGascar" }
Object { multicon: "Mada" }
在此示例中，使用 new 关键字或使用 added 方法调用函数会产生相同的结果。
JavaScript 中具有默认值的可选参数
你可以向类构造函数添加可选参数，这些参数可以具有默认值。创建类实例时，我们不必指定所有参数。
代码：
class Employee {
constructor (first_name, last_name, date_of_birth) {
this.first_name = first_name;
this.last_name = last_name;
this.date_of_birth = date_of_birth;
}
}
const newEmployee = new Employee('Scarlett', 'Johannsen', new Date(1989, 2, 20));
const newEmployee_noDOB = new Employee('Magaret', 'Tatcher');
const newEmployee_firstNameOnly = new Employee('John');
const newEmployee_noBioData = new Employee();
console.log(newEmployee);
console.log(newEmployee_noDOB);
console.log(newEmployee_firstNameOnly);
console.log(newEmployee_noBioData);
输出：
Object { first_name: "Scarlett", last_name: "Johannsen", date_of_birth: Date Mon Mar 20 1989 00:00:00
Object { first_name: "Magaret", last_name: "Tatcher", date_of_birth: undefined }
Object { first_name: "John", last_name: undefined, date_of_birth: undefined }
Object { first_name: undefined, last_name: undefined, date_of_birth: undefined }
但是，你无法知道该类是否从调用代码中接收到一个或多个值。你可以从之前的输出中注意到这一点，其中我们有一系列 undefined 值。
你可以设置类在没有收到任何参数时可以使用的默认值来处理这个问题。
代码：
class Employee {
constructor (first_name = "New Employee", last_name = "New Employee", date_of_birth = "1970-01-01") {
this.first_name = first_name;
this.last_name = last_name;
this.date_of_birth = date_of_birth;
}
}
const newEmployee_noBioData = new Employee();
const newEmployee_firstNameOnly = new Employee('John');
console.log(newEmployee_noBioData);
console.log(newEmployee_firstNameOnly);
输出：
Object { first_name: "New Employee", last_name: "New Employee", date_of_birth: "1970-01-01" }
Object { first_name: "John", last_name: "New Employee", date_of_birth: "1970-01-01" }
从类创建对象时，你可以使用 undefined 代替默认值。undefined 关键字告诉类在类定义中使用默认值。
class Employee {
constructor (first_name = "New Employee", last_name = "New Employee", date_of_birth = "1970-01-01") {
this.first_name = first_name;
this.last_name = last_name;
this.date_of_birth = date_of_birth;
}
}
const newEmployee_firstNameOnly = new Employee(undefined, 'Martinez');
console.log(newEmployee_firstNameOnly);
输出：
Object { first_name: "New Employee", last_name: "Martinez", date_of_birth: "1970-01-01" }
JavaScript 中的单个对象字面量
如果你有许多调用代码可能不使用的可选标志，则将可选参数放入单个对象中将很有用。对象属性没有类型检查或 linting，因此你无法判断属性名称是否有错误。
代码：
class System {
constructor(hardware_maker, chipset_maker, operatingSystem = {}) {
this.hardware_maker = hardware_maker;
this.chipset_maker = chipset_maker;
this.operatingSystem = operatingSystem;
}
}
const newSystem = new System('Intel', 'Nvidia', {'OS Version': 'Windows 7', 'Service Pack Update': '2009-03-05', 'Windows Update Last Checked': '2009-03-05'});
const newSystem2 = new System("AMD", 'GeoFeorce');
console.log(newSystem);
console.log(newSystem2);
输出：
Object { hardware_maker: "Intel", chipset_maker: "Nvidia", operatingSystem: { "OS Version": "Windows 7", "Service Pack Update": "2009-03-05", "Windows Update Last Checked": "2009-03-05" } }
Object { hardware_maker: "AMD", chipset_maker: "GeoFeorce", operatingSystem: {} }
在上面的代码中，我们设置了一个对象。该对象将获取 operatingSystem 对象内的操作系统详细信息。
Author: Habdul Hazeez
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn