在这篇文章中,你将了解到在JavaScript中开始使用类和面向对象编程方法所需要的一切。
在阅读本篇文章之前,你需要掌握JavaScript的基础知识。
面向对象编程
OOP使你更容易创建和管理你应用程序的许多部分,并在不使它们相互依赖的情况下将它们连接起来。接下来,让我们看看OOP的四个主要概念。
抽象
举例来说,当你在手机上发送消息时,所有将你的信息传递给对方的函数和逻辑都是隐藏的,因为你不需要知道它们是如何工作的。
抽象有助于降低复杂性,增加可用性,并使应用程序的变化不那么具有破坏性。
封装
举例来说,如果你正在建立一个航班预订的API,把搜索航班的代码和预订航班的代码分开是有意义的。这样一来,两个不同的开发者就可以无缝地在每个部分工作而不发生冲突,因为每个开发者都没有理由直接操作对方的代码。
继承
OOP中的继承降低了代码重复性,使你能够通过继承应用程序部分的属性和方法,在其他地方构建你的应用程序。
多态
在编程中,多态是一个术语,用来描述一个代码或程序,它可以通过根据给定的数据返回一个响应或结果来处理多个类型的数据。
多态可以帮助你消除复杂性和不必要的if
和switch
语句,因为在编写复杂的程序时,这些语句会变得冗长。
JavaScript对象
JavaScript中的对象是一个无序的键值对集合,也就是属性和值。对象的键可以是字符串,值可以是任何类型。
创建对象
在JavaScript中创建一个对象相当容易:
const car = {
name: 'Ford',
year: 2015,
color: 'red',
description: function ( {
return `${this.name} - ${this.year} - ${this.color}`;
}
}
上述代码声明了一个car
对象,对象属性包括name
、year
、color
以及description
函数。
访问对象属性
使用点符号
const country = {
name: 'Spain',
population: 4000000,
description: function ( {
return `${this.name} - ${this.population}`;
}
}
如果你有一个像上面所示的对象,你可以使用objectName.keyName
的格式,它应该返回给定键的值:
console.log(country.name; // returns 'Spain'
使用数组符号
const job = {
role: "Software Engineer",
'salary': 200000,
applicationLink: "meta.com/careers/SWE-role/apply",
isRemote: true,
};
如果你有一个像上面所示的对象,你可以使用objectName[keyName]
的格式,它应该返回给定键的值:
console.log(job[role]; // returns 'Software Engineer'
此外,你只能用数组符号来访问salary
属性。试图用点符号来获取它将返回一个错误:
console.log(job.'salary'; // SyntaxError: Unexpected string
接下来,我们来看看如何修改对象属性。
修改对象属性
编辑属性
const person = {
name: "John",
age: 30,
job: "Software Developer",
country: "Nigeria",
car: "Ford",
description: function ( {
return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
},
};
你还可以更改上述对象中name
的值:
person.name = "Smith Doe";
console.log(person.name; // returns "Smith Doe"
添加新属性
为了向对象中添加新属性,你可以使用点符号:
// adding a new `race` property
person.race = "Asian";
console.log(person.race; // returns "Asian"
删除对象属性
delete关键字从一个对象中删除属性:
delete person.race;
console.log(person.race; // returns 'undefined'
注意:你只能删除现有的对象属性。
检查属性
要确定一个属性是否存在于一个对象上,你可以使用in
关键字:
console.log('name' in person // returns true
console.log('race' in person // returns false
上面的代码对于name
的检查返回true
,因为name
存在,而对于被删除的race
属性返回false
。
类
在编程中,类是由程序员定义的一种结构,然后用来创建同一类型的多个对象。例如,如果你正在建立一个处理各种汽车的应用程序,你可以创建一个Car
类,它具有适用于所有车辆的基本功能和属性。然后,你可以用这个类来制作其他的汽车,并为它们添加每种汽车所特有的属性和方法。
job对象,你需要创建这样的东西:
const job2 = {
role: "Head of Design",
salary: 175000,
applicationLink: "amazon.com/careers/hod-role",
isRemote: false,
};
然而,正如你所看到的,上面创建多个对象的方式容易出错,并且不可扩展。因为你不可能在每次需要创建一个job
时都写出这些,从而产生100个job
对象。这时类就派上用场了。
创建类
Job类来简化创建多个job
:
class Job {
constructor(role, salary, applicationLink, isRemote {
this.role = role;
this.salary = salary;
this.applicationLink = applicationLink;
this.isRemote = isRemote;
}
}
上述代码创建了一个Job
类,具有role
、salary
、applicationLink
以及isRemote
属性。现在你可以使用new
关键字创建不同的job
:
let job1 = new Job(
"Software Engineer",
200000,
"meta.com/careers/SWE-role/apply",
true
;
let job2 = new Job(
"Head of Design",
175000,
"amazon.com/careers/hod-role",
false
;
上面的代码创建了两个不同的job
,包含所有的必填字段。让我们通过在控制台中打印出两个job
来看看这是否奏效:
console.log(job1;
console.log(job2;
打印结果为:
job和它们在控制台中的所有属性。
this关键字
this关键字被认为是最令人迷惑的关键字,因为它包含有不同的含义,这取决于在代码中什么位置出现。
this关键词指的是用Job
类创建的任何对象。因此,constructor
方法内部的this.role = role;
意味着,将你正在创建的这个对象的role
属性定义为给该构造函数的任何值。
Job对象时,你给出的初始值必须是按顺序的。例如,你像这样创建一个job3
对象:
let job3 = new Job(
"netflix.com/careers/HOE-role",
true,
"Head of Engineering"
;
console.log(job3
上述代码创建了一个新的job3
对象,该对象有着错误的属性顺序,并缺失了isRemote
属性。你会在控制台中得到以下结果: