詳解JavaScript ES6新的類別語法實戰選項卡-js教程-PHP中文網

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

巴扎黑

發布： 2017-09-04 10:34:11

原創

1596 人瀏覽過

下面小編就為大家帶來一篇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( &#39;ghostwu&#39; );
  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( &#39;sayName&#39; 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中文網其他相關文章！