首頁  >  文章  >  web前端  >  詳解JavaScript ES6新的類別語法實戰選項卡

詳解JavaScript ES6新的類別語法實戰選項卡

巴扎黑
巴扎黑原創
2017-09-04 10:34:111582瀏覽

下面小編就為大家帶來一篇js es6系列教學 - 新的類別語法實戰選項卡(詳解)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧

其實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 p {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   display: none;
  }

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

  .active {
   background: yellow;
  }

html程式碼:


<p id="tab">
  <input type="button" value="点我1" data-target="#p1" class="active">
  <input type="button" value="点我2" data-target="#p2">
  <input type="button" value="点我3" data-target="#p3">
  <input type="button" value="点我4" data-target="#p4">
  <p id="p1">1</p>
  <p id="p2">2</p>
  <p id="p3">3</p>
  <p id="p4">4</p>
 </p>

javascript程式碼:


##

window.onload = () => {
   class Tab {
    constructor( context ) {
     let cxt = context || document;
     this.aInput = cxt.querySelectorAll( "input" );
     this.ap = cxt.querySelectorAll( "p" );
    }
    bindEvent(){
     let targetId = null;
     this.aInput.forEach(( ele, index )=>{
      ele.addEventListener( "click", ()=>{
       targetId = ele.dataset.target;
       this.switchTab( ele, targetId );
      });
     });
    }
    switchTab( curBtn, curId ){
     let op = document.querySelector( curId );
     this.ap.forEach(( ele, index )=>{
      ele.style.display = &#39;none&#39;;
      this.aInput[index].className = &#39;&#39;;
     });
     curBtn.className = &#39;active&#39;;
     op.style.display = &#39;block&#39;;
    }
   }
   new Tab( document.querySelector( "#tab" ) ).bindEvent();
  }

以上是詳解JavaScript ES6新的類別語法實戰選項卡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn