javascript 没有类吗

PHP中文网 • 2025年3月11日 23:04:30 • 编程技术 • 阅读 2

在ECMAScript6规范之前，JavaScript没有类的概念，仅允许通过构造函数来模拟类，通过原型实现继承。而ECMAScript6后，可以使用class关键字来定义类，使用class关键字定义类的写法更加清晰，更像面向对象的语法。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

JavaScript 是基于对象，但不完全面向对象的编程语言。在 JS 面向对象的编程模式中，有两个核心概念：对象和类。在 ECMAScript6 规范之前，JavaScript 没有类的概念，仅允许通过构造函数来模拟类，通过原型实现继承。

在ES6中新增了class关键字用来定义类，使用class关键字定义类的写法更加清晰，更像面向对象的语法。但是可以看作是语法糖，因为它还是构造函数和原型的概念。

1 类声明

定义类有2中方式，类声明和类表达式：

立即学习“Java免费学习笔记（深入）”；

// 类声明class Student {}// 类表达式const Student = class {}

登录后复制

2 为什么说它是语法糖

因为类实际上它是一个function，区别在于构造函数是函数作用域，类是块级作用域，类中的方法，都是定义在类的prototype上面，所以文章开头说它还是构造函数和原型的概念：

class Student {take() {}}const a = new Student()console.log(typeof Student)// functionconsole.log(a.take === Student.prototype.take) // true// 同等于function Student() {}Student.prototype.take = function() {}const a = new Student()console.log(typeof Student)// functionconsole.log(a.take === Student.prototype.take) // true

登录后复制

3 类包含的属性和方法

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。

class Student {// 实例属性 也可以放在这// b = 1// 静态属性static a = 1// 构造函数constructor() {// 实例属性 - 也可以放在类的最顶层this.b = 1}// 获取函数get myName() {}// 设置函数set myName() {}// 静态方法 不会被实例继承static show() {}// 方法take() {}// 私有方法_take() {}}

登录后复制

3.1 类的构造函数

类的构造函数关键字是constructor，它同等于原型中的prototype.constructor。
如果没有写constructor函数，那么会默认有一个空的constructor函数。

class A {constructor() {this.name = '小明'}}const b = new A()b.constructor === A.prototype.constructor // true

登录后复制

当使用new操作符创建实例时，会调用constructor构造函数。

3.2 类的方法

class Student {// 方法take() {}}

登录后复制

3.3 类的静态方法

跟类的方法一样，只不过前面加上static关键字。
静态方法不会被实例继承。
父类的静态方法可以被子类继承。

class A {// 静态方法static show() {console.log('hi')}}class B extends A {}const c = new A()c.show() // c.show is not a functionB.show() // hi

登录后复制

3.4 类的私有方法

es6中没有提供这个方法，但是通常都是在方法前面加上下划线来表示。

class A {// 私有方法_show() {    console.log('hi')  }}

登录后复制

3.5 取值函数（getter）和存值函数（setter）

在类中有set和get关键词，可以对某个属性设置存值和取值函数，拦截它的存取行为。

class A {  constructor () {    this.name = '小米'  }  get name () {    return 'get'  }  set name (val) {    console.log('set' + val)  }}const b = new A()b.name // getb.name = 123 // set123

登录后复制

4 类的继承

4.1 通过extends实现继承

类的继承通过extends关键字。

class A {// 静态方法static show() {    console.log('hi')  }}class B extends A {}

登录后复制

4.2 super方法

注意如果子类如果没写constructor构造函数，则会默认有constructor构造函数和super方法，但是如果显性的写了constructor构造函数，那么必须在子类的构造函数中添加super方法，添加之后会调用父类的构造函数并得到父类的属性和方法，如果没有添加super方法则会报ReferenceError错误。

class A {  constructor () {    this.name = '小米'  }show() {    console.log('hi')  }}class B extends A {  constructor () {  super() // 如果不写super，则会报ReferenceError错误  }}const c = new B()

登录后复制

super方法中也可以传参

class A {  constructor (name) {    this.name = name  }show() {    console.log('hi')  }}class B extends A {  constructor () {    super('小红')  }}const c = new B()c.name // 小红

登录后复制

5 其他

5.1 方法中的this指向

类的方法中如果有this，那么它指向的是类的实例。但是如果将它单独拿出来使用那么会报错。

class A {  constructor () {    this.name = '小米'  }  show () {    console.log(this.name)  }}const b = new A()b.show() // 小米const { show } = b // Cannot read property 'name' of undefined

登录后复制

解决办法有2种:

1、在构造函数中绑定this

class A {  constructor () {    this.name = '小米'    this.show = this.show.bind(this)  }  show () {    console.log(this.name)  }}

登录后复制

2、使用箭头函数

class A {  constructor () {    this.name = '小米'    this.show = () => this  }  show () {    console.log(this.name)  }}

登录后复制

5.2 区分是否继承了这个类

区分是否继承了这个类使用Object.getPrototypeOf函数。

class A {  constructor () {    this.name = '小米'  }show() {    console.log('hi')  }}class B extends A {  constructor () {    super()  }}class C {}Object.getPrototypeOf(B) === A // true 是继承的A类Object.getPrototypeOf(B) === C // false 没有继承C类

登录后复制

【推荐学习：javascript高级教程】

以上就是javascript 没有类吗的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2948031.html