微客导航 » 文章资讯 » js es6系列教程 - 新的类语法实战选项卡(详解)

js es6系列教程 - 新的类语法实战选项卡(详解)

2023-09-25 10:31:10 167

其实es6的面向对象很多原理和机制还是ES5的，只不过把语法改成类似php和java老牌后端语言中的面向对象语法.

一、用es6封装一个基本的类

classPerson{
constructor(uName){
this.userName=uName;
}
sayName(){
returnthis.userName;
}
}

是不是很向php和java中的类,其实本质还是原型链，我们往下看就知道了

首先说下语法规则：

classPerson中的Person就是类名，可以自定义

constructor就是构造函数，这个是关键字，当实例化对象的时候，这个构造函数会被自动调用

letoP=newPerson('ghostwu');
console.log(oP.sayName());//ghostwu

console.log(oPinstanceofPerson);//true
console.log(oPinstanceofObject);//true

console.log(typeofPerson);//function
console.log(typeofPerson.prototype.sayName);//function
console.log(oP.__proto__===Person.prototype);//true
console.log('sayName'inoP);//true
console.log(Person.prototype);

第1行和第2行实例化和调用方法还是跟es5一样

第4行和第5行判断对象是否是类(Person)和Object的实例,结果跟es5一样，这个时候，我们肯定会想到Person的本质是否就是一个函数呢

第7行完全验证了我们的想法，类Person本质就是一个函数

第8行可以看到sayName这个函数其实还是加在Person的原型对象上

第9行还是验证了es5的原型链特点：对象的隐式原型指向构造函数的原型对象

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

这种类的语法，被叫做语法糖，本质还是原型链

二、利用基本的类用法，封装一个加法运算

classOperator{
constructor(n1=1,n2=2){
this.num1=n1;
this.num2=n2;
}
add(n1=10,n2=20){
letnum1=n1||this.num1,num2=n2||this.num2;
returnnum1+num2;
}
}
varoper=newOperator();
console.log(oper.add(100,200));

三、利用基本的类语法，封装经典的选项卡

css代码:

#tabdiv{
width:200px;
height:200px;
border:1pxsolid#000;
display:none;
}

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

.active{
background:yellow;
}

html代码:

javascript代码:

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

以上这篇jses6系列教程-新的类语法实战选项卡(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js es6系列教程 - 新的类语法实战选项卡(详解)

热门推荐

随机推荐