Explication détaillée de javascript this (tutoriel graphique)

Cet article présente principalement des informations pertinentes sur Javascript en détail. Les amis qui en ont besoin peuvent s'y référer

La valeur de ceci est déterminée au moment de l'exécution

Quoi exactement ce que représente JS est déterminé en fonction du contexte dans lequel le programme est en cours d'exécution et peut être divisé dans les situations suivantes.

1. Ceci dans la portée globale

Dans la portée globale, cela pointe vers l'objet window.

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况：
//var x = 5;
//x = 5;

L'exécution de var x=5 dans la portée globale crée en fait un attribut x pour l'objet window et le rend égal à 5.

Si vous n'ajoutez pas var lors de la définition d'une variable, JS considérera la variable comme une variable globale et la traitera comme une propriété de l'objet window.

2. ceci dans la fonction

Il existe deux types de fonctions dans JS La fonction appelée directement est appelée fonction normale et la fonction qui crée un objet. via new est appelé un constructeur.

2.1 Ceci dans le constructeur

Ceci dans le constructeur pointe vers l'objet qu'il crée, tel que :

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 Ceci dans la fonction ordinaire

Cette fonction ordinaire pointe vers l'objet fenêtre.
Si dans l'exemple ci-dessus, la fonction Perosn est exécutée directement, alors cela représente l'objet fenêtre, donc un nom global sera créé après l'exécution de la fonction.

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行，this指向window对象

3. this dans l'objet

this dans l'objet pointe vers l'objet actuel, tel que :

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

this dans le code ci-dessus Pointe vers l'objet auquel appartient la fonction getName.

Cependant, s'il existe une fonction imbriquée dans la fonction d'un objet, le this de cette fonction pointe vers la fenêtre, pas son objet extérieur.

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象，而是代表window对象
    })(name);
  }
}

Dans l'exemple ci-dessus, il y a une fonction getName dans l'objet personne, et il y a une fonction à l'intérieur de la fonction getName. Celle-ci à l'intérieur de la fonction pointe vers l'objet fenêtre, pas vers l'objet personne This. c'est un bug en JS ! Généralement, ce qui suit est fait pour éviter ce bug :

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

Dans la fonction de premier niveau de l'objet personne, nous attribuons ceci à la variable locale that, puis l'utilisons dans la fonction de deuxième niveau. . À ce stade, cela pointe vers l'objet personne et peut opérer sur les attributs de la personne.

Remarque : Si vous attribuez une fonction dans un objet à une variable, puis appelez la fonction via la variable, celle-ci dans la fonction pointe vers la fenêtre, pas vers l'objet, comme indiqué ci-dessous :

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数，这个函数中的this将指向window
newGetName();//若全局作用域中没有name，则将返回undefined

4. Utilisez les fonctions d'appel et d'application pour tromper cela

Ces deux fonctions peuvent spécifier manuellement vers quel objet cela pointe à l'intérieur de la fonction appelée.

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

appliquer l'utilisation

Objet A.Nom de la fonction.apply (Objet B, liste de paramètres
Lorsque l'objet B est le premier à appliquer); Lorsque les paramètres sont passés à appliquer, ceci dans la fonction de l'objet A pointe vers l'objet B. A ce moment, le fonctionnement de cette fonction sur l'objet A sera appliqué à l'objet B, réalisant ainsi l'utilisation de l'objet A pour appeler la fonction de l'objet B. .

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Quelques résumés d'apprentissage de Javascript ceci

Six obstacles de JavaScript ceci

Présentez en détail ce que JavaScript indique ? (Photos et texte)

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!