Detailed explanation of JavaScript ES6's new class syntax practical tab

The following editor will bring you a series of js es6 tutorials - new class syntax practical tab (detailed explanation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

In fact, many of the object-oriented principles and mechanisms of es6 are still those of ES5, but the syntax is changed to object-oriented syntax similar to that in the old back-end languages ​​of php and java.

1. Use es6 to encapsulate a basic class

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

Is it very similar to the classes in PHP and Java? , In fact, the essence is still the prototype chain. We will know it if we look down.

First of all, let’s talk about the grammar rules:

Person in class Person is the class name, which can be customized

constructor is the constructor, this is a keyword, when instantiating an object, this constructor will be automatically called

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 );

Lines 1 and 2 instantiate and The calling method is still the same as es5

Lines 4 and 5 determine whether the object is an instance of class (Person) and Object. The result is the same as es5. At this time, we will definitely think about whether the essence of Person is a What about the function?

Line 7 completely verifies our idea. The Person class is essentially a function.

In line 8, you can see that the function sayName is actually added to the prototype object of Person.

Line 9 still verifies the prototype chain feature of es5: the implicit prototype of the object points to the prototype object of the constructor

Line 10 verifies that the oP ​​object finds the sayName method through the prototype chain

This kind of syntax is called syntactic sugar, and its essence is still a prototype chain

2. Use basic class usage to encapsulate an addition operation

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 ) );

3. Use basic class syntax to encapsulate classic tabs

css code:

#tab p {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   display: none;
  }

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

  .active {
   background: yellow;
  }

html code:

<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 code:

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 = 'none';
      this.aInput[index].className = '';
     });
     curBtn.className = 'active';
     op.style.display = 'block';
    }
   }
   new Tab( document.querySelector( "#tab" ) ).bindEvent();
  }

The above is the detailed content of Detailed explanation of JavaScript ES6's new class syntax practical tab. For more information, please follow other related articles on the PHP Chinese website!