Question Comment fonctionne le mot-clé "this"?


J'ai remarqué qu'il ne semble pas y avoir une explication claire de ce que this mot-clé est et comment il est correctement (et incorrectement) utilisé en JavaScript sur le site Stack Overflow.

J'ai été témoin d'un comportement très étrange avec cela et j'ai échoué à comprendre pourquoi cela s'est produit.

Comment ça this travailler et quand devrait-il être utilisé?


1071
2018-06-27 13:12


origine


Réponses:


Je recommande de lire Mike Westl'article Champ d'application en JavaScript (miroir) premier. C'est une excellente introduction amicale aux concepts de this et les chaînes de portée en JavaScript.

Une fois que vous commencez à vous habituer à this, les règles sont en fait assez simples. le ECMAScript 5.1 Standard définit this:

§11.1.1 le this mot-clé

le this Le mot clé évalue à la valeur de ThisBinding du contexte d'exécution actuel

ThisBinding est quelque chose que l'interpréteur JavaScript gère lorsqu'il évalue le code JavaScript, comme un registre CPU spécial qui contient une référence à un objet. L'interpréteur met à jour ThisBinding lors de l'établissement d'un contexte d'exécution dans l'un des trois cas différents:

1. Contexte initial d'exécution globale

C'est le cas pour le code JavaScript évalué au niveau supérieur, par ex. quand directement dans un <script>:

<script>
  alert("I'm evaluated in the initial global execution context!");

  setTimeout(function () {
      alert("I'm NOT evaluated in the initial global execution context.");
  }, 1);
</script>

Lors de l'évaluation du code dans le contexte d'exécution global initial, ThisBinding est défini sur l'objet global, window (§10.4.1.1).

Saisie du code d'évaluation

  • ... par un appel direct à eval() ThisBinding est laissé inchangé; c'est la même valeur que ThisBinding du contexte d'exécution appelant (§10.4.2 (2) (a)).

  • ... sinon par un appel direct à eval()
    ThisBinding est défini sur l'objet global comme si s'exécutant dans le contexte d'exécution globale initiale (§10.4.2 (1)).

§15.1.2.1.1 définit ce qu'un appel direct à eval() est. Fondamentalement, eval(...) est un appel direct alors que quelque chose comme (0, eval)(...) ou var indirectEval = eval; indirectEval(...); est un appel indirect à eval(). Voir La réponse de Chuckj à (1, eval) ('ceci') vs eval ('ceci') en JavaScript? et ECMA-262-5 de Dmitry Soshnikov en détail. Chapitre 2. Mode strict. pour quand vous pourriez utiliser un indirect eval() appel.

Entrer le code de la fonction

Cela se produit lors de l'appel d'une fonction. Si une fonction est appelée sur un objet, par exemple obj.myMethod() ou l'équivalent obj["myMethod"](), alors ThisBinding est réglé sur l'objet (obj dans l'exemple; §13.2.1). Dans la plupart des autres cas, ThisBinding est défini sur l'objet global (§10.4.3).

La raison pour écrire "dans la plupart des autres cas" est parce qu'il y a huit fonctions intégrées d'ECMAScript 5 qui permettent à ThisBinding d'être spécifié dans la liste d'arguments. Ces fonctions spéciales prennent une soi-disant thisArg qui devient le ThisBinding lors de l'appel de la fonction (§10.4.3).

Ces fonctions intégrées spéciales sont:

  • Function.prototype.apply( thisArg, argArray )
  • Function.prototype.call( thisArg [ , arg1 [ , arg2, ... ] ] )
  • Function.prototype.bind( thisArg [ , arg1 [ , arg2, ... ] ] )
  • Array.prototype.every( callbackfn [ , thisArg ] )
  • Array.prototype.some( callbackfn [ , thisArg ] )
  • Array.prototype.forEach( callbackfn [ , thisArg ] )
  • Array.prototype.map( callbackfn [ , thisArg ] )
  • Array.prototype.filter( callbackfn [ , thisArg ] )

Dans le cas de Function.prototype fonctions, elles sont appelées sur un objet fonction, mais plutôt que de définir ThisBinding sur l'objet de fonction, ThisBinding est défini sur thisArg.

Dans le cas de Array.prototype fonctions, le donné callbackfn est appelée dans un contexte d'exécution où ThisBinding est défini sur thisArg si fourni; sinon, à l'objet global.

Ce sont les règles pour JavaScript simple. Lorsque vous commencez à utiliser des bibliothèques JavaScript (par exemple, jQuery), vous pouvez constater que certaines fonctions de bibliothèque manipulent la valeur de this. Les développeurs de ces bibliothèques JavaScript le font parce qu'il a tendance à prendre en charge les cas d'utilisation les plus courants, et les utilisateurs de la bibliothèque trouvent généralement ce comportement plus pratique. Lors du passage des fonctions de rappel référencement this aux fonctions de la bibliothèque, vous devriez vous référer à la documentation pour toutes les garanties sur ce que la valeur de this est quand la fonction est appelée.

Si vous vous demandez comment une bibliothèque JavaScript manipule la valeur de this, la bibliothèque utilise simplement l'une des fonctions JavaScript intégrées acceptant un thisArg. Vous aussi, vous pouvez écrire votre propre fonction en prenant une fonction de rappel et thisArg:

function doWork(callbackfn, thisArg) {
    //...
    if (callbackfn != null) callbackfn.call(thisArg);
}

Il y a un cas particulier que je n'ai pas encore mentionné. Lors de la construction d'un nouvel objet via le new L'interpréteur JavaScript crée un nouvel objet vide, définit certaines propriétés internes, puis appelle la fonction constructeur sur le nouvel objet. Ainsi, lorsqu'une fonction est appelée dans un contexte de constructeur, la valeur de this est le nouvel objet créé par l'interpréteur:

function MyType() {
    this.someData = "a string";
}

var instance = new MyType();
// Kind of like the following, but there are more steps involved:
// var instance = {};
// MyType.call(instance);

Juste pour le plaisir, testez votre compréhension avec quelques exemples

Pour révéler les réponses, passez la souris sur les cases jaune clair.

  1. Quelle est la valeur de this à la ligne marquée? Pourquoi?

      window - La ligne marquée est évaluée dans le contexte d'exécution global initial.

    if (true) {
        // What is `this` here?
    }
    
  2. Quelle est la valeur de this à la ligne marquée quand obj.staticFunction() est exécuté? Pourquoi?

      obj - Lors de l'appel d'une fonction sur un objet, ThisBinding est défini sur l'objet.

    var obj = {
        someData: "a string"
    };
    
    function myFun() {
        return this // What is `this` here?
    }
    
    obj.staticFunction = myFun;
    
    console.log("this is window:", obj.staticFunction() == window);
    console.log("this is obj:", obj.staticFunction() == obj);
      

  3. Quelle est la valeur de this à la ligne marquée? Pourquoi?

      window

    Dans cet exemple, l'interpréteur JavaScript entre le code de fonction, mais parce que myFun/obj.myMethod n'est pas appelé sur un objet, ThisBinding est défini sur window.  

    Ceci est différent de Python, dans lequel accéder à une méthode (obj.myMethod) crée un objet de méthode liée.

    var obj = {
        myMethod: function () {
            return this; // What is `this` here?
        }
    };
    var myFun = obj.myMethod;
    console.log("this is window:", myFun() == window);
    console.log("this is obj:", myFun() == obj);
      

  4. Quelle est la valeur de this à la ligne marquée? Pourquoi?

      window

    Celui-ci était difficile. Lors de l'évaluation du code d'évaluation, this est obj. Cependant, dans le code d'évaluation, myFun n'est pas appelé sur un objet, ThisBinding est défini sur window pour l'appel.

    function myFun() {
        return this; // What is `this` here?
    }
    var obj = {
        myMethod: function () {
            eval("myFun()");
        }
    };
    
  5. Quelle est la valeur de this à la ligne marquée? Pourquoi?

      obj

    La ligne myFun.call(obj); appelle la fonction intégrée spéciale Function.prototype.call(), qui accepte thisArg comme le premier argument.

    function myFun() {
        return this; // What is `this` here?
    }
    var obj = {
        someData: "a string"
    };
    console.log("this is window:", myFun.call(obj) == window);
    console.log("this is obj:", myFun.call(obj) == obj);
      


1150
2017-07-07 17:32



le this mot-clé se comporte différemment en JavaScript par rapport à d'autres langues. Dans les langages orientés objet, le this mot clé fait référence à l'instance actuelle de la classe. En JavaScript, la valeur de this est déterminé principalement par le contexte d'invocation de la fonction (context.function()) et où il est appelé.

1. Lorsqu'il est utilisé dans un contexte global

Lorsque vous utilisez this dans un contexte global, il est lié à un objet global (windowdans le navigateur)

document.write(this);  //[object Window]

Lorsque vous utilisez this à l'intérieur d'une fonction définie dans le contexte global, this est toujours lié à l'objet global puisque la fonction est en fait une méthode de contexte global.

function f1()
{
   return this;
}
document.write(f1());  //[object Window]

Au dessus f1 est fait une méthode d'objet global. Ainsi, nous pouvons également l'appeler window objet comme suit:

function f()
{
    return this;
}

document.write(window.f()); //[object Window]

2. Quand utilisé dans la méthode de l'objet

Lorsque vous utilisez this mot-clé dans une méthode d'objet, this est lié à l'objet englobant "immédiat".

var obj = {
    name: "obj",
    f: function () {
        return this + ":" + this.name;
    }
};
document.write(obj.f());  //[object Object]:obj

Ci-dessus j'ai mis le mot immédiat entre guillemets. C'est pour faire le point que si vous imbriquez l'objet dans un autre objet, alors this est lié au parent immédiat.

var obj = {
    name: "obj1",
    nestedobj: {
        name:"nestedobj",
        f: function () {
            return this + ":" + this.name;
        }
    }            
}

document.write(obj.nestedobj.f()); //[object Object]:nestedobj

Même si vous ajoutez explicitement une fonction à l'objet en tant que méthode, il suit toujours les règles ci-dessus, c'est-à-dire this pointe toujours vers l'objet parent immédiat.

var obj1 = {
    name: "obj1",
}

function returnName() {
    return this + ":" + this.name;
}

obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1

3. Lors de l'appel de la fonction contextuelle

Lorsque vous utilisez this Dans la fonction interne invoquée sans contexte (c'est-à-dire sur aucun objet), elle est liée à l'objet global (window dans le navigateur) (même si la fonction est définie à l'intérieur de l'objet).

var context = "global";

var obj = {  
    context: "object",
    method: function () {                  
        function f() {
            var context = "function";
            return this + ":" +this.context; 
        };
        return f(); //invoked without context
    }
};

document.write(obj.method()); //[object Window]:global 

Essayer tout cela avec des fonctions

Nous pouvons essayer au-dessus des points avec des fonctions aussi. Cependant, il y a quelques différences.

  • Au-dessus, nous avons ajouté des membres aux objets en utilisant la notation littérale d'objet. Nous pouvons ajouter des membres aux fonctions en utilisant this. pour les spécifier.
  • La notation littérale d'objet crée une instance d'objet que nous pouvons utiliser immédiatement. Avec la fonction, nous pouvons avoir besoin de créer d'abord son instance en utilisant new opérateur.
  • Toujours dans une approche littérale d'objet, nous pouvons explicitement ajouter des membres à un objet déjà défini en utilisant l'opérateur point. Cela est ajouté à l'instance spécifique uniquement. Cependant, j'ai ajouté une variable au prototype de la fonction afin qu'elle soit reflétée dans toutes les instances de la fonction.

Ci-dessous j'ai essayé toutes les choses que nous avons faites avec Object et this ci-dessus, mais en créant d'abord une fonction au lieu d'écrire directement un objet.

/********************************************************************* 
  1. When you add variable to the function using this keyword, it 
     gets added to the function prototype, thus allowing all function 
     instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
    this.name = "ObjDefinition";
    this.getName = function(){                
        return this+":"+this.name;
    }
}        

obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition   

/********************************************************************* 
   2. Members explicitly added to the function protorype also behave 
      as above: all function instances have their own copy of the 
      variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
    return "v"+this.version; //see how this.version refers to the
                             //version variable added through 
                             //prototype
}
document.write(obj1.getVersion() + "<br />"); //v1

/********************************************************************* 
   3. Illustrating that the function variables added by both above 
      ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
    this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1

obj2.incrementVersion();      //incrementing version in obj2
                              //does not affect obj1 version

document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1

/********************************************************************* 
   4. `this` keyword refers to the immediate parent object. If you 
       nest the object through function prototype, then `this` inside 
       object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj', 
                                    getName1 : function(){
                                        return this+":"+this.name;
                                    }                            
                                  };

document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj

/********************************************************************* 
   5. If the method is on an object's prototype chain, `this` refers 
      to the object the method was called on, as if the method was on 
      the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
                                    //as its prototype
obj3.a = 999;                       //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
                                    //calling obj3.fun() makes 
                                    //ProtoObj.fun() to access obj3.a as 
                                    //if fun() is defined on obj3

4. Lorsqu'il est utilisé à l'intérieur de la fonction constructeur.

Lorsque la fonction est utilisée comme constructeur (c'est-à-dire quand elle est appelée avec new mot-clé), this à l'intérieur du corps de la fonction pointe vers le nouvel objet en construction.

var myname = "global context";
function SimpleFun()
{
    this.myname = "simple function";
}

var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
//   object being constructed thus adding any member
//   created inside SimipleFun() using this.membername to the
//   object being constructed
//2. And by default `new` makes function to return newly 
//   constructed object if no explicit return value is specified

document.write(obj1.myname); //simple function

5. Lorsqu'il est utilisé à l'intérieur de la fonction définie sur la chaîne prototype

Si la méthode est sur la chaîne prototype d'un objet, this à l'intérieur d'une telle méthode fait référence à l'objet sur lequel la méthode a été appelée, comme si la méthode était définie sur l'objet.

var ProtoObj = {
    fun: function () {
        return this.a;
    }
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun() 
//to be the method on its prototype chain

var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999

//Notice that fun() is defined on obj3's prototype but 
//`this.a` inside fun() retrieves obj3.a   

6. À l'intérieur des fonctions call (), apply () et bind ()

  • Toutes ces méthodes sont définies sur Function.prototype.
  • Ces méthodes permettent d'écrire une fonction une fois et de l'invoquer dans un contexte différent. En d'autres termes, ils permettent de spécifier la valeur de this qui sera utilisé pendant l'exécution de la fonction. Ils prennent également tous les paramètres à transmettre à la fonction d'origine lorsqu'elle est invoquée.
  • fun.apply(obj1 [, argsArray]) Ensembles obj1 comme la valeur de this à l'intérieur fun() et appels fun() passer des éléments de argsArray comme ses arguments.
  • fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - Ensembles obj1 comme la valeur de this à l'intérieur fun() et appels fun() qui passe arg1, arg2, arg3, ... comme ses arguments.
  • fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - Retourne la référence à la fonction fun avec thisà l'intérieur de plaisir lié à obj1 et les paramètres de fun lié aux paramètres spécifiés arg1, arg2, arg3,....
  • A présent, la différence entre apply, call et bind doit être devenu apparent. apply permet de spécifier les arguments pour fonctionner comme un objet de type tableau, c'est-à-dire un objet avec un length propriété et propriétés entières non négatives correspondantes. Tandis que call permet de spécifier directement les arguments de la fonction. Tous les deux apply et call appelle immédiatement la fonction dans le contexte spécifié et avec les arguments spécifiés. D'autre part, bind renvoie simplement la fonction liée à la spécifié this valeur et les arguments. Nous pouvons capturer la référence à cette fonction renvoyée en l'affectant à une variable et plus tard nous pouvons l'appeler à tout moment.
function add(inc1, inc2)
{
    return this.a + inc1 + inc2;
}

var o = { a : 4 };
document.write(add.call(o, 5, 6)+"<br />"); //15
      //above add.call(o,5,6) sets `this` inside
      //add() to `o` and calls add() resulting:
      // this.a + inc1 + inc2 = 
      // `o.a` i.e. 4 + 5 + 6 = 15
document.write(add.apply(o, [5, 6]) + "<br />"); //15
      // `o.a` i.e. 4 + 5 + 6 = 15

var g = add.bind(o, 5, 6);       //g: `o.a` i.e. 4 + 5 + 6
document.write(g()+"<br />");    //15

var h = add.bind(o, 5);          //h: `o.a` i.e. 4 + 5 + ?
document.write(h(6) + "<br />"); //15
      // 4 + 5 + 6 = 15
document.write(h() + "<br />");  //NaN
      //no parameter is passed to h()
      //thus inc2 inside add() is `undefined`
      //4 + 5 + undefined = NaN</code>

7. this à l'intérieur des gestionnaires d'événements

  • Lorsque vous affectez une fonction directement aux gestionnaires d'événements d'un élément, l'utilisation de this directement à l'intérieur de la fonction de gestion des événements fait référence à l'élément correspondant. Une telle affectation de fonction directe peut être effectuée en utilisant addeventListener méthode ou à travers les méthodes traditionnelles d'enregistrement des événements comme onclick.
  • De même, lorsque vous utilisez this directement dans la propriété de l'événement (comme <button onclick="...this..." >) de l'élément, il se réfère à l'élément.
  • Cependant l'utilisation de this indirectement à travers l'autre fonction appelée à l'intérieur de la fonction de gestion d'événements ou de la propriété d'événement résout à l'objet global window.
  • Le même comportement ci-dessus est atteint lorsque nous attachons la fonction au gestionnaire d'événements à l'aide de la méthode du modèle d'enregistrement des événements de Microsoft attachEvent. Au lieu d'assigner la fonction au gestionnaire d'événements (et donc de faire la méthode function de l'élément), il appelle la fonction sur l'événement (en l'appelant effectivement dans un contexte global).

Je recommande de mieux essayer cela dans JSFiddle.

<script> 
    function clickedMe() {
       alert(this + " : " + this.tagName + " : " + this.id);
    } 
    document.getElementById("button1").addEventListener("click", clickedMe, false);
    document.getElementById("button2").onclick = clickedMe;
    document.getElementById("button5").attachEvent('onclick', clickedMe);   
</script>

<h3>Using `this` "directly" inside event handler or event property</h3>
<button id="button1">click() "assigned" using addEventListner() </button><br />
<button id="button2">click() "assigned" using click() </button><br />
<button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>

<h3>Using `this` "indirectly" inside event handler or event property</h3>
<button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />

<button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />

IE only: <button id="button5">click() "attached" using attachEvent() </button>

122
2017-10-26 15:07



Javascript this

Invocation de fonction simple

Considérez la fonction suivante:

function foo() {
    console.log("bar");
    console.log(this);
}
foo(); // calling the function

Notez que nous l'exécutons en mode normal, c'est-à-dire que le mode strict n'est pas utilisé.

Lorsqu'il est exécuté dans un navigateur, la valeur de this serait enregistré comme window. Ceci est dû au fait window est la variable globale dans la portée d'un navigateur Web.

Si vous exécutez ce même morceau de code dans un environnement tel que node.js, this ferait référence à la variable globale dans votre application.

Maintenant, si nous l'exécutons en mode strict en ajoutant la déclaration "use strict"; au début de la déclaration de fonction, this ne ferait plus référence à la variable globale dans l'un ou l'autre des environnements. Ceci est fait pour éviter les confusions dans le mode strict. this serait, dans ce cas, juste se connecter undefined, parce que c'est ce que c'est, ce n'est pas défini.

Dans les cas suivants, nous verrons comment manipuler la valeur de this.

Appeler une fonction sur un objet

il y a différentes facons de faire cela. Si vous avez appelé des méthodes natives en Javascript comme forEach et slice, vous devriez déjà savoir que le this variable dans ce cas se réfère à la Object sur lequel vous avez appelé cette fonction (Notez que dans javascript, à peu près tout est un Object, comprenant Arrayle sable Functions). Prenez le code suivant par exemple.

var myObj = {key: "Obj"};
myObj.logThis = function () {
    // I am a method
    console.log(this);
}
myObj.logThis(); // myObj is logged

Si un Object contient une propriété qui contient un Function, la propriété est appelée une méthode. Cette méthode, lorsqu'elle est appelée, aura toujours son this variable définie sur Object il est associé à. Cela est vrai pour les modes strict et non strict.

Notez que si une méthode est stockée (ou plutôt copiée) dans une autre variable, la référence à this n'est plus conservé dans la nouvelle variable. Par exemple:

// continuing with the previous code snippet

var myVar = myObj.thisMethod;
myVar();
// logs either of window/global/undefined based on mode of operation

Considérant un scénario plus communément pratique:

var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself

le new mot-clé

Considérons une fonction constructeur en Javascript:

function Person (name) {
    this.name = name;
    this.sayHello = function () {
        console.log ("Hello", this);
    }
}

var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`

Comment cela marche-t-il? Eh bien, voyons ce qui se passe quand on utilise le new mot-clé.

  1. Appel de la fonction avec le new mot-clé initialiserait immédiatement un Object de type Person.
  2. Le constructeur de cette Object a son constructeur mis à Person. Notez également que typeof awal retournerais Object seulement.
  3. Ce nouveau Object serait attribué le prototype de Person.prototype. Cela signifie que toute méthode ou propriété dans le Person prototype serait disponible pour toutes les instances de Person, comprenant awal.
  4. La fonction Person lui-même est maintenant invoqué; this étant une référence à l'objet nouvellement construit awal.

Joli straighforward, hein?

Notez que la spécification officielle d'ECMAScript n'indique où ces types de fonctions sont réels constructor les fonctions. Ils sont juste des fonctions normales, et new peut être utilisé sur n'importe quelle fonction. C'est juste que nous les utilisons comme tels, et ainsi nous les appelons comme tels seulement.

Appel des fonctions sur les fonctions: call et apply

Alors ouais, depuis functions sont aussi Objects (et en fait les variables de première classe en Javascript), même les fonctions ont des méthodes qui sont ... bien, les fonctions elles-mêmes.

Toutes les fonctions héritent du global Functionet deux de ses nombreuses méthodes call et apply, et les deux peuvent être utilisés pour manipuler la valeur de this dans la fonction sur laquelle ils sont appelés.

function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);

Ceci est un exemple typique d'utilisation call. Il prend essentiellement le premier paramètre et définit this dans la fonction foo comme une référence à thisArg. Tous les autres paramètres passés à call sont passés à la fonction foo comme arguments.
Donc, le code ci-dessus va se connecter {myObj: "is cool"}, [1, 2, 3] dans la console. Jolie façon de changer la valeur de this dans n'importe quelle fonction.

apply est presque le même que call accepter qu'il ne prend que deux paramètres: thisArg et un tableau qui contient les arguments à transmettre à la fonction. Donc, ce qui précède call appel peut être traduit en apply comme ça:

foo.apply(thisArg, [1,2,3])

Notez que call et apply peut remplacer la valeur de this fixé par l'invocation de méthode de point nous avons discuté dans la deuxième balle. Assez simple :)

En présentant.... bind!

bind est un frère de call et apply. C'est aussi une méthode héritée par toutes les fonctions du monde Function constructeur en Javascript. La différence entre bind et call/apply est-ce que les deux call et apply va réellement invoquer la fonction. bind, d'autre part, retourne une nouvelle fonction avec le thisArg et arguments pré-réglé. Prenons un exemple pour mieux comprendre ceci:

function foo (a, b) {
    console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */

bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`

Voir la différence entre les trois? C'est subtil, mais ils sont utilisés différemment. Comme call et apply, bind dépassera également la valeur de this fixé par l'invocation de méthode point.

Notez également qu'aucune de ces trois fonctions ne modifie la fonction d'origine. call et apply retournerait la valeur de fonctions fraîchement construites tout bind retournera la fonction nouvellement construite, prête à être appelée.

Trucs supplémentaires, copiez ceci

Parfois, vous n'aimez pas le fait que this changements avec portée, étendue spécialement imbriquée. Jetez un oeil à l'exemple suivant.

var myObj = {
    hello: function () {
        return "world"
        },
    myMethod: function () {
        // copy this, variable names are case-sensitive
        var that = this;
        // callbacks ftw \o/
        foo.bar("args", function () {
            // I want to call `hello` here
            this.hello(); // error
            // but `this` references to `foo` damn!
            // oh wait we have a backup \o/
            that.hello(); // "world"
        });
    }
  };

Dans le code ci-dessus, nous voyons que la valeur de this changé avec la portée imbriquée, mais nous voulions la valeur de this de la portée originale. Nous avons donc 'copié' this à that et utilisé la copie au lieu de this. Intelligent, hein?

Indice:

  1. Qu'est-ce qui est détenu dans this par défaut?
  2. Que faire si nous appelons la fonction comme une méthode avec la notation Object-point?
  3. Et si nous utilisons le new mot-clé?
  4. Comment manipulons-nous this avec call et apply?
  5. En utilisant bind.
  6. Copier this pour résoudre les problèmes imbriqués.

46
2018-06-27 14:10



"ceci" est tout au sujet de la portée. Chaque fonction a sa propre portée, et puisque tout dans JS est un objet, même une fonction peut stocker des valeurs en elle-même en utilisant "this". Le POO 101 enseigne que "ceci" ne s'applique qu'à instances d'un objet. Par conséquent, chaque fois qu'une fonction s'exécute, une nouvelle "instance" de cette fonction a une nouvelle signification de "ceci".

La plupart des gens sont confus quand ils essayent d'utiliser "ceci" à l'intérieur de fonctions de fermeture anonymes comme:

(function (value) {
    this.value = valeur;
    $ ('. some-elements'). chaque (function (elt) {
        elt.innerHTML = this.value; // euh oh !! éventuellement indéfini
    });
}) (2);

Donc ici, à l'intérieur de chaque (), "ceci" ne contient pas la "valeur" que vous attendez de

this.value = valeur;
 Au dessus de). Donc, pour surmonter ce problème (sans jeu de mots), un développeur pourrait:

(function (value) {
    var self = ceci; // petite monnaie
    self.value = valeur;
    $ ('. some-elements'). chaque (function (elt) {
        elt.innerHTML = self.value; // phew!! == 2
    });
}) (2);

Essaye le; vous allez commencer à aimer ce modèle de programmation


43
2017-10-06 19:46



this en Javascript se réfère toujours au «propriétaire» de la fonction qui est en cours d'exécution.

Si aucun propriétaire explicite n'est défini, le plus haut propriétaire, l'objet window, est référencé.

Donc si je l'ai fait

function someKindOfFunction() {
   this.style = 'foo';
}

element.onclick = someKindOfFunction;

this se référer à l'objet élément. Mais attention, beaucoup de gens font cette erreur

<element onclick="someKindOfFunction()">

Dans ce dernier cas, vous faites simplement référence à la fonction, sans la remettre à l'élément. Pour cela, this se référera à l'objet fenêtre.


12
2017-10-30 03:58



Depuis que ce fil a rebondi, j'ai compilé quelques points pour les lecteurs nouveaux à this sujet. 

Comment est la valeur de thisdéterminé?

Nous utilisons cela de la même manière que nous utilisons les pronoms dans les langues naturelles comme l'anglais: "John court vite parce que il essaie d'attraper le train. "Au lieu de cela, nous aurions pu écrire" ... John essaie d'attraper le train ".

var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {

    // We use "this" just as in the sentence above:
       console.log(this.firstName + " " + this.lastName);

    // We could have also written:
       console.log(person.firstName + " " + person.lastName);
    }
}

this  n'a pas de valeur jusqu'à ce qu'un objet appelle la fonction où il est défini. Dans la portée globale, toutes les variables et fonctions globales sont définies window objet. Donc, this dans une fonction globale se réfère à (et a la valeur de) le mondial window objet.

Quand use strict, this dans les fonctions globales et anonymes qui ne sont liés à aucun objet détient une valeur de undefined.

le this mot-clé est le plus mal compris quand: 1) nous empruntons une méthode qui utilise this, 2) nous assignons une méthode qui utilise this à une variable, 3) une fonction qui utilise this est passé en tant que fonction de rappel, et 4) this est utilisé à l'intérieur d'une fermeture - une fonction interne. (2)

table

Qu'est-ce qui détient le futur

Défini dans ECMA Script 6, les fonctions de flèche adoptent this contraignant de la englobant (fonction ou globale) portée.

function foo() {
     // return an arrow function
     return (a) => {
     // `this` here is lexically inherited from `foo()`
     console.log(this.a);
  };
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!

Alors que les fonctions de flèche offrent une alternative à l'utilisation bind(), il est important de noter qu'ils désactivent essentiellement la traditionnelle this mécanisme en faveur d'une portée lexicale plus largement comprise. (1)


Les références:

  1. ce & Prototypes d'objet, par Kyle Simpson. 2014 Getify Solutions.
  2. javascriptissexy.com - http://goo.gl/pvl0GX 
  3. Angus Croll - http://goo.gl/Z2RacU 

12
2018-06-27 13:15



Chaque fonction  contexte d'exécution en javascript a portée  le contexte  ce paramètre défini par:

  1. Comment la fonction est appelée (y compris en tant que méthode d'objet, utilisation de appel et appliquer, utilisation de Nouveau)
  2. Utilisation de lier
  3. Lexiquement pour les fonctions fléchées (ils adoptent le ce de leur contexte d'exécution externe)

Quel que soit le contexte de cette portée, il est référencé par "ceci".

Vous pouvez change ça définir la valeur de ce  portée  le contexte en utilisant func.call, func.apply ou func.bind.

Par défaut, et ce qui confond la plupart des débutants, quand un rappeler l'écouteur est appelé après qu'un événement est déclenché sur un élément DOM, le contexte de portée  ce La valeur de la fonction est l'élément DOM.

jQuery rend ce trivial à changer avec jQuery.proxy.


9
2017-11-29 06:01



Ici est une bonne source de this dans JavaScript.

Voici le résumé:

  • globalement ceci

    Dans un navigateur, à l'échelle mondiale, this est le windowobjet

    <script type="text/javascript">
      console.log(this === window); // true
      var foo = "bar";
      console.log(this.foo); // "bar"
      console.log(window.foo); // "bar"
    

    Dans node en utilisant le repl, this est l'espace de noms supérieur. Vous pouvez vous y référer global.

    >this
      { ArrayBuffer: [Function: ArrayBuffer],
        Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
        Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
        ...
    >global === this
     true
    

    Dans node l'exécution à partir d'un script, this à l'échelle globale commence comme un objet vide. Ce n'est pas la même chose que global

    \\test.js
    console.log(this);  \\ {}
    console.log(this === global); \\ fasle
    
  • fonctionne cette

Sauf dans le cas de gestionnaires d'événements DOM ou lorsqu'un thisArg est fourni (voir plus bas), à la fois dans le nœud et dans un navigateur en utilisant thisdans une fonction qui n'est pas appelée avec new fait référence à la portée mondiale ...

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
</script>

Si tu utilises use strict;, dans quel cas this sera undefined

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      "use strict";
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
</script>

Si vous appelez une fonction avec new la this sera un nouveau contexte, il ne référencera pas le global this.

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    new testThis();
    console.log(this.foo); //logs "bar"

    console.log(new testThis().foo); //logs "foo"
</script>
  • prototype ce

Les fonctions que vous créez deviennent des objets de fonction. Ils obtiennent automatiquement un spécial prototype propriété, qui est quelque chose que vous pouvez attribuer des valeurs. Lorsque vous créez une instance en appelant votre fonction avec new vous avez accès aux valeurs que vous avez attribuées à prototype propriété. Vous accédez à ces valeurs en utilisant this.

function Thing() {
  console.log(this.foo);
}

Thing.prototype.foo = "bar";

var thing = new Thing(); //logs "bar"
console.log(thing.foo);  //logs "bar"

C'est généralement une erreur d'assigner tableaux ou objets sur le prototype. Si vous voulez que les instances aient chacune leurs propres tableaux, créez-les dans la fonction, pas dans le prototype.

function Thing() {
    this.things = [];
}

var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing1.things); //logs ["foo"]
console.log(thing2.things); //logs []
  • objet cette

Vous pouvez utiliser this dans toute fonction sur un objet pour faire référence à d'autres propriétés sur cet objet. Ce n'est pas la même chose qu'une instance créée avec new.

var obj = {
    foo: "bar",
    logFoo: function () {
        console.log(this.foo);
    }
};

obj.logFoo(); //logs "bar"
  • Événement DOM cette

Dans un gestionnaire d'événements HTML DOM, this est toujours une référence à l'élément DOM auquel l'événement était attaché

function Listener() {
    document.getElementById("foo").addEventListener("click",
       this.handleClick);
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs "<div id="foo"></div>"
}

var listener = new Listener();
document.getElementById("foo").click();

À moins que vous bind le contexte

function Listener() {
    document.getElementById("foo").addEventListener("click", 
        this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs Listener {handleClick: function}
}

var listener = new Listener();
document.getElementById("foo").click();
  • HTML ceci

À l'intérieur des attributs HTML dans lesquels vous pouvez mettre du JavaScript, this est une référence à l'élément.

<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>
  • eval ceci

Vous pouvez utiliser eval accéder this.

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
}

var thing = new Thing();
thing.logFoo();
  • avec ça

Vous pouvez utiliser with ajouter this à la portée actuelle à lire et écrire aux valeurs sur this sans se référer à this explicitement.

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    with (this) {
        console.log(foo);
        foo = "foo";
    }
}

var thing = new Thing();
thing.logFoo(); // logs "bar"
console.log(thing.foo); // logs "foo"
  • jQuery this

le jQuery aura dans de nombreux endroits this se référer à un élément DOM.

<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
    this.click();
});
</script>

7
2018-04-23 12:57



Daniel, explication géniale! Quelques mots sur ce sujet et une bonne liste de this pointeur de contexte d'exécution dans le cas de gestionnaires d'événements.

En deux mots, this en JavaScript pointe l'objet de qui (ou du contexte d'exécution) la fonction en cours a été exécutée et est toujours en lecture seule, vous ne pouvez pas la définir quand même (une telle tentative se terminera par 'Invalid left-side in assignment' message.

Pour les gestionnaires d'événements: gestionnaires d'événements en ligne, tels que <element onclick="foo">, remplacez tous les autres gestionnaires attachés plus tôt et avant, alors faites attention et il est préférable de rester à l'écart de la délégation de l'événement en ligne du tout. Et merci à Zara Alaverdyan qui m'a inspiré cette liste d'exemples à travers un débat dissident :)

  • el.onclick = foo; // in the foo - obj
  • el.onclick = function () {this.style.color = '#fff';} // obj
  • el.onclick = function() {doSomething();} // In the doSomething - Window
  • el.addEventListener('click',foo,false) // in the foo - obj
  • el.attachEvent('onclick, function () { // this }') // window, all the compliance to IE :)
  • <button onclick="this.style.color = '#fff';"> // obj
  • <button onclick="foo"> // In the foo - window, but you can <button onclick="foo(this)">

6
2018-01-31 08:29



Il y a beaucoup de confusion sur la façon dont "ce" mot-clé est interprété en JavaScript. J'espère que cet article posera toutes ces questions pour se reposer une fois pour toutes. Et beaucoup plus. Veuillez lire attentivement l'intégralité de l'article. Soyez prévenu que cet article est long.

Indépendamment du contexte dans lequel il est utilisé, "ce" fait toujours référence à "objet courant" en Javascript. Cependant, ce que le "objet courant" est différent selon le contexte. le le contexte peut être exactement 1 sur 6 Suivant:

  1. Global (c'est-à-dire en dehors de toutes les fonctions)
  2. Appel direct "Fonction non liée" à l'intérieur (c'est-à-dire une fonction qui a pas étélié par l'appel nomFonction.bind)
  3. Appel indirect "Fonction non liée" à l'intérieur par functionName.call et nomFonction.apply
  4. Dans l'appel "Fonction Bound" (c'est-à-dire une fonction qui a été lié en appelant nomFonction.bind)
  5. Alors que la création d'objet à travers "nouveau"
  6. Gestionnaire d'événements Inside Inline DOM

Ce qui suit décrit chacun de ces contextes un par un:

  1. Contexte global (c'est-à-dire en dehors de toutes les fonctions):

    En dehors de toutes les fonctions (c'est-à-dire dans un contexte global), le "actuel objet" (et donc la valeur de "ce") est toujours le "fenêtre" objet pour les navigateurs.

  2. Appel direct "Fonction non liée" à l'intérieur:

    Dans un appel direct "Fonction non liée", l'objet qui invoqué l'appel de fonction devient "l'objet courant" (et donc la valeur de "ce"). Si une fonction est appelée sans explicit objet courant, la objet courant est soit le "fenêtre" objet (pour le mode non strict) ou indéfini (Pour le mode strict). Toute fonction (ou variable) définie dans Contexte global devient automatiquement une propriété du "fenêtre" Par exemple, supposons que la fonction est définie dans Global Context

    function UserDefinedFunction(){
        alert(this)
        }
    

    il devient la propriété de l'objet window, comme si vous l'aviez défini comme

    window.UserDefinedFunction=function(){
      alert(this)
    }  
    

    En mode "Non Strict", Appeler / Invoquer cette fonction directement via "UserDefinedFunction ()" appellera / invoquera automatiquement comme "window.UserDefinedFunction ()" fabrication "fenêtre" comme le "objet courant" (et donc la valeur de "ce") dans "UserDefinedFunction".L'invocation de cette fonction en "mode non strict" se traduira par

    UserDefinedFunction() // displays [object Window]  as it automatically gets invoked as window.UserDefinedFunction()
    

    En "Strict Mode", Appel / Invocation de la fonction directement à travers "UserDefinedFunction ()" volonté "NE PAS" appeler / invoquer automatiquement comme "window.UserDefinedFunction ()".D'où le "actuel objet" (et la valeur de "ce") dans "UserDefinedFunction" doit être indéfini. L'appel de cette fonction dans "Strict Mode" se traduira par

    UserDefinedFunction() // displays undefined
    

    Cependant, l'invoquer explicitement à l'aide de l'objet window doit entraîner le suivant

    window.UserDefinedFunction() // "always displays [object Window]   irrespective of mode."
    

    Regardons un autre exemple. Veuillez regarder le code suivant

     function UserDefinedFunction()
        {
            alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
        }
    
    var o1={
                a:1,
                b:2,
                f:UserDefinedFunction
          }
    var o2={
                c:3,
                d:4,
                f:UserDefinedFunction
           }
    
    o1.f() // Shall display 1,2,undefined,undefined
    o2.f() // Shall display undefined,undefined,3,4
    

    Dans l'exemple ci-dessus, nous voyons que lorsque "UserDefinedFunction" était invoqué par o1, "ce" prend la valeur de o1 et le valeur de ses propriétés "une" et "b" être affiché La valeur de "c" et "ré" ont été montrés comme indéfini comme o1 Est-ce que ne pas définir ces propriétés

    De même quand "UserDefinedFunction" a été invoqué à travers o2, "ce" prend la valeur de o2 et la valeur de ses propriétés "c" et "ré" afficher.La valeur de "une" et "b" ont été montrés comme indéfini comme o2 ne définit pas ces propriétés.

  3. Appel indirect "Fonction non liée" à l'intérieur par functionName.call et nomFonction.apply:

    Lorsqu'un "Fonction non liée" est appelé à travers functionName.call ou nomFonction.apply, la "objet courant" (et donc la valeur de "ce") est réglé sur la valeur de "ce" paramètre (premier paramètre) passé à appeler / appliquer. Le code suivant montre la même chose.

    function UserDefinedFunction()
    {
        alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
    }
    var o1={
                a:1,
                b:2,
                f:UserDefinedFunction
           }
    var o2={
                c:3,
                d:4,
                f:UserDefinedFunction
           }
    
    UserDefinedFunction.call(o1) // Shall display 1,2,undefined,undefined
    UserDefinedFunction.apply(o1) // Shall display 1,2,undefined,undefined
    
    UserDefinedFunction.call(o2) // Shall display undefined,undefined,3,4
    UserDefinedFunction.apply(o2) // Shall display undefined,undefined,3,4
    
    o1.f.call(o2) // Shall display undefined,undefined,3,4
    o1.f.apply(o2) // Shall display undefined,undefined,3,4
    
    o2.f.call(o1) // Shall display 1,2,undefined,undefined
    o2.f.apply(o1) // Shall display 1,2,undefined,undefined
    

    Le code ci-dessus montre clairement que la valeur "this" pour tout "NON Fonction liée "peut être modifiée par appeler / appliquer. De plus, si le "ce" paramètre n'est pas explicitement passé à appeler / appliquer, "objet courant" (et donc la valeur de "this") est réglé sur "fenêtre" en mode non strict et "indéfini" en mode strict.

  4. Dans l'appel "Fonction Bound" (c'est-à-dire une fonction qui a été liée par l'appel nomFonction.bind):

    Une fonction liée est une fonction dont "ce" la valeur a été fixé. Le code suivant a montré comment "ce" fonctionne dans le cas de la fonction liée

    function UserDefinedFunction()
    {
        alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
    }
    var o1={
              a:1,
              b:2,
              f:UserDefinedFunction,
              bf:null
           }
    var o2={
               c:3,
               d:4,
               f:UserDefinedFunction,
               bf:null
            }
    
    var bound1=UserDefinedFunction.bind(o1); // permanantly fixes "this" value of function "bound1" to Object o1
    bound1() // Shall display 1,2,undefined,undefined
    
    var bound2=UserDefinedFunction.bind(o2); // permanantly fixes "this" value of function "bound2" to Object o2
    bound2() // Shall display undefined,undefined,3,4
    
    var bound3=o1.f.bind(o2); // permanantly fixes "this" value of function "bound3" to Object o2
    bound3() // Shall display undefined,undefined,3,4
    
    var bound4=o2.f.bind(o1); // permanantly fixes "this" value of function "bound4" to Object o1
    bound4() // Shall display 1,2,undefined,undefined
    
    o1.bf=UserDefinedFunction.bind(o2) // permanantly fixes "this" value of function "o1.bf" to Object o2
    o1.bf() // Shall display undefined,undefined,3,4
    
    o2.bf=UserDefinedFunction.bind(o1) // permanantly fixes "this" value of function "o2.bf" to Object o1
    o2.bf() // Shall display 1,2,undefined,undefined
    
    bound1.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
    
    bound1.apply(o2) // Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
    
    o2.bf.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
    o2.bf.apply(o2) // Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function
    

    Comme indiqué dans le code ci-dessus, "this" valeur pour toute "fonction liée" NE PEUT PAS être modifié par appel / demande. De plus, si le "ce" le paramètre n'est pas explicitement passé à bind, "objet courant" (et donc la valeur de "ce" ) est réglé sur "fenêtre" en Non mode strict et "indéfini" en mode strict. Encore une chose. La liaison d'une fonction déjà liée ne modifie pas la valeur de "ce". Il reste défini comme la valeur définie par la première fonction de liaison.

  5. Alors que la création d'objet à travers "nouveau":

    Dans une fonction constructeur, le "objet courant" (et donc la valeur de "ce") référence l'objet en cours de création par "Nouveau" quel que soit le statut de liaison de la fonction. toutefois si le constructeur est une fonction liée, il doit être appelé avec ensemble prédéfini d'arguments défini pour la fonction liée.

  6. Gestionnaire d'événements Inside Inline DOM:

    Veuillez regarder l'extrait HTML suivant

    <button onclick='this.style.color=white'>Hello World</button>
    <div style='width:100px;height:100px;' onclick='OnDivClick(event,this)'>Hello World</div>
    

    le "ce" dans les exemples ci-dessus se référer à "bouton" élément et le "div" élément respectivement.

    Dans le premier exemple, la couleur de police du bouton doit être définie sur blanc quand il est cliqué.

    Dans le deuxième exemple lorsque le "div" l'élément est cliqué, il doit appeler le OnDivClick fonction avec son deuxième paramètre référencer l'élément div cliqué. Cependant, la valeur de "ce" dans OnDivClick NE DOIT PAS référence le cliqué div élément. Il doit être défini comme "objet de fenêtre" ou "indéfini" dans Non strict et Modes strictes respectivement (si OnDivClick est un fonction non liée) ou défini sur un prédéfini Valeur liée (si OnDivClick est un fonction liée)

Ce qui suit résume l'intégralité de l'article

  1. En contexte global "ce" se réfère toujours à la "fenêtre" objet

  2. Chaque fois qu'une fonction est invoquée, elle est invoquée dans le contexte d'un objet ("objet courant"). Si la objet courant n'est pas explicitement fourni, la objet courant  est le "objet de fenêtre" dans NON Strict Mode et "indéfini" en mode strict par défaut.

  3. La valeur de "ce" dans une fonction Non Bound est la référence à l'objet dans le contexte de laquelle la fonction est invoquée ("objet courant")

  4. La valeur de "ce" dans une fonction Non Bound peut être remplacé par appel et appliquer méthodes de la fonction.

  5. La valeur de "ce" est fixé pour une fonction liée et ne peut pas être dépassé par appel et appliquer méthodes de la fonction.

  6. La liaison et la fonction déjà liée ne changent pas la valeur de "this". Il reste défini comme la valeur définie par la première fonction de liaison.

  7. La valeur de "ce" dans un constructeur est l'objet qui est créé et initialisé

  8. La valeur de "ce" dans un gestionnaire d'événements DOM inline est référence à l'élément pour lequel le gestionnaire d'événements est donné.


6
2017-11-08 12:17



Probablement l'article le plus détaillé et le plus complet sur this est le suivant:

Explication de ce mot clé en JavaScript

L'idée derrière this est de comprendre que les types d'invocation de fonction ont une importance significative sur le réglage this valeur.


Lorsque vous avez des problèmes d'identification this, ne pas demande toi:

Où se trouve this pris à partir de?

mais faire demande toi:

Comment est la fonction invoqué?

Pour une fonction flèche (cas particulier de la transparence du contexte), posez-vous les questions suivantes:

Quelle valeur a this où la fonction de flèche est défini?

Cet état d'esprit est correct lorsqu'il s'agit de this et vous sauvera de maux de tête.


5
2018-06-28 09:25