ES5 和 ES6 类的实现

1. 定义方式

ES5:通过构造函数和原型链模拟类

javascript 复制代码
// 构造函数作为类的定义
function Person(name) {
  this.name = name;
}

// 原型上定义方法
Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

ES6 :使用 class 关键字声明类,语法更简洁清晰

javascript 复制代码
class Person {
  // 构造方法
  constructor(name) {
    this.name = name;
  }
  
  // 类方法(自动添加到原型)
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}

2. 继承实现

ES5 :通过 call/apply 继承属性,Object.create 继承方法

javascript 复制代码
function Student(name, grade) {
  // 继承属性
  Person.call(this, name);
  this.grade = grade;
}

// 继承方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 子类方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying`);
};

ES6 :使用 extends 关键字声明继承,super 调用父类

javascript 复制代码
class Student extends Person {
  constructor(name, grade) {
    // 必须先调用super()
    super(name);
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying`);
  }
}

3. 方法定义

  • ES5:所有方法需显式添加到原型上
  • ES6:类体内直接定义方法,自动成为原型方法,无需手动绑定原型

4. 静态方法

  • ES5:直接挂载到构造函数上
javascript 复制代码
Person.create = function(name) {
  return new Person(name);
};
  • ES6 :使用 static 关键字声明
javascript 复制代码
class Person {
  static create(name) {
    return new Person(name);
  }
}

总结

ES6 的 class 本质上是 ES5 原型继承的语法糖,但提供了更清晰、更接近传统面向对象语言的语法,同时增加了一些新特性,使类的定义和继承更加直观和易于维护。不过,理解 ES5 的原型实现有助于深入掌握 JavaScript 的面向对象本质。

相关推荐
lbh8 分钟前
Chrome DevTools 详解(二):Console 面板
前端·javascript·浏览器
ObjectX前端实验室15 分钟前
【react18原理探究实践】更新阶段 Render 与 Diff 算法详解
前端·react.js
wxr061636 分钟前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
万邦科技Lafite1 小时前
如何对接API接口?需要用到哪些软件工具?
java·前端·python·api·开放api·电商开放平台
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
看晴天了1 小时前
🌈 Tailwind CSS 常用类名总结
前端
看晴天了1 小时前
Tailwind的安装,配置,使用步骤
前端
看晴天了1 小时前
nestjs学习, PM2进程守护,https证书配置
前端
blues_C2 小时前
Playwright MCP vs Chrome DevTools MCP vs Chrome MCP 深度对比
前端·人工智能·chrome·ai·chrome devtools·mcp·ai web自动化测试
木心操作2 小时前
nodejs动态创建sql server表
前端·javascript·sql