JavaScript ES6의 새로운 클래스 구문 실습 탭에 대한 자세한 설명

아래 편집기는 일련의 js es6 튜토리얼 - 새로운 클래스 구문 실습 탭(자세한 설명)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터를 따라가서 살펴볼까요

사실 es6의 객체지향 원리와 메커니즘 중 많은 부분은 여전히 ​​ES5의 그것들이지만 구문은 예전 백엔드 언어와 비슷한 객체지향 구문으로 변경되었습니다 ​​​​php와 java의.

1. es6을 사용하면 기본 클래스를 캡슐화합니다

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

PHP와 Java의 클래스와 매우 유사합니까? 사실 본질은 여전히 ​​프로토타입인가요?

먼저 문법 규칙에 대해 이야기해 보겠습니다.

class Person in은 사용자 정의할 수 있는 클래스 이름입니다.

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와 동일합니다. class(Person)과 Object. 결과는 es5와 같습니다. 이때 Person의 본질이 함수인지 확실히 생각해 보겠습니다.

Person 클래스가 본질적으로 함수인지 확인합니다.

라인 8에서는 sayName 함수가 실제로 Person의 프로토타입 객체에 추가되는 것을 볼 수 있습니다.

라인 9에서는 여전히 es5 프로토타입 체인을 확인합니다. 특징: 객체의 암시적 프로토타입이 생성자의 프로토타입 객체를 가리킵니다.

Line 10은 프로토타입 체인을 통해 oP 객체가 sayName 메소드를 찾는 것을 확인합니다

이런 종류의 구문을 구문 설탕이라고 하며 본질은 여전히 ​​프로토타입 체인입니다

2. 기본 클래스 사용법을 사용하여 덧셈 연산을 캡슐화합니다.

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. 기본 클래스 구문을 사용하여 클래식 탭을 캡슐화합니다.

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>

자바스크립트 코드:

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

위 내용은 JavaScript ES6의 새로운 클래스 구문 실습 탭에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!