Maison > interface Web > js tutoriel > le corps du texte

Comprendre la méthode Function.prototype.bind en javascript

高洛峰
Libérer: 2017-02-03 13:35:29
original
1049 Les gens l'ont consulté

Lorsque nous apprenons Javascript pour la première fois, nous n'avons peut-être pas besoin de nous soucier de la liaison de fonction, mais lorsque nous devons maintenir l'objet contextuel this dans une autre fonction, nous rencontrerons des problèmes correspondants. J'ai vu beaucoup de gens faire face à tous ces problèmes. doivent d'abord attribuer this à une variable (telle que self, _this, that, etc.), en particulier var that = this est celle que je vois le plus, afin que vous puissiez l'utiliser après avoir changé d'environnement. Tout cela est possible, mais il existe une méthode meilleure et plus propriétaire, qui consiste à utiliser Function.prototype.bind, qui est expliquée en détail ci-dessous.

Partie 1 : Problèmes à résoudre

Regardez d'abord le code ci-dessous

var myObj = {
 
  specialFunction: function () {
 
  },
 
  anotherSpecialFunction: function () {
 
  },
 
  getAsyncData: function (cb) {
    cb();
  },
 
  render: function () {
this.getAsyncData(function () {
      this.specialFunction();
      this.anotherSpecialFunction();
    });
  }
};
 
myObj.render();
Copier après la connexion

Ici, je j'espère créer un objet, y compris les deux premières méthodes ordinaires ; la troisième méthode peut transmettre une fonction, et la fonction transmise sera exécutée immédiatement. La dernière méthode appellera la méthode getAsyncData de l'objet myObj, en l'utilisant ici, et puis en le passant dans la méthode getAsyncData En entrant dans une fonction, cette fonction continue d'appeler les deux premières méthodes de cet objet, toujours en l'utilisant. À ce moment, de nombreuses personnes peuvent réellement voir le problème. Entrez le code ci-dessus dans la console et obtenez le. résultat suivant :

TypeError: this.specialFunction is not a function
Copier après la connexion

Partie 2 : Analyse du problème

Ceci dans la méthode de rendu de l'objet pointe vers l'objet myObj, nous pouvons donc l'appeler via this.getAsyncData La fonction dans l'objet, mais lorsque nous passons la fonction en tant que paramètre, cela pointe ici vers la fenêtre de l'environnement global. Étant donné que les deux premières méthodes de l'objet n'existent pas dans l'environnement global, une erreur est signalée.

Partie 3 : Plusieurs façons de résoudre le problème

Ce que nous devons donc faire est d'appeler correctement les deux premières méthodes de l'objet. La méthode utilisée par de nombreuses personnes consiste à appeler d'abord le. environnement de l'objet Obtenez ceci et affectez-le à une autre variable, vous pourrez ensuite l'appeler dans l'environnement suivant, comme indiqué ci-dessous :

render: function () {
  var that = this;
  this.getAsyncData(function () {
    that.specialFunction();
    that.anotherSpecialFunction();
  });
}
Copier après la connexion

Bien que cette méthode soit réalisable, utilisez Function.prototype .bind() rendra le code plus clair et plus facile à comprendre, comme indiqué ci-dessous :

render: function () {
 
  this.getAsyncData(function () {
 
    this.specialFunction();
 
    this.anotherSpecialFunction();
 
  }.bind(this));
 
}
Copier après la connexion

Ici, nous avons réussi à lier cela à l'environnement.

Ce qui suit est un autre exemple simple :

var foo = {
  x: 3
}
 
var bar = function(){
  console.log(this.x);
}
 
bar(); // undefined
 
var boundFunc = bar.bind(foo);
 
boundFunc(); // 3
Copier après la connexion

L'exemple suivant est également courant :

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 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81
Copier après la connexion

Partie 4 : Prise en charge du navigateur

Mais cette méthode n'est pas prise en charge dans IE8 et versions antérieures, nous pouvons donc utiliser la méthode fournie par MDN pour permettre aux versions inférieures d'IE de prendre en charge le Méthode .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;
 };
}
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère. vous en apprendrez plus. Supportez le site Web chinois PHP.

Pour plus d'articles sur la façon de comprendre Function.prototype.bind en javascript, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal