轻松学习 JavaScript(8):JavaScript 中的类

英文: Dhananjay Kumar 译文:码农网/小峰

www.codeceo.com/article/easy-javascript-08-class.html

ECMAScript 6引入了class关键字以创建JavaScript中的类。现在,你可以使用class属性在JavaScript中创建类。在ECMA 6之前,无论何时使用new运算符调用一个函数,该函数都会返回一个新对象。因此,此函数是作为一个类来使用的,并被称为构造函数。这种调用函数来返回对象的方式也被称为构造函数调用模式。但在ECMAScript 6中,可以使用class关键字创建类。请看下面的代码:

classCar{

constructor(maker,price){

this.maker=maker;

this.price=price;

}

getInfo(){

console.log(this.maker+" costs : "+this.price);

}

}

在上面的代码片段中,你已经使用ECMAScript 6 class关键字创建了一个名为Car的类。你也可以创建一个Car类的对象,如下所示:

varcar1=newCar("BMW",100);

car1.getInfo();

varcar2=newCar("Audi",150);

car2.getInfo();

JavaScript类是惯常基于原型的继承的简化语法。它不提供任何新的对象创建或原型继承方式,并且不会在JavaScript中引入任何面向对象或继承的新模型。你也可以说类是创建对象的特殊函数。

类声明和表达

由于JavaScript中的class属性也是一个函数,所以也可以使用类声明和类表达式来创建。你可以使用类声明创建一个类,如下所示:

classCar{

constructor(maker,price){

this.maker=maker;

this.price=price;

}

getInfo(){

console.log(this.maker+" costs : "+this.price);

}

}

类也可以使用类表达式来创建。你可以创建命名或未命名的类表达式。可以这样创建命名的类表达式,如下所示:

varCar=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}`;

}

}

未命名的类表达式可以如下所示地被创建。给类表达式的名称是类主体的本地名称。

varCar=classc{

constructor(maker,price){

this.maker=maker;

this.price=price;

}

getInfo(){

console.log(this.maker+" costs : "+this.price);

}

toString(){

return`${this.maker}costs:${this.price}`;

}

}

类的提升

如前所述,一个类既可以作为声明又可以作为表达式来创建,但是与函数声明不同,类声明不会被提升到执行上下文的顶部。请看下面的代码:

varcar1=newCar("BMW",10);// Reference Error console.log(car1.toString());

classCar{

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 创建构造函数,如下面的代码所示:

classCar{

constructor(maker,price){

this.maker=maker;

this.price=price;

}

}

JavaScript类的静态方法是用类调用的,而不是用类的特定对象调用的。如果你尝试用类的实例调用它们,则JavaScript将抛出异常。使用关键字static可以创建静态方法,如下所示:

classCar{

staticcount(){

console.log("I am static method");

}

}

Car.count();

Car.count();

如果你试图用实例调用静态方法,那么JavaScript会抛出异常说明这个函数不存在。另外,请记住,JavaScript类没有静态属性或成员。截至目前,它只支持静态方法。

任何使用类实例访问的常规方法都被称为原型方法。这些方法可以继承和使用类的对象。

classCar{

constructor(maker,price){

this.maker=maker;

this.price=price;

}

getInfo(){

console.log(this.maker+" costs : "+this.price);

}

}

varcar1=newCar("BMW",10);

car1.getInfo();

在上面的代码片段中,getInfo()是Car类的原型方法。正如你所看到的,我们正在使用Car类的实例。由于它是原型方法,所以也可以继承。让我们来探讨为什么这些方法被称为原型方法。首先,考虑下面的代码:

classCar{

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关键字,我们可以创建一个类,但是请记住,这不是引入对象创建或继承的新方法。相反,对于相同的对象和基于原型的继承,这只是一个更简单的语法。

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

本文来自企鹅号 - 前端大全媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的君君的前端之路

函数与作用域

14640
来自专栏从流域到海域

Python set(集合) 这一定是最全的介绍集合的博文

Python的set是一个无序且无重复元素的集合,概念上相当于数学上的无序集,数据结构上相当于dict的键。 既然set是集合,则必然可以实现并、交、...

23950
来自专栏ml

c语言格式大整理

1、C语言中,非零值为真,真用1表示;零值为假,假用0表示。 2、转义字符参考: \a 蜂鸣,响铃  \b 回退:向后退一格 ...

57570
来自专栏柠檬先生

常用正则表达式

一, 1.^\d+$    //匹配非负整数(正整数 + 0) ---^:以数字开头 +:之前紧邻出现的一次或多次 2.[0-9]*[1-9][0-9]*$...

659100
来自专栏Golang语言社区

Go语言interface详解

interface Go语言里面设计最精妙的应该算interface,它让面向对象,内容组织实现非常的方便,当你看完这一章,你就会被interface的巧妙设计...

37370
来自专栏禹都一只猫博客

Pandas文本数据处理 | 轻松玩转Pandas(4)

25920
来自专栏五分钟学算法

每天一算:Contains Duplicate II

15230
来自专栏Golang语言社区

Go语言interface详解

interface Go语言里面设计最精妙的应该算interface,它让面向对象,内容组织实现非常的方便,当你看完这一章,你就会被interface的巧妙设计...

37490
来自专栏HTML5学堂

获取对象具体类型的功能函数

HTML5学堂:JavaScript当中,时常会使用到typeof来进行数据类型的检测,但是我们觉得typeof不能够满足我们的需求,对于数组、函数、时间对象等...

33170
来自专栏青青天空树

数码管问题(c++实现)

    描述:液晶数码管用七笔阿拉数字表示的十个数字,把横和竖的一 个短划都称为一笔,即7有3笔,8有7笔等。对于十个数字一种排列,要做到  两相邻数字都可以由...

10620

扫码关注云+社区

领取腾讯云代金券