함수 내에서 javacript에서 2`this` 참조를 만드는 방법

Question

this 참조 때문에 더 작은 방법으로 분해하려고 할 때 코드가 작동하는 데 문제가 있습니다. 내 코드는 다음과 같다 :

const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` here refers to the pageObject 
     console.log(this); 

     $('.radio input[type="radio"]').on('click', function() { 

       // `this` here refers to the radio input 
       console.log(this); 

       let $id = $(this).data('id'); 

       // Error because `this` is referencing the radio input and not the pageObject. 
       this.doSomething($id); 
     } 

    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

는 또한 YDKJS: This & Object Prototypes에서 권고 ES6의 화살표 기능 () => 및 self = this 기술을 가능하면 사용하지 않도록합니다.

또한 pageObj하고 무선으로 입력되는 참조 this를 this하는 참조를 참조 .bind()/.call()/.apply()있어서 onChange()하는 방법이 있는가?

필요에 따라 코드를 자유롭게 조정하십시오. 고마워, 앞으로! 아래의 코멘트에 @gyre에 의해 제안

const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` here refers to the pageObject 
     console.log(this); 

     let radioHandler = function radioHandler(event) { 

       // `this` here also refers to the pageObject too since we are about to call this function via .bind() 
       console.log(this); 

       // use event.target here instead. sweet stuff. 
       let $id = $(event.target).data('id'); 

       // doSomething() now works! 
       this.doSomething($id); 
     } 

     $('.radio input[type="radio"]').on('click', radioHandler.bind(this)); 

    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

업데이트 2

How to access the correct this inside a callback? : event.target에

업데이트

덕분에 여기 아래에 제안 작업 코드 블록으로 this을 제어하는 ​​방법에 대한 훌륭한 세부 정보를 제공하지만은 언급하지 않습니다. 0. 어쨌든, 여기에 MDN Docs on Event.target

Answer 1

그냥 이전 스타일로 이동하여 다른 것으로 설정하십시오. 당신이 방법으로 이벤트 핸들러 내부 this를 사용할 필요가 없습니다 특정 경우

 
const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` here refers to the pageObject 
     console.log(this); 
     const self = this; 

     $('.radio input[type="radio"]').on('click', function() { 

       // `this` here refers to the radio input 
       console.log(this); 

       let $id = $(this).data('id'); 

       // Error because `this` is referencing the radio input and not the pageObject. 
       self.doSomething($id); 
     }; 

    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

, 당신은 이벤트 매개 변수를 가질 수 있고 같은 event.target을 사용하더라도 더

 
const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` here refers to the pageObject 
     console.log(this); 

     $('.radio input[type="radio"]').on('click', (event) => { 

       // `this` here refers to the radio input 
       console.log(event.target); 

       let $id = $(event.target).data('id'); 

       // Error because `this` is referencing the radio input and not the pageObject. 
       this.doSomething($id); 
     }; 

    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

..

 
const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` here refers to the pageObject 
     console.log(this); 

     $('.radio input[type="radio"]').on('click', this.onRadioClick.bind(this)) ; 

    }, 

    onRadioClick(event) { 

      // `this` here refers to the radio input 
      console.log(event.target); 

      let $id = $(event.target).data('id'); 

      // Error because `this` is referencing the radio input and not the pageObject. 
      this.doSomething($id); 
    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

Answer 2

event.target 또는 event.currentTarget을 사용할 수 있습니다. 참조 이벤트 이벤트가 전달됩니다. javascript도 ) (전화 : .on())으로 마감됩니다.

$('.radio input[type="radio"]').on('click', function(event) { 

    // `this` here refers to the radio input 
    let $id = $(event.target).data('radioId'); 

    // Error because `this` is referencing the radio input and not the pageObject. 
    this.doSomething($id); 
}) 

Answer 3

당신은 이와 비슷한 문제를 자주 접하게 될 것입니다. 필요에 따라, 나는 closure 나 binding을 사용하는 두 가지 방법 중 하나로 해결한다.

클로저를 사용하면 이벤트를 설정하고 동일한 상위 함수에서 이벤트 처리기를 정의하는 여기에서와 같이 잘 작동합니다. 당신은 하위 기능은 부모 함수의 변수에 액세스 할 수있는 사실을 활용이

const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     const parent = this 
     // 'parent and `this` here both refer to the pageObject 
     // 'parent' masks an instance of 'this' which can be accessed via closures 
     console.log('parent, this: ', parent, this); 

     $('.radio input[type="radio"]').on('click', function() { 

      // `this` here refers to the radio input 
      console.log(this); 

      let $id = $(this).data('id'); 

      // 'parent' accesses parent 'this' thanks to closures and masking 
      parent.doSomething($id); 
     } 

    }, 

    /* just does something */ 
    doSomething($id) { 
     return ... 
    } 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

또 다른 방법은 바인딩을 사용 의 마스크 형태에 액세스 할 수 있습니다. 이는 다른 곳에서 정의 된 핸들러 함수를 호출하지만 리스너를 설정하는 함수의 'this'컨텍스트로부터 정보가 필요한 한 함수에서 eventListener를 설정하려는 경우에 특히 유용합니다. 코드를 사용하여 코드를 작은 기능으로 분해 할 수 있습니다.

같은 것을 볼 수 있었다 귀하의 예제를 사용하여 예 :

const pageObject = { 

    /* set listener to get id of the radio input and then do something with it*/ 
    onChange() { 

     // `this` refers to the pageObject 
     console.log(this); 

     // creates radio onClick eventListener 
     // assigns handleRadio function as event handler 
     // binds pageObject 'this' context for use in event handler 
     $('.radio input[type="radio"]').on('click', this.handleRadio).bind(this); 
    }, 

    // separated event handler function to show how this works in more modular code. 
    handleRadio(e) { 
     // use e.target to give you the context for the click event 
     // use 'this' to access the pageObject 'this' context 
     console.log('e.target, this: ', e.target, this); 

     // still accesses pageObject 'this' due to the eventListener bind 
     let $id = $(this).data('id'); 

     // No error 
     this.doSomething($id); 
    }, 

/* just does something */ 
doSomething($id) { 
    return ... 
} 

} 

// just calls the method on object so we can get started 
pageObject.onChange(); 

의