JavaScript의 이 포인팅 문제를 완전히 이해합니다.
- WBOY앞으로
- 2021-12-21 18:28:081672검색
이 기사는 JavaScript에서 이 포인터에 대한 관련 지식을 제공합니다. this 키워드는 모든 사람에게 도움이 되기를 바랍니다.
1. context와 this의 관계
context를 이해하면 thisthis的指向问题
this的指向可以看成就是当前的上下文
2. 一般函数
先让我们通过一个例子来看看什么是函数中的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();上下文就是 obj - 直接用圆括号调用函数，上下文就是 window 对象，
this指向 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
3. 数组 / 类数组对象
数组 / 类数组对象枚举出函数进行调用，上下文是这个数组 / 类数组对象
即可以看成：
数组[下标](); 调用这个函数的上下文对象就是这个数组
让我们通过例子来理解一下：
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指向它。
4. 立即执行函数
立即执行函数（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
5. 定时器、延时器调用函数
在定时器、延时器调用函数中，上下文对象是 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의 지정 문제를 더 명확하게 이해할 수 있습니다. 코드의 요점>은 현재 컨텍스트로 볼 수 있습니다<p></p>
<h1>2. 일반 함수🎜</h1>🎜먼저 함수에서 <code>this가 무엇인지 예를 들어 보겠습니다. :🎜 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);🎜🎜 첫 번째 출력은 다음과 같습니다. 이때 함수의 문맥은 색상이므로 this는 색상을 가리킵니다🎜 두 번째 출력은 정의되지 않고 이때 괄호를 사용하여 함수가 직접 호출됩니다. 컨텍스트는 window입니다. This this가 window🎜🎜를 가리킬 때 함수의 컨텍스트, 즉 this는 🎜다음 방식에 따라 결정됨을 알 수 있습니다. 함수가 호출됩니다🎜. 🎜🎜🎜일반적인 함수 컨텍스트 상황: 🎜🎜- 객체가 호출되고 해당 메서드 함수가 호출될 때 함수 컨텍스트는 표시된 객체이고
this는 이것을 가리킵니다. object🎜obj .fun();컨텍스트는 obj입니다. - 괄호를 사용하여 직접 함수를 호출하고, 컨텍스트는 창 개체이며,
this가 가리키는 항목입니다. 창 개체
DOM元素.onclick = function() {
这里的上下文就是 DOM元素，this指向DOM元素};🎜 🎜 여기서 obj의 b는 괄호를 사용하여 직접 fun()을 호출하므로 이때 fun()의 컨텍스트는 창 객체이므로 여기의 이가 가리킵니다 to window, b = 1 + 2 = 3;🎜 obj.fun()의 fun()은 obj에 의해 호출되므로 해당 컨텍스트는 obj이므로 여기서 this는 obj를 가리키므로 res = 5 + 3 = 8🎜 3. 배열/유사 객체
🎜배열/유사 객체는 호출을 위한 함수를 열거합니다. 컨텍스트는 다음과 같이 볼 수 있는 배열/유사 객체입니다. :🎜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>🎜예제를 통해 이해해 보세요. 여기 있습니다: 🎜rrreee🎜🎜아래에 표시된 3은 인덱스 3인 객체를 배열을 통해 열거한 후 실행하는 함수이므로 해당 컨텍스트는 이 배열입니다 arr🎜🎜🎜Array-like object:🎜🎜- 배열형 객체란 무엇인가요?
length 속성을 갖는 모든 객체🎜 예: arguments 객체는 다음과 같습니다. 함수🎜rrreee🎜🎜🎜여기서 fun 함수가 호출되지만 동시에 함수에 전달된 함수, 즉 arguments[3]() 명령문이 실행됩니다. 이므로 호출을 위한 배열형 객체 열거 함수인 this[0]를 출력하므로 해당 컨텍스트는 인수이고 this 가 이를 가리킵니다. 🎜4. 즉시 실행 함수
🎜즉시 실행 함수(IIFE), 해당 컨텍스트는 창 개체이므로this는 창을 가리킵니다🎜🎜이해해 봅시다. 예를 들어보세요: 🎜rrreee🎜🎜 obj.fun()위에서 언급한 것처럼 fun()은 obj에 의해 호출되므로 여기서 this는 obj를 가리킵니다. 🎜 obj의 fun은 즉시 실행과 같습니다. 함수의 값 🎜은 🎜rrreee🎜와 동일합니다. 여기서 this는 obj를 가리키므로 this.a = 2입니다. 🎜 이 즉시 실행 함수에서 해당 컨텍스트 개체는 window이므로 this는 창을 가리키므로 a = this.a의 this는 창 개체를 가리키므로 a = 1이므로 반환 값은 a = 1입니다.🎜그래서 최종 출력은 1 + 2 = 3🎜5. 타이머 및 지연기 호출 함수
🎜 타이머 및 지연기 호출 함수에서 컨텍스트 개체는 창 개체이며 내부의this는 다음을 가리킵니다. window 객체 🎜🎜예를 통해 이해해 봅시다: 🎜rrreee🎜
🎜 여기서 setTimeout의 호출 함수는 딜레이러에서 사용하는 obj.fun입니다. 호출되면 2초 후에 실행되므로 this는 window 객체를 가리키며 7🎜🎜을 출력합니다. 이렇게 쓰면 무엇이 출력되나요? 🎜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
6. 事件处理函数
事件处理函数的上下文是绑定事件的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学习教程】
위 내용은 JavaScript의 이 포인팅 문제를 완전히 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!