ES6 类语法实战：从基础原理到选项卡组件封装详解

作者：纸飞机时间：2026-10-22 07:50:32浏览：219

本文深入解析ES6中class语法的底层原理，指出其本质仍为ES5的原型链机制。通过Person类示例验证构造函数、原型对象及实例关系，并演示默认参数用法。最后结合HTML与CSS，完整封装一个基于ES6 Class的选项卡交互组件，提供从理论到实战的全套代码参考。

ES6类语法与原型链原理

ES6中的面向对象机制在底层原理上与ES5保持一致，主要区别在于语法层面采用了类似PHP和Java等后端语言的面向对象风格。

一、使用ES6语法封装基础类


class Person{
   constructor( uName ){
    this.userName = uName;
   }
   sayName(){
    return this.userName;
   }
  }

这种写法看起来与PHP和Java中的类定义非常相似，但其本质依然是原型链机制，后续内容将对此进行验证。

首先介绍相关的语法规则：

在class Person中，Person为自定义的类名。

constructor是构造函数关键字，当使用new实例化对象时，该函数会自动被调用。


let oP = new Person( 'ghostwu' );
  console.log( oP.sayName() ); //ghostwu

  console.log( oP instanceof Person ); //true
  console.log( oP instanceof Object ); //true
 
  console.log( typeof Person ); //function
  console.log( typeof Person.prototype.sayName ); //function
  console.log( oP.__proto__ === Person.prototype ); //true
  console.log( 'sayName' in oP ); //true 
  console.log( Person.prototype );

第1行和第2行的对象实例化及方法调用方式，与ES5保持完全一致。

第4行和第5行通过instanceof判断对象是否属于Person类和Object类的实例，结果与ES5相同。由此可推测，Person类的本质可能是一个函数。

第7行的代码完全证实了上述推测，即类Person在底层本质上是一个函数。

第8行显示，sayName方法实际上被添加到了Person的原型对象上。

第9行再次验证了ES5原型链的特征：对象的隐式原型（__proto__）指向构造函数的原型对象（prototype）。

第10行验证了oP对象通过原型链成功查找到sayName方法。

这种类定义语法被称为“语法糖”，其底层实现机制依然是原型链。

ES6类语法实战应用

二、利用基础类用法封装加法运算


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;
   }
  }
  var oper = new Operator();
  console.log( oper.add( 100, 200 ) );

三、利用基础类语法封装经典选项卡组件

CSS代码部分如下：


#tab div {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   display: none;
  }

  #tab div:nth-of-type(1) {
   display: block;
  }

  .active {
   background: yellow;
  }

HTML结构代码如下：


<div id="tab">
  <input type="button" value="点我1" data-target="#div1" class="active">
  <input type="button" value="点我2" data-target="#div2">
  <input type="button" value="点我3" data-target="#div3">
  <input type="button" value="点我4" data-target="#div4">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
 </div>

JavaScript交互代码如下：


window.onload = () => {
   class Tab {
    constructor( context ) {
     let cxt = context || document;
     this.aInput = cxt.querySelectorAll( "input" );
     this.aDiv = cxt.querySelectorAll( "div" );
    }
    bindEvent(){
     let targetId = null;
     this.aInput.forEach(( ele, index )=>{
      ele.addEventListener( "click", ()=>{
       targetId = ele.dataset.target;
       this.switchTab( ele, targetId );
      });
     });
    }
    switchTab( curBtn, curId ){
     let oDiv = document.querySelector( curId );
     this.aDiv.forEach(( ele, index )=>{
      ele.style.display = 'none';
      this.aInput[index].className = '';
     });
     curBtn.className = 'active';
     oDiv.style.display = 'block';
    }
   }
   new Tab( document.querySelector( "#tab" ) ).bindEvent();
  }

以上关于js es6系列教程中新的类语法实战选项卡的详解内容即为全部分享，希望能为读者提供参考，并欢迎大家继续支持本站。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28