Maison  >  Article  >  interface Web  >  Introduction à la méthode prototype.bind() dans les connaissances JavaScript_Basic

Introduction à la méthode prototype.bind() dans les connaissances JavaScript_Basic

WBOY
WBOYoriginal
2016-05-16 16:53:201203parcourir

Dans le passé, vous pouviez directement définir self=this ou that=this, etc., ce qui bien sûr fonctionnerait, mais utiliser Function.prototype.bind() serait mieux et aurait l'air plus professionnel.
Voici un exemple simple :

Copier le code Le code est le suivant :

var myObj = {
fonction spéciale : function () {
},
anotherSpecialFunction : function () {
},
getAsyncData : function (cb) {
cb();
},
render : function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
>
};
myObj.render();

Dans cet exemple, afin de maintenir le contexte myObj, une variable that=this est définie, ce qui est faisable, mais Function .prototype n'est pas utilisé .bind() semble plus soigné :
Copier le code Le code est le suivant :

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

Lors de l'appel de .bind(), il créera simplement une nouvelle fonction et la transmettra à cette fonction. Le code pour implémenter .bind() ressemble à peu près à ceci :

Copiez le code Le code est le suivant :
Function.prototype .bind = function (scope) {
var fn = this;
return function () {
return fn.apply(scope);
};
}

Regardons un exemple simple d'utilisation de Function.prototype.bind() :

Copier le code Le code est le suivant :

var foo = {
x : 3
};

var bar = function(){
console.log(this.x);
};

bar(); // non défini

varboundFunc = bar.bind(foo);

boundFunc(); // 3

N'est-ce pas très utile ! Malheureusement, les navigateurs IE IE8 et inférieurs ne prennent pas en charge Function.prototype.bind(). Les navigateurs pris en charge sont Chrome 7, Firefox 4.0, IE 9, Opera 11.60, Safari 5.1.4. Bien que les navigateurs tels que IE 8/7/6 ne le prennent pas en charge, l'équipe de développement de Mozilla a écrit une fonction avec des fonctions similaires pour les anciennes versions des navigateurs IE. Le code est le suivant :

Copiez le code Le code est le suivant :

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // ce qui se rapproche le plus de la fonction IsCallable interne d'ECMAScript 5
      throw new TypeError("Function.prototype.bind - ce qui essaie d'être lié n'est pas appelable");
    }

    var aArgs = Array .prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply (cette instance de fNOP && oCeci
                                 ? ce
                                : oCeci,
                              a Args.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this. prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Déclaration:
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