Maison > interface Web > js tutoriel > Explication détaillée des exemples d'utilisation de ceci dans JS

Explication détaillée des exemples d'utilisation de ceci dans JS

php中世界最好的语言
Libérer: 2018-05-31 11:46:14
original
1612 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de ce pointeur en JS. Quelles sont les précautions lors de l'utilisation de ce pointeur en JS. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. 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 utilisée comme constructeur Lorsqu'elle est appelée, cela pointe vers l'objet nouvellement créé

Exemple :

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname
Copier après la connexion

Exemple deux :

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
Copier après la connexion

Exemple 3 :

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
Copier après la connexion
Pour l'exemple 3, il existe un autre cas particulier, c'est-à-dire lorsque le Le

constructeur renvoie un objet via "return". A ce moment-là, le résultat final de cette opération renvoie cet objet, pas l'objet nouvellement créé, donc cela ne sert à rien dans ce cas.

Exemple quatre :

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

Exemple cinq :

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

appeler et Le rôle de apply

apply accepte deux paramètres. Le premier paramètre spécifie le pointeur de this dans le corps de la fonction. Le deuxième paramètre est un tableau ou un type de tableau utilisé pour transmettre le Paramètre

liste des fonctions.

Exemple 1 :

call Le nombre de paramètres transmis n'est pas fixe Comme pour apply, le premier paramètre est également utilisé pour spécifier la fonction. Le point dans le corps, à partir du deuxième paramètre, chaque paramètre est transmis tour à tour à la fonction appelée.
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
Copier après la connexion

Exemple 2 :

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. à l'intérieur de la fonction, cela pointe, mais il ne sera pas exécuté immédiatement, vous devez l'appeler explicitement.
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
Copier après la connexion

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');
Copier après la connexion

J'ai perdu ceciDans 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", celle-ci pointe vers l'objet "boy", et lorsqu'une autre variable

fait référence au

" getName", car elle est appelée comme une fonction ordinaire, donc cela pointe vers la fenêtre d'objet globale

Exemple 2 : Même si la fonction est définie à l'intérieur de la fonction, si elle est appelée en tant que objet ordinaire, cela pointe également vers l'objet window
var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php chinois. site web!
var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined
Copier après la connexion

Lecture recommandée :

vue-element fait fonctionner le lecteur de musique (avec code)


Comment utiliser les composants VueJs Père -communication fils (avec code)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal