ES6新类语法实战：选项卡与面向对象编程

本篇文档是关于JavaScript ES6系列教程的实战案例，着重讲解了新的类语法在选项卡功能上的应用。作者jingxian在2021年9月2日分享了一篇文章，介绍了如何利用ES6的类来提升代码组织和面向对象编程的实践。 首先，文章提到ES6虽然在面向对象方面保留了ES5的基本原理和机制，但提供了更为直观和简洁的语法。例如，作者通过定义一个名为`Person`的类，展示了如何构造一个简单的类实例，包含构造函数（`constructor`）用于初始化对象属性（如`userName`），以及方法（`sayName`）用于返回用户的名字： ```javascript class Person { constructor(uName) { this.userName = uName; } sayName() { return this.userName; } } ``` 接着，文章进一步演示了如何利用类来封装一个简单的加法运算器，名为`Operator`，带有默认参数和重载方法，以便在不同场景下执行加法操作： ```javascript class Operator { constructor(n1 = 1, n2 = 2) { this.num1 = n1; this.num2 = n2; } add(n1 = 10, n2 = 20) { let num1 = n1 || this.num1, num2 = n2 || this.num2; return num1 + num2; } } ``` 然后，作者将这些概念扩展到实际应用中，展示了如何结合HTML、CSS和ES6类来创建一个简单的选项卡功能。CSS部分定义了选项卡的样式，HTML则包含多个按钮，每个按钮关联一个内容区域，而JavaScript负责动态切换显示内容： ```html <div id="tab"> <!-- ... --> </div> <!-- ... --> <input type="button" value="点我1" data-target="#div1" class="active"> <!-- ... --> ``` JavaScript代码中，`window.onload`事件监听器用于在页面加载完成后切换选项卡内容： ```javascript window.onload = function() { // ... var oper = new Operator(); // 点击事件处理逻辑，如：点击按钮时切换相关div的显示状态，并调用Operator的add方法 }; ``` 总结来说，这篇文档深入浅出地展示了如何使用ES6的新类语法来编写更易于维护和扩展的代码，包括基本的类和对象封装，以及实际应用场景中的选项卡控制。通过学习和实践，读者可以更好地理解和运用ES6类来构建现代Web应用。