Function.prototye.bind_javascript 자바스크립트 트릭

함수 바인딩은 JavaScript를 사용할 때 가장 주의를 기울이지 않는 것일 수도 있지만, 다른 함수에서 이 컨텍스트를 유지하는 방법에 대한 솔루션이 필요하다는 것을 깨달았을 때 실제로 필요한 것은 Function.prototype입니다. 바인딩()하지만 여전히 이를 깨닫지 못할 수도 있습니다.

이 문제가 처음 발생하면 컨텍스트를 변경한 후에도 계속 참조할 수 있도록 이를 변수로 설정하고 싶을 수도 있습니다. 많은 사람들이 self, _this 또는 context를 변수 이름으로 사용하기로 선택합니다(일부는 이를 사용하기도 함). 이러한 방법은 모두 유용하며 물론 아무런 문제도 없습니다. 하지만 더 좋고, 더 전문적인 방법이 있습니다.

우리가 해결해야 할 진짜 문제는 무엇인가요?
다음 예제 코드에서는 컨텍스트를 변수에 합법적으로 캐시할 수 있습니다.

var myObj = {
 
  specialFunction: function () {
 
  },
 
  anotherSpecialFunction: function () {
 
  },
 
  getAsyncData: function (cb) {
    cb();
  },
 
  render: function () {
    var that = this;
    this.getAsyncData(function () {
      that.specialFunction();
      that.anotherSpecialFunction();
    });
  }
};
 
myObj.render();

단순히 this.specialFunction()을 사용하여 메소드를 호출하면 다음 오류가 발생합니다.

잡히지 않은 TypeError: 개체 [object global]에 'specialFunction' 메서드가 없습니다.
콜백 함수 실행을 위해 myObj 객체 컨텍스트에 대한 참조를 유지해야 합니다. that.specialFunction()을 호출하면 범위 컨텍스트를 유지하고 함수를 올바르게 실행할 수 있습니다. 그러나 Function.prototype.bind()를 사용하는 더 간단하고 깔끔한 방법이 있습니다.

render: function () {
 
  this.getAsyncData(function () {
 
    this.specialFunction();
 
    this.anotherSpecialFunction();
 
  }.bind(this));
 
}

우리가 방금 무슨 짓을 한 걸까요?
.bind()는 함수를 생성합니다. 이 함수가 호출되면 해당 this 키워드가 전달된 값으로 설정됩니다(여기서는 바인딩()을 호출할 때 전달된 매개변수를 나타냅니다). 따라서 원하는 컨텍스트인 this(실제로는 myObj)를 .bind() 함수에 전달합니다. 그런 다음 콜백 함수가 실행되면 myObj 개체를 가리킵니다.

Function.prototype.bind()가 내부적으로 어떻게 생겼는지, 어떻게 작동하는지 알고 싶다면 다음의 아주 간단한 예를 참조하세요.

Function.prototype.bind = function (scope) {
  var fn = this;
  return function () {
    return fn.apply(scope);
  };
}

매우 간단한 사용 사례도 있습니다.

var foo = {
  x: 3
}
 
var bar = function(){
  console.log(this.x);
}
 
bar(); 
// undefined
 
var boundFunc = bar.bind(foo);
 
boundFunc(); 
// 3

새 함수를 만들고 실행하면 bar()를 호출할 때처럼 전역 범위가 아닌 foo로 설정됩니다.

브라우저 지원
브라우저 버전 지원
크롬 7
파이어폭스(게코) 4.0 (2)
인터넷 익스플로러 9
오페라 11.60
사파리 5.1.4
보시다시피 Function.prototype.bind는 불행하게도 IE8 이하에서는 지원되지 않으므로 폴백이 없으면 문제가 발생할 수 있습니다.

다행히도 Mozilla 개발자 네트워크(훌륭한 리소스 라이브러리)는 .bind() 메소드 자체를 구현하지 않는 브라우저를 위한 확실한 대안을 제공합니다.

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  if (typeof this !== "function") {
   
// closest thing possible to the ECMAScript 5 internal IsCallable function
   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }
 
  var aArgs = Array.prototype.slice.call(arguments, 1), 
    fToBind = this, 
    fNOP = function () {},
    fBound = function () {
     return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };
 
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
 
  return fBound;
 };
}

적용 가능한 모드

기술적인 포인트를 배울 때, 개념을 철저하게 연구하고 이해하는 것뿐만 아니라, 그것을 현재의 업무에 적용하거나 그에 가까운 것이 있는지 살펴보는 것이 도움이 된다는 것을 깨달았습니다. 아래 예제 중 일부가 귀하의 코드에 적용되거나 귀하가 직면한 문제를 해결하기를 바랍니다.

CLICK HANDLERS(클릭 핸들러 기능)
한 가지 용도는 클릭 이벤트를 기록하거나 클릭 후 작업을 수행하는 것입니다. 이를 위해서는 다음과 같은 일부 정보를 객체에 저장해야 할 수 있습니다.

var logger = {
  x: 0,    
  updateCount: function(){
    this.x++;
    console.log(this.x);
  }
}

다음과 같은 방법으로 클릭 처리 기능을 지정한 다음 로거 개체에서 updateCount() 메서드를 호출할 수 있습니다.

document.querySelector('button').addEventListener('click', function(){
  logger.updateCount();
});

그러나 updateCount() 함수의 this 키워드가 올바른 값을 갖도록 하려면 추가 익명 함수를 만들어야 합니다.

다음과 같은 깔끔한 방법을 사용할 수 있습니다.

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));
우리는 편리한 .bind() 함수를 교묘하게 사용하여 새로운 함수를 생성하고 그 범위를 로거 객체에 바인딩합니다.

시간 초과 설정
템플릿 엔진(예: Handlebars)이나 특히 일부 MV* 프레임워크(내 경험으로는 Backbone.js에 대해서만 이야기할 수 있음)를 사용해 본 적이 있다면 렌더링 후 즉시 새 DOM에 액세스하는 방법에 대한 아래 설명을 알 수 있습니다. 템플릿 노드를 사용할 때 발생하는 문제입니다.

jQuery 플러그인을 인스턴스화한다고 가정해 보겠습니다.

var myView = {
 
  template: '/* 一个包含 <select /> 的模板字符串*/',
 
  $el: $('#content'),
 
  afterRender: function () {
    this.$el.find('select').myPlugin();
  },
 
  render: function () {
    this.$el.html(this.template());
    this.afterRender();
  }
}
 
myView.render();

효과가 있다고 느낄 수도 있지만 문제가 있기 때문에 항상 그렇지는 않습니다. 경쟁의 문제입니다. 먼저 도착하는 사람이 승리합니다. 렌더링이 먼저 나올 때도 있고, 플러그인 인스턴스화가 먼저 나올 때도 있습니다. [번역자 주: 렌더링 프로세스가 완료되지 않은 경우(DOM 노드가 DOM 트리에 추가되지 않은 경우) find('select')는 인스턴스화를 수행할 해당 노드를 찾을 수 없습니다. ]

이제 많은 사람들이 알지 못할 수도 있지만 setTimeout()을 기반으로 하는 약간의 해킹을 사용하여 문제를 해결할 수 있습니다.

DOM 노드가 로드된 후 jQuery 플러그인을 안전하게 인스턴스화하기 위해 코드를 약간 다시 작성해 보겠습니다.

afterRender: function () {
    this.$el.find('select').myPlugin();
  },
 
  render: function () {
    this.$el.html(this.template());
    setTimeout(this.afterRender, 0);    
  }

然而，我们获得的是 函数 .afterRender() 不能找到 的错误信息。

我们接下来要做的，就是将.bind()使用到我们的代码中：

//
 
  afterRender: function () {
    this.$el.find('select').myPlugin();
  },
 
  render: function () {
    this.$el.html(this.template());
    setTimeout(this.afterRender.bind(this), 0);    
  }
 
//

以上所述就是本文的全部内容了，希望大家能够喜欢。