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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
nginx下安装php7+php5
2016/07/31 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
js中的闭包实例展示
2018/11/01 Javascript
express 项目分层实践详解
2018/12/10 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python获取任意xml节点值的方法
2015/05/05 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
会计人员岗位职责
2014/03/19 职场文书
广告宣传策划方案
2014/05/21 职场文书
教师岗位职责范本
2015/04/02 职场文书
干部考核工作总结2015
2015/07/24 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫