Maison > Article > interface Web > Bien comprendre ce problème de pointage en JavaScript
Cet article vous apporte des connaissances pertinentes sur ce pointeur en JavaScript. Le mot-clé this est un point grammatical très important, j'espère qu'il sera utile à tout le monde.
En comprenant le contexte, nous pouvons comprendre plus clairement le problème de pointage de this
this
的指向问题
this
的指向可以看成就是当前的上下文
先让我们通过一个例子来看看什么是函数中的this
:
let colors = { green : "绿色", blue : "蓝色", showColors : function() { console.log("green: " + this.green + " blue: " + this.blue); }}colors.showColors();let show = colors.showColors;show();
第一个输出的是绿色和蓝色,此时函数的上下文是 colors,所以this
指向 colors
第二个输出的是 undefined 和 undefined,此时直接用圆括号调用函数,上下文就是 window,此时this
指向的是 window
所以,我们可以看出函数的上下文也就是this
是由调用函数的方式决定。
常见的函数上下文情况:
this
指向这个对象obj.fun();
上下文就是 objthis
指向 window 对象举个例子:
function fun() { return this.a + this.b;}var a = 1;var b = 2;let obj = { a : 5, b : fun(), fun : fun}let res = obj.fun();console.log(res);
在 obj 里面的 b 这里的 fun() 是直接用圆括号调用的,所以此时的 fun() 上下文就是 window 对象,所以这里的this
指向 window,b = 1 + 2 = 3;
obj.fun() 的 fun() 是由 obj 打点调用的,所以它的上下文就是 obj,所以这里的this
指向 obj,所以 res = 5 + 3 = 8
数组 / 类数组对象枚举出函数进行调用,上下文是这个数组 / 类数组对象
即可以看成:
数组[下标](); 调用这个函数的上下文对象就是这个数组
让我们通过例子来理解一下:
let arr = [1, 2, 3, function() { console.log(this[0]);}];arr[3]();
这里下标为 3 是个函数,通过数组枚举出来下标为 3 的对象,然后再执行,所以它的上下文就是这个数组 arr
类数组对象:
所有键名为自然数序列(从 0 开始),且有length
属性的对象
例如:arguments
对象就是一个类数组对象,它是函数的实参列表
function fun() { arguments[3]();}fun(1, 2, 3, function() { console.log(this[0]);})
这里 fun 这个函数被调用了,但是被调用的同时又执行了传入到它身上的一个函数,即arguments[3]()
这个语句,所以就会输出this[0]
,它是个类数组对象枚举出函数进行调用,所以它的上下文就是arguments
,this
指向它。
立即执行函数(IIFE),它的上下文就是 window 对象,所以它的this
指向的是 window
让我们通过一个例子理解一下:
var a = 1;let obj = { a : 2, fun : (function() { let a = this.a; return function() { console.log(a + this.a); } })()};obj.fun();
obj.fun()
由前文所讲,fun() 由 obj 调用,所以这里的this
指向 obj;
obj 中的 fun 等于一个立即执行函数的返回值,
就相当于
obj = function() { console.log(a + this.a);}
这里的this
指向的是 obj,所以 this.a = 2;
在这个立即执行函数里面它的上下文对象是 window,所以它的this
指向 window,所以这里面的let a = this.a 的this
指向的会是 window 对象,所以 a = 1,所以它的返回值那里的 a = 1;
所以最终输出 1 + 2 = 3
在定时器、延时器调用函数中,上下文对象是 window 对象,里面的this
指向 window 对象
让我们来通过一个例子来理解一下:
let obj = { a : 1, b : 2, fun : function() { console.log(this.a + this.b); }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);
这里setTimeout
的调用函数是obj.fun
,它是由延时器调用的,它将在 2s 后运行,所以它的this
this Le point de code> peut être vu comme le contexte actuel<p></p>
<h1>2 Fonctions générales🎜</h1>🎜Prenons d'abord un exemple pour voir ce qu'est <code>ce
dans une fonction. :🎜 let obj = { a : 1, b : 2, fun : function() { console.log(this.a + this.b); }}var a = 3;var b = 4;setTimeout(function() { obj.fun();}, 2000);🎜🎜 Les premiers résultats sont vert et bleu. À ce stade, le contexte de la fonction est les couleurs, donc
this
pointe vers les couleurs🎜 La deuxième sortie est indéfinie et indéfinie. À ce stade, la fonction est appelée directement avec des parenthèses, et. le contexte est window. Ceci Lorsque this
pointe vers window🎜🎜Donc, nous pouvons voir que le contexte de la fonction, c'est-à-dire this
est 🎜déterminé par la façon dont le la fonction est appelée🎜. 🎜🎜🎜Situations courantes de contexte de fonction : 🎜🎜this
pointe vers cela object🎜obj .fun();
Le contexte est objthis
pointe vers l'objet fenêtreDOM元素.onclick = function() { 这里的上下文就是 DOM元素,this指向DOM元素};🎜 🎜 Le b dans obj ici est appelé fun() directement en utilisant des parenthèses, donc le contexte de fun() à ce moment est l'objet window, donc
this
pointe ici à la fenêtre, b = 1 + 2 = 3 ;🎜 Le fun() de obj.fun() est appelé par obj, donc son contexte est obj, donc this
pointe ici vers obj, donc res = 5 + 3 = 8🎜 nbsp;html> <meta> <meta> <meta> <title>事件处理函数</title> <style> p { width: 200px; height: 200px; float: left; border: 1px solid #000; margin-right: 10px; } </style> <p></p> <p></p> <p></p> <script> function show() { alert("You click " + this.id); } let box1 = document.getElementById('box1'); let box2 = document.getElementById('box2'); let box3 = document.getElementById('box3'); box1.onclick = show; box2.onclick = show; box3.onclick = show; </script>🎜Comprenons à travers des exemples Le voici : 🎜rrreee🎜🎜En bas, marqué 3 est une fonction qui énumère l'objet avec l'index 3 à travers le tableau puis l'exécute, donc son contexte est cet tableau arr🎜🎜🎜Objet de type tableau :🎜🎜
length
🎜 Par exemple : l'objet arguments
est un objet de type tableau, qui est la liste de paramètres réelle de la fonction🎜rrreee🎜🎜🎜Ici, la fonction fun est appelée, mais en même temps elle est appelée, une fonction qui lui est passée est exécutée, c'est-à-dire l'instruction arguments[3]()
, donc affichera this[0]
, qui est une fonction énumérée d'objets de type tableau pour l'appel, donc son contexte est arguments
, et this
le pointe. 🎜this
pointe vers window🎜🎜Comprenons. à travers un exemple : 🎜rrreee🎜🎜 obj.fun()
Comme mentionné ci-dessus, fun() est appelé par obj, donc this
pointe ici vers obj 🎜 fun dans obj est égal à une exécution immédiate Le retour ; valeur de la fonction, 🎜 est équivalent à 🎜rrreee🎜 Ici this
pointe vers obj, donc this.a = 2; 🎜 Dans cette fonction d'exécution immédiate, son objet contextuel est window, donc il Le this
pointe vers window, donc laissez a = this.a. Le this
pointe vers l'objet window, donc a = 1, donc sa valeur de retour est là a = 1;🎜. Donc la sortie finale 1 + 2 = 3🎜this pointe vers l'objet fenêtre 🎜🎜Comprenons-le à travers un exemple : 🎜rrreee🎜<img src="https://img.php.cn/upload/article/000/000/%20067/9f014475a3e00e65c141386027b762e2-5.png" alt="Insérer la description de l'image ici">🎜 La fonction appelante de <code>setTimeout
ici est obj.fun
, qui est utilisée par le retardateur. Lorsqu'elle est appelée, elle s'exécutera après 2 secondes. , donc son this
pointe vers l'objet window et affiche 7🎜🎜Si nous écrivons comme ceci, qu'est-ce qui sera affiché ? 🎜let obj = { a : 1, b : 2, fun : function() { console.log(this.a + this.b); }}var a = 3;var b = 4;setTimeout(function() { obj.fun();}, 2000);
此时,setTimeout
的第一个参数变成一个匿名函数,此时匿名函数的this
指向的是 window 对象;
在匿名函数中obj.fun()
,这个fun()
是由 obj 调用的,所以此时fun
里面的this
指向的是 obj,所以输出 3
事件处理函数的上下文是绑定事件的DOM 元素
,this
指向的是DOM 元素
即:
DOM元素.onclick = function() { 这里的上下文就是 DOM元素,this指向DOM元素};
让我们来通过一个例子来理解一下:
nbsp;html> <meta> <meta> <meta> <title>事件处理函数</title> <style> p { width: 200px; height: 200px; float: left; border: 1px solid #000; margin-right: 10px; } </style> <p></p> <p></p> <p></p> <script> function show() { alert("You click " + this.id); } let box1 = document.getElementById('box1'); let box2 = document.getElementById('box2'); let box3 = document.getElementById('box3'); box1.onclick = show; box2.onclick = show; box3.onclick = show; </script>
当我们点击构建出来的三个盒子时,弹出的对话框中会输出对应的盒子 id
因为事件处理函数中,this
指向的就是对应的DOM 元素
【相关推荐: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!