Le pointage de ceci dans JS et les fonctions d'appel et d'application (tutoriel image et texte)

Dans des applications pratiques spécifiques, l'intérêt de ceci ne peut pas être déterminé lorsque la fonction est définie, mais est déterminé lorsque la fonction est exécutée. Selon l'environnement d'exécution, elle peut être grossièrement divisée en trois types suivants :

1. Lorsque la fonction est appelée comme une fonction normale, cela pointe vers l'objet global

2. Lorsque la fonction est appelée comme une méthode de l'objet, cela pointe vers l'objet

3. Lorsque la fonction est appelée en tant que constructeur, cela pointe vers l'objet nouvellement créé

Exemple 1 :

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

Exemple deux :

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

Troisième exemple :

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

Pour l'exemple 3, il existe un autre cas particulier, c'est-à-dire que lorsque le constructeur renvoie un objet via "return", le résultat final de cette opération renvoie cet objet, pas le nouveau créé objet, donc ceci dans ce cas ça ne sert à rien.

Exemple 4 :

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

Exemple 5 :

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

Le rôle d'appeler et de postuler

apply accepte deux paramètres, le premier Le paramètre spécifie le pointeur vers ceci dans le corps de la fonction. Le deuxième paramètre est un tableau ou un paramètre de type tableau utilisé pour transmettre la liste des paramètres de la fonction appelée.

Exemple 1 :

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call Le nombre de paramètres transmis n'est pas fixe Comme pour apply, le premier paramètre est également utilisé pour spécifier le pointeur de this dans le corps de la fonction. . From À partir du deuxième paramètre, chaque paramètre est passé tour à tour à la fonction appelée.

Exemple 2 :

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

De plus, la plupart des navigateurs avancés implémentent également la méthode bind. La différence entre celle-ci et call and apply est que bind ne modifie que le pointeur de this à l'intérieur de la fonction. , mais ce n'est pas le cas. Il sera exécuté immédiatement, vous devez l'appeler explicitement.

Exemple 3 : Simuler la méthode de liaison du navigateur

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

Perdu ceci

Dans certains cas, le pointeur vers ceci sera perdu À ce stade, nous avons besoin d'Utiliser. appelez, postulez et liez pour changer le problème de pointage de ceci.

Exemple 1 : Lorsque la méthode "getName" est appelée comme propriété de l'objet "boy", cela pointe vers l'objet "boy" Lorsqu'une autre variable fait référence à la méthode "getName", car c'est le cas. appelé comme une fonction ordinaire, donc cela pointe vers la fenêtre de l'objet global

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

Exemple 2 : Même si la fonction est définie à l'intérieur de la fonction, si elle est appelée comme un objet normal, cela pointe également vers le objet fenêtre

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée des étapes de partage de ressources entre le processus parent NodeJS et le processus enfant

Auto-auto-anonyme JS concept de fonction d'exécution et mode d'emploi

Analyse JS de la méthode de génération d'une image de code QR à partir d'un lien

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!