Table des matières
Qu'est-ce que c'est ?
En tant que méthode d'un objet
使用apply,call
作为构造函数
箭头函数
Maison interface Web js tutoriel Qu'est-ce que c'est? Une analyse approfondie de cela en JavaScript

Qu'est-ce que c'est? Une analyse approfondie de cela en JavaScript

Aug 04, 2022 pm 05:02 PM
javascript this

Qu'est-ce que c'est ? L'article suivant vous présentera cela en JavaScript et parlera des différences entre cela dans les différentes méthodes d'appel de fonctions. J'espère que cela vous sera utile !

Qu'est-ce que c'est? Une analyse approfondie de cela en JavaScript

JavaScript中的this格外的不一样,比如Java语言中的this是在代码的执行阶段是不可更改,而JavaScript的this是在调用阶段进行绑定。因为这一性质所以给了thisBeaucoup d'espace pour jouer. Mais c'est quelque peu différent en mode strict et en mode non strict, et les différentes méthodes d'appel de la fonction entraînent également certaines différences à cet égard.

Qu'est-ce que c'est ?

Tout d'abord, définissons ceci : il s'agit d'une variable déterminée lors de la création du contexte d'exécution qui ne peut pas être modifiée lors de l'exécution.

Le soi-disant contexte d'exécution est le processus dans lequel le moteur JavaScript déclare certaines variables, fonctions, this qui seront utilisées en interne dans le code avant d'exécuter un morceau de code, puis de les enregistrer. dans les objets variables. Cet « extrait de code » comprend : code global (code à l'intérieur de la balise de script), code interne de fonction, code interne d'évaluation. La chaîne de portées que nous connaissons sera également enregistrée ici, stockée sous forme de tableau dans l'attribut [[Scopes]] de la fonction correspondante.

Ceci n'est déterminé que lors de la phase d'appel de fonction, qui est la phase de création du contexte d'exécution, et est attribué et stocké dans l'objet variable. Cette fonctionnalité conduit également à la variabilité de this : c'est-à-dire que lorsque la fonction est appelée de différentes manières, la valeur de this peut être différente.

Nous avons dit plus haut que cela se comporte différemment en mode strict et en mode non strict :

var a = 1;
function fun() {
   'use strict';
    var a = 2;
      return this.a;
}
fun();//报错 Cannot read property 'a' of undefined
Copier après la connexion
  • En mode strict, cela pointe vers undefined

var a = 1;
function fun() {
    var a = 2;
      return this.a;
}
fun();//1
Copier après la connexion
  • En mode non strict, cela pointe vers window ;

Le même morceau de code ci-dessus se comporte différemment selon les modes car il est différent en mode strict et en mode non strict.

Conclusion : Lorsqu'une fonction est appelée indépendamment, c'est this pointe vers undefined en mode strict. En mode non strict, quand this pointe vers undefined, elle pointe automatiquement vers l'objet global (fenêtre dans le navigateur)

Plus Permettez-moi de mentionner que dans l'environnement global, cela vous concerne. Regardons un autre exemple :

this.a = 1;
var b = 1;
c = 1;
console.log(this === window)//true
//这三种都能得到想要的结果,全局上下文的变量对象中存在这三个变量
Copier après la connexion

Encore une chose, que se passe-t-il lorsque this n'est pas utilisé dans la fonction ? Regardez un exemple :

var a = 1000;
var obj = {
    a: 1,
      b: this.a + 1
}
function fun() {
    var obj = {
          a: 1,
        c: this.a + 2 //严格模式下这块报错 Cannot read property 'a' of undefined
    }
    return obj.c;
}
console.log(fun());//1002
console.log(obj.b);//1001
Copier après la connexion

Dans ce cas, cela pointe toujours vers la fenêtre. Ensuite, nous pouvons tirer une conclusion distincte :

Lorsque obj est déclaré globalement, ceci dans les propriétés internes de obj pointe vers l'objet global. Lorsque obj est déclaré dans une fonction, cela pointera vers undéfini en mode strict et undéfini en non. -mode strict. Converti automatiquement pour pointer vers l'objet global.

D'accord, je viens de m'y essayer, et je connais la différence entre cela en mode strict et en mode non strict. Cependant, la méthode la plus couramment utilisée dans notre vie quotidienne est de l'utiliser dans les fonctions. au-dessus des différentes méthodes d'appel de this dans les fonctions. Il existe encore des différences, alors quelles sont les méthodes d'appel des fonctions ? Quatre types :

  • Appelez directement
  • en tant que méthode objet dans l'environnement global ou une fonction ordinaire
  • Utilisez apply et call
  • en tant que constructeur

Voici les quatre situations :

Appel direct

L'exemple ci-dessus est en fait un appel direct, mais j'ai décidé d'écrire un autre exemple :

var a = 1;
var obj  =  {
    a: 2,
      b: function () {
        function fun() {
          return this.a
        }
       console.log(fun());
    }
} 
obj.b();//1
Copier après la connexion

Bien que la fonction fun soit définie dans la méthode obj.b, c'est toujours une fonction ordinaire qui pointe vers undefined en non strict. mode , et pointe automatiquement vers l'objet global. Comme prévu, le mode strict signalera l'erreur undefined.a n'est pas établi, a n'est pas défini.

L'important est redit : Lorsqu'une fonction est appelée indépendamment, c'est this pointe vers undefined en mode strict. En mode non strict, lorsque this pointe sur undefined, elle pointe automatiquement vers l'objet global (fenêtre du navigateur). ) .

En tant que méthode d'un objet

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
console.log(obj.b())//2
Copier après la connexion

bLa fonction anonyme référencée par b est appelée comme méthode d'obj. À ce stade, cela pointe vers l'objet qui l'appelle. C'est l'objet. Et si la méthode b n’est pas appelée en tant que méthode objet ? Qu'est-ce que ça veut dire ? Ça y est :

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
var t = obj.b;
console.log(t());//1
Copier après la connexion

Comme ci-dessus, le résultat de l'exécution de la fonction t s'avère être la variable globale 1. Pourquoi ? Cela implique l'espace mémoire de Javascript. C'est-à-dire que l'attribut b de l'objet obj stocke une référence à la fonction anonyme, qui peut être comprise comme un pointeur. Lors de l'attribution d'une valeur à t, il n'ouvre pas d'espace mémoire séparé pour stocker la nouvelle fonction. Au lieu de cela, t stocke un pointeur qui pointe vers cette fonction. Cela équivaut à exécuter ce morceau de pseudo-code :

var a = 1;
function fun() {//此函数存储在堆中
    return this.a;
}
var obj = {
  a: 2,
  b: fun //b指向fun函数
}
var t = fun;//变量t指向fun函数
console.log(t());//1
Copier après la connexion

À ce stade, t est un pointeur vers la fonction fun Appeler t équivaut à appeler fun directement En appliquant les règles ci-dessus, imprimer 1 est naturellement facile à comprendre.

使用apply,call

关于apply和call是干什么的怎么用本文不涉及,请移驾:applycall

这是个万能公式,实际上上面直接调用的代码,我们可以看成这样的:

function fun() {
      return this.a;
}
fun();//1
//严格模式
fun.call(undefined)
//非严格模式
fun.call(window)
Copier après la connexion

这时候我们就可以解释下,为啥说在非严格模式下,当函数this指向undefined的时候,会自动指向全局对象,如上,在非严格模式下,当调用fun.call(undefined)的时候打印出来的依旧是1,就是最好的证据。

为啥说是万能公式呢?再看函数作为对象的方法调用:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
obj.b()
obj.b.call(obj)
Copier après la connexion

如上,是不是很强大,可以理解为其它两种都是这个方法的语法糖罢了,那么apply和call是不是真的万能的呢?并不是,ES6的箭头函数就是特例,因为箭头函数的this不是在调用时候确定的,这也就是为啥说箭头函数好用的原因之一,因为它的this固定不会变来变去的了。关于箭头函数的this我们稍后再说。

作为构造函数

何为构造函数?所谓构造函数就是用来new对象的函数,像FunctionObjectArrayDate等都是全局定义的构造函数。其实每一个函数都可以new对象,那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意,构造函数首字母记得大写。

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun.prototype = {
  contructor: Fun,
  say: function () {
    return this.name + '正在说话';
  }
}
var f = new Fun();
f.run();//Damonare正在跑步
f.say();//Damonare正在说话
Copier après la connexion

如上,如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象。为啥呢?new做了啥呢?

伪代码如下:

function Fun() {
  //new做的事情
  var obj = {};
  obj.__proto__ = Fun.prototype;//Base为构造函数
  obj.name = 'Damonare';
  ...//一系列赋值以及更多的事
  return obj
}
Copier après la connexion

也就是说new做了下面这些事:

  • 创建一个临时对象
  • 给临时对象绑定原型
  • 给临时对象对应属性赋值
  • 将临时对象return

也就是说new其实就是个语法糖,this之所以指向临时对象还是没逃脱上面说的几种情况。

当然如果直接调用Fun(),如下:

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun();
console.log(window)
Copier après la connexion

其实就是直接调用一个函数,this在非严格模式下指向window,你可以在window对象找到所有的变量。

另外还有一点,prototype对象的方法的this指向实例对象,因为实例对象的__proto__已经指向了原型函数的prototype。这就涉及原型链的知识了,即方法会沿着对象的原型链进行查找。

箭头函数

刚刚提到了箭头函数是一个不可以用call和apply改变this的典型。

我们看下面这个例子:

var a = 1;
var obj = {
  a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1
Copier après la connexion

以上,两次调用都是1。

那么箭头函数的this是怎么确定的呢?箭头函数会捕获其所在上下文的  this 值,作为自己的 this,也就是说箭头函数的this在词法层面就完成了绑定。apply,call方法只是传入参数,却改不了this。

var a = 1;
var obj = {
  a: 2
};
function fun() {
    var a = 3;
    let f = () => console.log(this.a);
      f();
};
fun();//1
fun.call(obj);//2
Copier après la connexion

如上,fun直接调用,fun的上下文中的this值为window,注意,这个地方有点绕。fun的上下文就是此箭头函数所在的上下文,因此此时f的this为fun的this也就是window。当fun.call(obj)再次调用的时候,新的上下文创建,fun此时的this为obj,也就是箭头函数的this值。

再来一个例子:

function Fun() {
    this.name = 'Damonare';
}
Fun.prototype.say = () => {
    console.log(this);
}
var f = new Fun();
f.say();//window
Copier après la connexion

有的同学看到这个例子会很懵逼,感觉上this应该指向f这个实例对象啊。不是的,此时的箭头函数所在的上下文是__proto__所在的上下文也就是Object函数的上下文,而Object的this值就是全局对象。

那么再来一个例子:

function Fun() {
    this.name = 'Damonare';
      this.say = () => {
        console.log(this);
    }
}
var f = new Fun();
f.say();//Fun的实例对象
Copier après la connexion

如上,this.say所在的上下文,此时箭头函数所在的上下文就变成了Fun的上下文环境,而因为上面说过当函数作为构造函数调用的时候(也就是new的作用)上下文环境的this指向实例对象。

【相关推荐: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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment utiliser insertBefore en javascript Comment utiliser insertBefore en javascript Nov 24, 2023 am 11:56 AM

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

See all articles