Le pointage de ceci dans JS et les fonctions d'appel et d'application

Cet article partage avec vous le contenu de base de JS, ce pointeur et les points d'appel et de candidature associés. Les amis intéressés peuvent l'apprendre et s'y référer.

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 :

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

2. 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

Exemple trois :

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

Par exemple trois, il est un autre cas particulier, c'est-à-dire lorsque le constructeur passe "return". Lorsqu'un objet est renvoyé, le résultat final de cette opération est l'objet renvoyé, pas l'objet nouvellement créé, donc cela n'est d'aucune utilité dans ce cas.

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

Les fonctions call et apply

apply acceptent deux paramètres. Le premier paramètre spécifie le pointeur de this dans le corps de la fonction, et le deuxième paramètre est un tableau ou un tableau pour le passage. 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

appel Le nombre de paramètres transmis n'est pas fixe. Identique à apply, le premier paramètre est également utilisé à partir de. le point de ceci dans le corps de fonction spécifié, à partir du deuxième paramètre, chaque paramètre est passé tour à tour dans 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. c'est simplement Changer le pointeur de this à l'intérieur de la fonction, mais il ne sera pas exécuté immédiatement, vous devez l'appeler explicitement.

Exemple 3 : Simulation de 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');

J'ai perdu ceci

Dans certains cas, le pointage de ceci sera perdu. À ce stade, nous devons utiliser call, apply et bind pour modifier le 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 il est utilisé comme un appel de fonction normal, donc cela pointe vers la fenêtre d'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, ceci pointe également vers l'objet window

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 représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

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!