JS快速掌握ES6的class用法

作者：代码拾荒时间：2026-10-24 10:28:04浏览：646

本文详细解析ES6中class的语法特性，对比ES5原型链构建方式，阐述new关键字的工作机制。重点讲解静态方法、get/set访问器及计算属性命名，并深入剖析ES5组合继承与ES6 extends+super继承的实现原理与代码差异。

1.如何构造？

首先回顾ES5中常用的类构建方式：ES5通过原型对象来挂载实例方法。为什么不直接在构造函数内部定义方法？因为在实例化对象时，若每个实例都创建独立的方法副本，会造成内存资源的浪费。因此，标准做法是将共享方法挂载到构造函数的prototype属性上。

关于new操作符与this绑定的过程，可简化为以下步骤：

首先通过new关键字创建一个新的空对象。
接着将该新对象与构造函数的this关键字进行绑定。
然后将该对象的[[Prototype]]指向构造函数的prototype属性。
最后返回该新对象给调用者。

接下来通过具体示例进行说明：


fuction Animal(name,age){
  this.name = name
  this.age = age
  
  // 这样是浪费资源的
  // this.eat = function(){
  //   console.log("今天我吃饭了")
  // }
}

// 正确做法
Animal.prototype.eat=function(){
  console.log("今天我吃饭了")
}

随后展示ES6中的class语法，它显著简化了上述操作流程。


cosnt dog = new Animal("wangcai",2) // 会报错，ES6为了修改陋习，和let和const一样，class不会提升.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
}

cosnt dog = new Animal("wangcai",2)  //正确位置

此外，class语法还引入了静态方法、getter/setter访问器等新特性。


class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
  

 set name(value){
    this.tempname ="老铁"+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log("我现在是一个动物类")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) // 老铁agiao

// 静态方法
Animal.introuduce() // 我现在是一个动物类

在讨论继承之前，补充一个知识点：class的方法名可以通过计算属性（Computed Property Names）来动态命名。


let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log("一给我咧giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() // 一给我咧giao

2.继承

回到继承话题，ES5是如何实现继承的？


function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log("叫！")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

这里提到的是一种组合继承模式，具体如何实现？

在属性继承方面，采用借用构造函数的方式。例如执行Animal.call(this,name)，相当于在Dog的构造函数内部重新调用了一次Animal函数。尽管属性之间没有通过原型链连接，但由于Dog执行了Animal的代码逻辑，因此Dog实例自然获得了Animal的name属性。


Animal.call(this,name)

在方法继承方面，采用原型式继承。众所周知，函数创建时会生成一个原型对象，该函数的prototype属性指向此原型对象，而原型对象的constructor属性又指回该函数。如果使用new创建该函数的实例，该实例的__proto__属性将指向函数的原型对象。利用这一特性，我们将被继承的函数实例化，并将该实例赋值给继承构造函数的prototype属性，从而形成原型链。需要注意的是，通过new生成的被继承函数实例不具备constructor属性，因此需要手动将其constructor指向继承的构造函数。


Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

按照上述逻辑，使用ES5语法使Dog函数继承Animal函数的name属性和break方法。

那么ES6是如何处理这一过程的？


class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log("叫！")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

现在只需在声明Dog类时添加extends Animal，并在constructor构造函数中调用super即可。

此处的super(name)等价于ES5中的Animal.call(this,name)。至于方法继承问题，无需再手动操作prototype，extends关键字会自动处理原型链的链接。

以上就是JS快速掌握ES6的class用法的详细内容，更多关于JS ES6的class用法的资料请关注本站其它相关文章！

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00