자바스크립트의 Function.prototype.bind 메소드 이해-JS 튜토리얼-php.cn

자바스크립트의 Function.prototype.bind 메소드 이해

高洛峰

풀어 주다： 2017-02-03 13:35:29

원래의

1043명이 탐색했습니다.

Javascript를 처음 배울 때는 함수 바인딩에 대해 걱정할 필요가 없지만 다른 함수에서 컨텍스트 개체를 유지해야 할 때 해당 문제에 직면하게 됩니다. 많은 사람들이 이 모든 문제를 처리하는 것을 보았습니다. 이것을 먼저 변수(self, _this, that 등)에 할당하는 것이며, 특히 var that = this가 가장 많이 보이는 것이므로 환경을 변경한 후에 사용할 수 있습니다. 이것들은 모두 가능하지만, 아래에 자세히 설명된 Function.prototype.bind를 사용하는 더 좋고 더 독점적인 방법이 있습니다.

1부: 해결해야 할 문제

먼저 아래 코드를 보세요

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

로그인 후 복사

여기서 객체를 생성합니다. 처음 두 개의 일반 메소드를 포함합니다. 세 번째 메소드는 함수를 전달할 수 있으며, 전달된 함수는 즉시 실행됩니다. 마지막 메소드는 myObj 객체의 getAsyncData 메소드를 호출합니다. getAsyncData 메소드에 전달된 이 객체의 처음 두 메소드를 계속 호출하고 이를 계속 사용하는 함수입니다. 이때 실제로 많은 사람들이 콘솔에 위 코드를 입력하면 다음과 같은 결과를 얻을 수 있습니다. 🎜>

TypeError: this.specialFunction is not a function

로그인 후 복사

2부: 문제 분석

객체의 render 메서드에 있는 이는 myObj 객체를 가리키므로 이를 통해 이 객체의 함수를 호출할 수 있습니다. getAsyncData 이지만 함수를 매개변수로 전달하면 여기서는 전역 환경 창을 가리키게 됩니다. 전역 환경의 개체에 처음 두 개의 메서드가 없기 때문에 오류가 보고됩니다.

3부: 문제를 해결하는 여러 가지 방법

그래서 우리가 해야 할 일은 객체의 처음 두 메서드를 올바르게 호출하는 것입니다. 많은 사람들이 사용하는 메서드는 먼저 객체의 환경 이를 가져와서 다른 변수에 할당한 다음 아래와 같이 후속 환경에서 호출할 수 있습니다.

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

로그인 후 복사

이 방법이 가능하더라도 프로토타입.bind를 사용하세요. ()는 아래와 같이 코드를 더 명확하고 이해하기 쉽게 만듭니다.

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

로그인 후 복사

여기서는 이를 환경에 성공적으로 바인딩했습니다.

또 다른 간단한 예는 다음과 같습니다.

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

로그인 후 복사

다음 예도 일반적입니다.

this.x = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 81
 
var retrieveX = module.getX;
retrieveX(); 
// returns 9 - The function gets invoked at the global scope
 
// Create a new function with &#39;this&#39; bound to module
// New programmers might confuse the
// global var x with module&#39;s property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

로그인 후 복사

4부: 브라우저 지원

그러나 이 방법은 IE8 이하에서는 지원되지 않으므로 MDN에서 제공하는 방법을 사용하여 IE가 더 낮은 버전을 지원하도록 만들 수 있습니다.

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

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, PHP 중국어 홈페이지도 많이 응원해주시길 바랍니다. .

자바스크립트에서 Function.prototype.bind를 이해하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!