집 > 기사 > 웹 프론트엔드 > ES6 JavaScript의 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명

ES6 JavaScript의 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명

小云云원래의: 2017-12-23 10:29:441936검색

본 글에서는 ES6의 함수 바인딩과 클래스 이벤트 바인딩 기능의 JavaScript 구현을 주로 소개하며, ES6의 함수 바인딩과 클래스 이벤트 바인딩의 원리, 구현 방법, 관련 운용 기술, 주의사항 등을 예제 형식으로 분석합니다. 친구들이 참고할 수 있으니 모두에게 도움이 되길 바랍니다.

함수 바인딩

화살표 함수는 이 개체를 바인딩할 수 있으므로 이 개체를 명시적으로 바인딩하는 방법(호출, 적용, 바인딩)의 수가 크게 줄어듭니다. 그러나 화살표 함수가 모든 상황에 적합한 것은 아니므로 ES7에서는 호출, 적용 및 바인드 호출을 대체하기 위해 "함수 바인드" 연산자를 제안합니다. 이 구문은 여전히 ES7 제안이지만 Babel 트랜스코더는 이미 이를 지원합니다.

함수 결합 연산자는 두 개의 이중 콜론(::)이 나란히 있는 것입니다. 이중 콜론의 왼쪽은 객체이고 오른쪽은 함수입니다. 이 연산자는 자동으로 왼쪽 개체를 컨텍스트(즉, 이 개체)로 오른쪽 함수에 바인딩합니다.

foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
}

이중 콜론의 왼쪽이 비어 있고 오른쪽이 객체의 메소드인 경우 메소드를 객체에 바인딩하는 것과 같습니다.

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;
let log = ::console.log;
// 等同于
var log = console.log.bind(console);

이중 콜론 연산자는 여전히 원래 객체를 반환하므로 연쇄 쓰기를 사용할 수 있습니다.

// 例一
import { map, takeWhile, forEach } from "iterlib";
getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));
// 例二
let { find, html } = jake;
document.querySelectorAll("p.myClass")
::find("p")
::html("hahaha");

클래스의 이벤트 바인딩

개요

ES6은 모듈화에 큰 도움이 되는 클래스를 제공합니다. 클래스에서 이벤트를 바인딩하는 것은 첫째로 코드 구조를 명확하게 하고, 둘째로 클래스의 변수와 메서드를 사용할 수 있도록 하기 위한 것입니다. 그러나 이벤트 콜백 함수는 클래스의 인스턴스 객체에 의해 트리거되지 않으므로 이벤트 콜백 함수에서는 클래스의 this 변수에 접근할 수 없습니다. 또한, 이벤트 콜백 함수가 호출자가 직접 호출할 수 없도록 외부에 노출되는 것을 원하지 않습니다.

간단히 말하면,

1. 이벤트 콜백 함수는 클래스의 this 변수에 액세스할 수 있어야 합니다.
2. 이벤트 콜백 함수는 직접 호출할 수 없습니다.

클래스의 this에 액세스하는 방법

옵션 1: 클래스의 this를 저장하면 지역 변수가 됩니다

this의 참조는 동적으로 변경되지만 지역 변수의 참조는 명확하며 함수에서 정의한 지역 변수를 함수 전체에서 사용할 수 있습니다. 따라서 let that = this를 사용하여 클래스의 this 변수를 저장할 수 있습니다.

class A{
  //绑定事件的方法
  bindEvent(){
   let that = this;
   this.button1.on('click',function(e){
      this.addClass('on'); //this指代所点的元素
      that.doSomething(); //that指向类的this
   })
  }
  doSomething(){
   //事件处理函数
  }
  //解绑事件
  unBindEvent(){
   this.button1.off();
  }
}

이 방법은 jquery를 사용할 때만 유용합니다. jquery 바인딩 해제 이벤트는 콜백 기능을 제공할 필요가 없으므로 직접 끄면 됩니다. 하지만 네이티브 js가 콜백 함수를 제공해야 하는 이유가 있습니다. 동일한 요소의 동일한 이벤트가 여러 콜백 함수에 바인딩될 수 있으므로 어느 것을 해제할지 지정해야 하기 때문입니다.

옵션 2: 이 점을 변경하려면 바인딩()을 사용하세요.

클래스 A가 있습니다. A에서는 요구 사항에 따라 다음 코드를 작성해야 합니다.

class A{
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', onMouseMove, false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', onMouseMove , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);  //#document
}

그러나 얻을 수 없습니다. 이런 식으로 수업이 이루어집니다. onMouseMove는 문서를 가리킵니다. 문서에 이벤트가 추가되기 때문에 문서에 의해 이벤트가 자연스럽게 발생하고 처리를 위해 onMouseMove가 호출되므로 onMouseMove의 이것이 문서를 가리킵니다.

더 정확한 접근 방식은 다음과 같습니다. 바인딩() 함수를 사용하여 onMouseMove에서 이것의 포인터를 변경하고 동시에 이벤트 콜백 함수를 클래스 외부로 이동합니다.

class A{
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', onMouseMove.bind(this), false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', onMouseMove.bind(this) , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

하지만 여전히 문제가 있습니다. 이벤트는 이를 수행할 수 없습니다. 제거되다! this.bind()는 호출될 때마다 새로운 함수를 반환하기 때문에

document.addEventListener( 'mousemove', onMouseMove.bind(this), false );

와

document.removeEventListener( 'mousemove', onMouseMove.bind(this), false );

의 두 번째 매개변수는 동일하지 않습니다.

올바른 접근 방식은 다음과 같습니다.bind()의 결과를 변수에 저장합니다.

class A{
  constructor(){
    this._onMouseMove = onMouseMove.bind(this);  //看这里
  }
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', this._onMouseMove , false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', this._onMouseMove , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

개인 이벤트 콜백 함수를 정의하는 방법

Java에서는 외부 세계에 노출되기를 원하지 않는 메서드를 다음과 같이 정의할 수 있습니다. 비공개 메소드이지만 ES6에서는 일부 메소드를 통해서만 시뮬레이션할 수 있는 비공개 메소드를 제공하지 않습니다. 하지만 이벤트 콜백 함수는 이벤트를 정의하는 것 외에도 제거해야 하기 때문에 특별하며, 이로 인해 추가적인 문제가 발생합니다. 하지만 여전히 방법이 있습니다.

Symbol 변수를 사용하여

const _onMouseMove = Symbol("_onMouseMove");
class A{
  constructor(){
    this[_onMouseMove] = onMouseMove.bind(this);
  }
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', this[_onMouseMove] , false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', this[_onMouseMove] , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

Symbol("_onMouseMove")을 정의하면 이 값은 개체가 생성될 때 생성되므로 호출자가 코드를 작성할 수 없습니다. 값은 당시에 알려져 있으므로 이 값을 사용하여 명명된 메서드를 호출할 수 없으므로 프라이빗 메서드를 정의합니다.

ES6 JavaScript의 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명

관련 기사