Qu'est-ce que c'est? Un article vous aidera à comprendre cela en quelques secondes

Le contenu de cet article porte sur qu'est-ce que c'est ? Cet article vous permet de comprendre cela en quelques secondes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Dans le développement quotidien, nous rencontrons souvent des bugs signalés par cela. J'ai été déprimé pendant longtemps avant de me réveiller soudainement et d'apprendre de la douleur, j'ai résumé cela afin de pouvoir éviter des détours dans les futurs travaux de développement.

Remarque : cet article concerne uniquement l'environnement du navigateur.

1 : Exécution globale

console.log（this）；
// Window

On peut voir que dans la portée globale, cela pointe vers l'objet global actuel Window.

2 : Exécution en fonction

1. En mode non strict

function func （） {
console.log（this）；
}
func（）；
// Window

2.

"use strict";
function func （） {
console.log（this）；
}
func（）；
// undefined

Trois : Appel de méthode en tant qu'objet

Lorsqu'une fonction est appelée en tant que méthode d'un objet, cela pointe vers l'objet actuel obj :

Si la méthode objet est assignée à une variable, lorsque la méthode est appelée, cela pointe vers Window :

var obj = {
name: 'kk',
func: function （） {
console.log（this.name）；
}
}
obj.func（）；
// kk

var obj = {
name: 'kk',
func: function （） {
console.log（this）；
}
}
var test = obj.func;
test（）；
// Window

Quatre : Utiliser comme constructeur

dans JS , afin d'implémenter la classe, nous devons définir des constructeurs, et ajouter le nouveau mot-clé lors de l'appel d'un constructeur :

À ce stade, cela pointe vers le constructeur qui est instancié lorsqu'il est appelé objet.

function Person （name） {
this.name = name;
console.log（this）；
}
var p1 = new Person（'kk'）；
// Person

Bien sûr, le constructeur est en fait une fonction. Si le constructeur est appelé comme une fonction ordinaire, cela pointe vers Window :

function Person （name） {
this.name = name;
console.log（this）；
}
var p2 = Person（'MM'）；
// Window

Cinq : utilisation dans les minuteries

S'il n'y a pas de pointeur spécial (pour les changements de pointeur, veuillez voir ci-dessous : Comment changer le pointeur de this), les pointeurs de this dans les fonctions de rappel de setInterval et setTimeout sont tous Window. En effet, la méthode du minuteur JS est définie sous Window.

setInterval（function （） {
console.log（this）；
}, 2000）
// Window
setTimeout（function （） {
console.log（this）；
}, 0）
// Window

Six : Fonction Flèche

Appelée dans l'environnement global :

Appelée en fonction de l'objet :

var func = （） => {
console.log（this）；
}
func（）；
// Window

Il n'est pas difficile de constater que les fonctions ordinaires sont appelées en fonction de l'objet, cela pointe vers Fenêtre, les fonctions fléchées sont appelées en fonction de l'objet, et cela pointe vers l'objet où il est défini, ce qui est-ce en fonction, c'est-à-dire obj.

var obj = {
name: 'hh',
func: function （） {
setTimeout（function （） {
console.log（this）；
}, 0）
}
}
obj.func（）；
// Window
var obj = {
name: 'hh',
func: function （） {
setTimeout（（） => {
console.log（this）；
}, 0）
}
}
obj.func（）；
// obj

La valeur de this dans une fonction fléchée dépend de la valeur de this des fonctions non-flèches en dehors de la fonction, et la valeur de this ne peut pas être modifiée via call(), apply() et bind() méthodes.

Sept : appeler, postuler, lier

appeler :

fun.call(thisArg[, arg1[, arg2[, …]]] )

Il exécutera la fonction immédiatement. Le premier paramètre spécifie le contexte de celle-ci dans la fonction d'exécution, et les paramètres suivants sont les paramètres qui doivent être transmis pour exécuter la fonction

apply :

fun.apply(thisArg, [argsArray])

Il exécutera également la fonction immédiatement. Le premier paramètre spécifie le contexte de ceci dans la fonction d'exécution, et le deuxième paramètre. est un tableau qui est transmis aux paramètres d'exécution de la fonction (différence par rapport à l'appel)

bind :

var foo = fun.bind (thisArg[, arg1[, arg2[, … ]]]);

Il n'exécutera pas la fonction, mais renverra une nouvelle fonction. Cette nouvelle fonction est spécifiée avec le contexte de celle-ci, et les paramètres suivants sont les paramètres qui doivent être transmis pour être exécutés. la fonction ;

Regardons un exemple ：

Dans cet exemple, this d'appeler, appliquer et lier tous les points à obj, et ils peuvent tous fonctionner normalement ; call et apply exécuteront la fonction immédiatement. La différence entre call et apply réside dans les paramètres passés, call reçoit plusieurs listes de paramètres, apply reçoit un tableau contenant plusieurs paramètres, bind n'est pas une fonction d'exécution immédiate, il renvoie une fonction et p2 ; doit être exécuté pour renvoyer le résultat. bind reçoit plusieurs listes de paramètres.

function Person（name, age） {
this.name = name;
this.age = age;
console.log（this）；
}
var obj = {
name: 'kk',
age: 6
};
Person.call（obj, 'mm', 10）；
// obj，{name: "mm", age: 10}
Person.apply（obj, ['mm', 10]）；
// obj，{name: "mm", age: 10}
var p1 = Person.bind（obj, 'mm', 10）
var p2 = new p1（）；
// Person {name: "mm", age: 10}

Application : Comment changer le pointage de ceci

Pourquoi parlons-nous de ce module Afin de permettre à chacun d'avoir une compréhension plus approfondie de ce problème de pointage décrit ci-dessus, et de avoir une compréhension plus approfondie des fonctions importantes de JS.Trois méthodes : l'utilisation de call, apply et bind et dans le développement de projets réels, nous rencontrons souvent des situations où nous devons modifier le pointeur this ;

Jetons un coup d'œil aux méthodes :

1. Utilisez la fonction flèche d'es6

Une erreur sera signalée à ce moment, car celle-ci est La fonction dans setTimeout pointe vers Window et il n'y a pas de fonction func1 sur l'objet Window. Changeons-le en fonction flèche :

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// Uncaught TypeError: this.func1 is not a function

Pour le moment, aucune erreur n'est signalée, car la valeur de this de la fonction flèche dépend de la valeur de this de la fonction non-flèche en dehors de la fonction , qui est la valeur de this de func2 , c'est-à-dire obj.

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（（） => {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

2. Utilisez _this = this dans la fonction

À ce stade, func2 peut également fonctionner normalement. Dans func2, définissez d'abord var _this = this, où this est l'objet obj pointant vers func2. Afin d'empêcher setTimeout dans func2 d'être appelé par window, this dans setTimeout sera window. Nous attribuons this (pointant vers la variable obj) à une variable _this, de sorte que lorsque nous utilisons _this dans func2, elle pointe vers l'objet obj.

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
let _this = this;
setTimeout（function （） {
_this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

3. Utiliser appeler, postuler, lier

appeler :

appliquer :

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.call（obj）， 1000）；
}
};
obj.func2（）；
// kk

appeler, postuler et lier peuvent tous être modifié, l'objet de contexte de celui-ci, donc aucune erreur n'est signalée et il peut être exécuté normalement.

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.apply（obj）， 1000）；
}
};
obj.func2（）；
// kk
bind:
var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.bind（obj）（）， 1000）；
}
};
obj.func2（）；
// kk

La raison spécifique peut être vue dans le septième point ci-dessus, appeler, postuler et lier.

4. new instancie un objet

Comme ci-dessus : Le quatrième point est utilisé comme constructeur.

Ce qui précède est l’explication de qu’est-ce que c’est ? Un article vous permettra de comprendre toute l'introduction de ceci en quelques secondes. Si vous souhaitez en savoir plus sur le Tutoriel JavaScript, veuillez faire attention au site Web PHP chinois.

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!