En tant que mot clé en JavaScript, il présente un degré de complexité élevé, principalement parce qu'il diffère selon les scénarios. Voici d'abord une conclusion, et les choses importantes sont dites trois fois:
La direction de ceci est déterminée dynamiquement par le contexte
La direction de ceci est déterminée dynamiquement par le contexte
La direction de ceci est déterminée dynamiquement par le contexte
Je suis un ancien programmeur web front-end engagé dans le développement depuis de nombreuses années. Il y a quelque temps, j'ai passé un mois à trier un produit sec d'apprentissage web front-end qui convient le mieux à l'apprentissage. Divers frameworks sont organisés et envoyés à tous les petits partenaires frontaux, si vous souhaitez l'obtenir, vous pouvez ajouter le groupe QQ suivant pour l'obtenir gratuitement.
Ceci pointe vers le scénario de l'instance
L'incertitude sur le point de ceci se reflète principalement dans les scénarios d'application suivants:
Environnement global Appel de
fonction ordinaire
Appeler / appliquer / lier un appel de fonction Appel de
méthode d'attribut d'objet Appel de
constructeur
Fonction de flèche
Environnement global
Dans l'environnement global, qu'il soit en mode strict ou non, cela pointe vers l'objet global, comme la fenêtre du navigateur côté
// 在浏览器中, window 对象同时也是全局对象：
```javascript
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = "MDN";
console.log(window.b) // "MDN"
console.log(b) // "MDN"
普通函数调用
当普通的函数，直接调用的时候，一般来说分两种情况:
严格模式绑定到 undefined
非严格模式绑定到全局对象 window
```javascript
function foo(){
console.log(this);
}
function bar(){
"use strict";
console.log(this);
}
foo() // window
bar() // undefined
La fonction call / apply / bind appelle
call / apply ces deux objets de fonction à la méthode pour exécuter une fonction immédiatement, et le this dans la fonction est lié à l'objet que vous fournissez
La méthode bind lie en permanence le this de la fonction à l'objet spécifié et renvoie une nouvelle fonction. Cette fonction peut être appelée peu importe comment dans le futur
function foo(){
console.log(this);
}
function bar(){
console.log(this);
}
foo.call({
name:'小米'}); // {name: "小米"}
const bar1 = bar.bind({
num:123})
bar1() // {num: 123}
Appel de méthode d'attribut d'objet
En tant qu'appel de méthode d'attribut d'objet, ils pointent tous vers l'objet que la fonction a été appelée auparavant. Bien sûr, il y aura parfois diverses variantes ou des questions d'interview interférentes
const student = {
name: "tom",
fn: function () {
return this;
},
};
console.log(student.fn() === student);
Les appels de constructeur ou les
constructeurs de contexte de classe sont les grandes poules de la création d'objets JavaScript (en fait, les classes sont du sucre syntaxique pour les constructeurs). Habituellement, il y a un script appelé new dans le monde de la programmation. Qui ose dire programmeurs (yuan) S'il n'y a pas object, l'appelant de cette manière pointe vers l'instance d'objet elle-même que vous venez de découvrir:
function Person(name){
console.log(this);
this.name = name
}
const p = new Person('tom')
console.log(p);
Ceci dans la
fonction de flèche Cet objet dans le corps de la fonction de flèche est l'objet où il est défini, pas l'objet où il est utilisé.
var obj = {
name: "tom",
foo() {
setTimeout(() => {
console.log(this);
}, 1000);
},
};
obj.foo() // obj
Questions d'
entretien Les questions d'entretien courantes sont: 1. Fonction de liaison manuscrite
Function.prototype.mybind = function (ctx, ...args) {
const fn = this;
return function () {
fn.apply(ctx, args);
};
};
function foo(x, y) {
console.log(this, x, y);
}
const foo1 = foo.mybind({
name: "zhangsan" }, 10, 20);
foo1();
2. Comment le nouvel opérateur a-t-il appelé le constructeur?
Créez un nouvel objet;
pointez le this du constructeur vers ce nouvel objet;
ajoutez des propriétés, des méthodes, etc. à cet objet;
renvoyez enfin le nouvel objet.