其实es6的面向对象很多原理和机制还是ES5的，只不过把语法改成类似PHP和java老牌后端语言中的面向对象语法.
一、用es6封装一个基本的类
是不是很向PHP和java中的类,其实本质还是原型链，我们往下看就知道了
首先说下语法规则：
class Person中的Person就是类名，可以自定义
constructor就是构造函数，这个是关键字，当实例化对象的时候，这个构造函数会被自动调用
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 );
第4行和第5行判断对象是否是类(Person)和Object的实例,结果跟es5一样， 这个时候，我们肯定会想到Person的本质是否就是一个函数呢
第7行完全验证了我们的想法，类Person本质就是一个函数
第8行可以看到sayName这个函数其实还是加在Person的原型对象上
第9行还是验证了es5的原型链特点：对象的隐式原型指向构造函数的原型对象
第10行验证oP对象通过原型链查找到sayName方法
这种类的语法，被叫做语法糖，本质还是原型链
二、利用基本的类用法，封装一个加法运算
三、利用基本的类语法，封装经典的选项卡
css代码:
display: block;
}
.active {
background: yellow;
}
javascript代码:
以上这篇js es6系列教程 - 新的类语法实战选项卡(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36692.html