本文摘自PHP中文网,作者青灯夜游,侵删。
在ECMAScript6规范之前,JavaScript没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。而ECMAScript6后,可以使用class关键字来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
JavaScript 是基于对象,但不完全面向对象的编程语言。在 JS 面向对象的编程模式中,有两个核心概念: 对象和类。在 ECMAScript6 规范之前,JavaScript 没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。
在ES6中新增了class关键字用来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。但是可以看作是语法糖,因为它还是构造函数和原型的概念。
1 类声明
定义类有2中方式,类声明和类表达式:
1 2 3 4 |
|
2 为什么说它是语法糖
因为类实际上它是一个function,区别在于构造函数是函数作用域,类是块级作用域,类中的方法,都是定义在类的prototype上面,所以文章开头说它还是构造函数和原型的概念:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
3 类包含的属性和方法
类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法,但这些都不是必需的。空的类定义照样有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
3.1 类的构造函数
类的构造函数关键字是constructor,它同等于原型中的prototype.constructor。
如果没有写constructor函数,那么会默认有一个空的constructor函数。
1 2 3 4 5 6 7 |
|
当使用new操作符创建实例时,会调用constructor构造函数。
3.2 类的方法
1 2 3 4 |
|
3.3 类的静态方法
跟类的方法一样,只不过前面加上static关键字。
静态方法不会被实例继承。
父类的静态方法可以被子类继承。
1 2 3 4 5 6 7 8 9 10 |
|
3.4 类的私有方法
es6中没有提供这个方法,但是通常都是在方法前面加上下划线来表示。
1 2 3 4 5 6 |
|
3.5 取值函数(getter)和存值函数(setter)
在类中有set和get关键词,可以对某个属性设置存值和取值函数,拦截它的存取行为。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
4 类的继承
4.1 通过extends实现继承
类的继承通过extends关键字。
1 2 3 4 5 6 7 |
|
4.2 super方法
注意如果子类如果没写constructor构造函数,则会默认有constructor构造函数和super方法,但是如果显性的写了constructor构造函数,那么必须在子类的构造函数中添加super方法,添加之后会调用父类的构造函数并得到父类的属性和方法,如果没有添加super方法则会报ReferenceError错误。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
super方法中也可以传参
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
5 其他
5.1 方法中的this指向
类的方法中如果有this,那么它指向的是类的实例。但是如果将它单独拿出来使用那么会报错。
1 2 3 4 5 6 7 8 9 10 11 |
|
解决办法有2种:
1、在构造函数中绑定this
1 2 3 4 5 6 7 8 9 |
|
2、使用箭头函数
1 2 3 4 5 6 7 8 9 |
|
5.2 区分是否继承了这个类
区分是否继承了这个类使用Object.getPrototypeOf函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
【推荐学习:javascript高级教程】
以上就是javascript 没有类吗的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中substr和substring的区别是什么
更多相关阅读请进入《javascript》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者