Exemples pour expliquer comment résoudre cette erreur de pointage en JavaScript (tutoriel image et texte)

La gestion de ce pointeur en JavaScript est un casse-tête courant pour tout le monde. Nous donnons ici un exemple pour expliquer la solution à l'erreur de ce pointeur en JavaScript. Les amis dans le besoin peuvent se référer à

pour voir ce qui suit. définition de l'objet :

'use strict'
var jane = {
  name ： ‘Jane',
  display : function(){
    retrun 'Person named ' + this.name;
  }
};

De cette façon, vous pouvez appeler

jane.display();

L'appel suivant va mal tourner :

var func = jane.display;
func()

TypeError: Cannot read property 'name' of undefined

Parce que ce pointeur a été modifié, la manière correcte est la suivante :

var func2 = jane.display.bind(jane);
func2()

'Penson named Jane'

Toutes les fonctions ont leur particularité this variable , comme forEach

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    this.friends.forEach(function(friend) {
      // 'this' is undefined here
      console.log(this.name + ' says hi to '+ friend);
    });
  }
}

Appeler sayHiToFriends générera une erreur :

jane.sayHiToFriends()

TypeError: Cannot read property 'name' of undefined

Solution 1 : Enregistrez ceci dans une autre variable

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    var that = this;
    this.friends.forEach(function(friend) {
      console.log(that.name + ' says hi to '+ friend);
    });
  }
}

Solution 2 : En utilisant le deuxième paramètre de forEach, il peut attribuer une valeur à ce

var jane = {
  name : 'Jane',
  friends: ['Tarzan', 'Cheeta'],
  sayHiToFriends: function(){
    'use strict';
    this.friends.forEach(function(friend) {
      console.log(this.name + ' says hi to '+ friend);
    }, this);
  }
}

Le ci-dessus, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Sept façons de créer des objets en JavaScript (résumé, à lire absolument)

Implémentation de Javascript dans Fonction objet Java Map (réponse détaillée, code joint)

Constructeur JavaScript et nouvel opérateur (important, à lire)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!