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


Posted in Javascript onSeptember 02, 2017

其实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 event flow 的一个bug详解
Sep 17 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
Javascript函数的参数
Jul 16 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
使用vue-resource进行数据交互的实例
Sep 02 #Javascript
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
自制简易打赏功能的实例
Sep 02 #Javascript
Vue使用vue-cli创建项目
Sep 01 #Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 #Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 #Javascript
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
上班离岗检讨书
2014/09/10 职场文书
公证委托书标准格式
2014/09/11 职场文书
升职自荐信怎么写
2015/03/05 职场文书
个人德育工作总结
2015/03/05 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL