轻松学习 javascript——第 8 部分:javascript 中的类-亚博电竞手机版
本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!
ecmascript 6引入了class关键字以创建javascript中的类。现在,你可以使用class属性在javascript中创建类。在ecma 6之前,无论何时使用new运算符调用一个函数,该函数都会返回一个新对象。因此,此函数是作为一个类来使用的,并被称为构造函数。这种调用函数来返回对象的方式也被称为构造函数调用模式。
但在ecmascript 6中,可以使用class关键字创建类。请看下面的代码:
class car { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } }
在上面的代码片段中,你已经使用ecmascript 6 class关键字创建了一个名为car的类。你也可以创建一个car类的对象,如下所示:
var car1 = new car("bmw", 100); car1.getinfo(); var car2 = new car("audi", 150); car2.getinfo();
javascript类是惯常基于原型的继承的简化语法。它不提供任何新的对象创建或原型继承方式,并且不会在javascript中引入任何面向对象或继承的新模型。你也可以说类是创建对象的特殊函数。
类声明和表达
由于javascript中的class属性也是一个函数,所以也可以使用类声明和类表达式来创建。你可以使用类声明创建一个类,如下所示:
class car { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } }
类也可以使用类表达式来创建。你可以创建命名或未命名的类表达式。可以这样创建命名的类表达式,如下所示:
var car = class { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } tostring() { return `${this.maker} costs : ${this.price}`; } }
未命名的类表达式可以如下所示地被创建。给类表达式的名称是类主体的本地名称。
var car = class c { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } tostring() { return `${this.maker} costs : ${this.price}`; } }
类的提升
如前所述,一个类既可以作为声明又可以作为表达式来创建,但是与函数声明不同,类声明不会被提升到执行上下文的顶部。请看下面的代码:
var car1 = new car("bmw", 10); // reference error console.log(car1.tostring()); class car { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } tostring() { return `${this.maker} costs : ${this.price}`; } }
上面的代码会抛出引用错误(reference error),因为你在声明它之前试图访问一个类。因此,我们可以得到函数声明被提升,而类声明不被提升的结论。
类方法
javascript类中有三种类型的方法:
- 构造方法。
- 静态方法。
- 原型方法。
类构造函数方法创建初始化对象。一个类只能有一个构造方法。如果你尝试创建多个构造函数方法,则javascript将引发异常。可以使用关键字constructor 创建构造函数,如下面的代码所示:
class car { constructor(maker, price) { this.maker = maker; this.price = price; } }
javascript类的静态方法是用类调用的,而不是用类的特定对象调用的。如果你尝试用类的实例调用它们,则javascript将抛出异常。使用关键字static可以创建静态方法,如下所示:
class car { static count() { console.log("i am static method"); } } car.count(); car.count();
如果你试图用实例调用静态方法,那么javascript会抛出异常说明这个函数不存在。另外,请记住,javascript类没有静态属性或成员。截至目前,它只支持静态方法。
任何使用类实例访问的常规方法都被称为原型方法。这些方法可以继承和使用类的对象。
class car { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } } var car1 = new car("bmw", 10); car1.getinfo();
在上面的代码片段中,getinfo()是car类的原型方法。正如你所看到的,我们正在使用car类的实例。由于它是原型方法,所以也可以继承。让我们来探讨为什么这些方法被称为原型方法。首先,考虑下面的代码:
class car { constructor(maker, price) { this.maker = maker; this.price = price; } getinfo() { console.log(this.maker " costs : " this.price); } } console.log(typeof (car)); // function
在这个代码片段中,我们输入了一个car类的类型,也得到了一个函数的输出。正如你所看到的,这个类只是一个函数类型,所以和其他函数一样,它也有一个prototype属性。这些常规的方法是类的原型对象的方法,因此它们被称为原型方法。它们可以通过坚持基于原型的继承而被继承。
除了这三种类型的方法之外,javascript也有一些叫getter和setter的东西,你可以点此处了解。
结论
在这篇文章中,我们简要介绍了ecmascript 2015中引入的javascript类属性。使用class关键字,我们可以创建一个类,但是请记住,这不是引入对象创建或继承的新方法。相反,对于相同的对象和基于原型的继承,这只是一个更简单的语法。
系列目录
轻松学习 javascript——第 1 部分:了解 let 语句
轻松学习 javascript——第 2 部分:函数中的 rest 参数
轻松学习 javascript——第 3 部分:函数中的默认参数
轻松学习 javascript——第 4 部分:函数中的 arguments 对象
轻松学习 javascript——第 5 部分:简化函数提升
轻松学习 javascript——第 6 部分:javascript 箭头函数
轻松学习 javascript——第 7 部分:对象属性描述符
轻松学习 javascript——第 8 部分:javascript中的类
译文链接:http://www.codeceo.com/article/easy-javascript-08-class.html 英文原文:easy javascript part 10: class in javascript? 翻译作者:码农网 – 小峰 [ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]