es6, this and bind

 

 

 

 

 

/* --------------------------------------------------------
*
* Basic
*
-----------------------------------------------------------*/
var Basic = function($Control, $obj){
 
    //private
    var name = "Basic";
    var author = "serpiko";
    var ver = "2020.03.03";
 
  // bind
    this.nextShow = this.nextShow.bind(this);
 
    //public
    this.name = name;
  this.basicElement = this.inherit( BasicElement, this.basicElement ); //엘리먼트만 사용하기위해서 객체 상속
  this.control    = $Control;
  this.model = $Control.model;
  this.basicValidate = $Control.basicValidate;
  this.layerPopup = $Control.layerPopup;
  
    //extend
    this.defaultObj = {
    };
 
    for(var key in $obj) if( $obj.hasOwnProperty(key) ) this.defaultObj[key] = $obj[key];
 
    //build
    this.build();
}//end. Basic
 
Basic.prototype = ( () => {
    
    return{
        
        constructor: Basic,
        
        /******************************************************************************************************************
        *
        *    inherit : 상속 함수
        *
        ******************************************************************************************************************/
        inherit: function( Parent, Child ){
            Child = function(){
                Parent.call( this );
            }
            
            try{
                if (!Object.create) {
                    Object.create = (function(){
                        function F(){}
                            return function(o){
                            if (arguments.length != 1) {
                                throw new Error('Object.create 의 implementation은 하나의 파라메터만 허용합니다.');
                            }
                            F.prototype = o;
                            return new F();
                        }
                    })();
                }
                
                Child.prototype = Object.create( Parent.prototype );
                
                Child.prototype.constructor = Child;
                
                //override
                //Child.prototype.build = function(){ alert('hi, I am a Child'); };
                
                var child = new Child();
                if(child instanceof Parent === true) 
                    return child;
                else 
                    return new Parent();
 
            }catch(e){
                throw new Error( "[ inherit Error ] : "+ Parent.name +"객체를 상속받지 못했습니다. "+ Parent.name +" 객체를 '확인'해 주세요." );
            }
        },
        
 
        /******************************************************************************************************************
        *
        *    constructor
        *
        ******************************************************************************************************************/
        build(){
            if( typeof this.control == "undefined" || this.control.name != "Control"  ){
                throw new Error( "["+this.name+"] : Control 객체를 상속받지 못했습니다. Control 객체를 먼저 '생성'해 주세요." );
                return false;
      }
      
      //( () => this.stepClickHandler() )();
      //( () => this.addEventListener() )();
      this.stepClickHandler();
      this.addEventListener();
    },
        
         stepClickHandler(){
      
      $(".step-btn").on("click touchstart", e => {
        e.stopPropagation();
        e.preventDefault();
        
        this.model.prevStep = this.model.currentStep;
        
        // console.log( this.model.currentStep );
        switch( this.model.currentStep ){
 
          // 시작하기 => 반려견 선택 => 이름
          case 0:
            this.layerPopup.open( $('.modal-layer-area.dog-selection') );
          break;
 
          case 1:
            if( this.basicValidate.validateName() ) this.nextShow();
          break;
 
          // 견종 => 생일
          case 2:
                      //if( this.basicValidate.validateBreed() ) this.prepareBirthday( this.nextShow ); // undefined
                        if( this.basicValidate.validateBreed() ) this.prepareBirthday( () => this.nextShow() );
          break;
                }
            });
        },
        
        nextShow( callback ){
            
            console.log(this);
 
      $(".step-"+this.model.prevStep).hide();
      this.model.currentStep++;
 
      // console.log( this.model.currentStep );
 
      if( "undefined" !== typeof(callback) ) {
                if( "function" == typeof(callback) ) callback();
                else throw new Error('callback is not a function!');
            }
        $(".step-"+this.model.currentStep).fadeIn('slow', function(){
      });
    },
        
        addEventListener(){
      $("#modalPetListConfirmBtn").click( e => {
                const pet_idx = $("input[name='pet_list']:checked").val();
        
        if( !pet_idx ) this.nextShow();
        else window.location.href = `${this.model.szEatStartMealUrl}?pet_idx=${pet_idx}&header=0&category=0`;
      });
 
      $("#modalPetListCloseBtn").click( e=>{
        this.nextShow();
      });
    },
        
    }
    
});

 

15 : 처럼 직접 bind 하거나

 

124 : 처럼 유실된 컨텍스트를 arrow function을 사용하여 동일한 생성자의 인스턴스를 참조하므로 this는 Basic 객체를 가르킨다.

 

참고로 jquery 이벤트 핸들러의 this는 버튼엘리먼트 객체가 아니므로 event.currentTarget을 제이쿼리 셀렉터로 캡쳐해서 $(e.currentTarget) 방식으로 사용..

 

 

 

 

 

source : https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/