未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

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

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

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

首先说下语法规则:

class Person中的Person就是类名,可以自定义

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

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行判断对象是否是类(Person)和Object的实例, 结果跟es5一样, 这个时候,我们肯定会想到Person的本质是否就是一个函数呢

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

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

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

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

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

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

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系列教程 - 新的类语法实战选项卡(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 其实
分页:12
转载请注明
本文标题:js es6系列教程 - 新的类语法实战选项卡(详解)
本站链接:http://www.codesec.net/view/563677.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(49)