"this" 키워드의 역할과 이를 올바르게 사용하는 방법에 대한 명확한 설명을 찾고 싶었습니다.
이상하게 행동하는 것 같은데 왜 그런지 전혀 이해가 되지 않습니다.
this어떻게 작동하며 언제 사용해야 하나요?
P粉0879514422023-10-13 14:03:41
다른 언어와 비교하여 this 关键字在 JavaScript 中的行为有所不同。在面向对象语言中，this 关键字指的是该类的当前实例。在 JavaScript 中，this 的值由函数的调用上下文 (context.function()) 및 호출 위치가 결정됩니다.
<强>1. 글로벌 맥락에서 사용될 때
글로벌 맥락에서 this 时，它会绑定到全局对象（浏览器中的window)
전역 컨텍스트에 정의된 함수 내에서 this 时，this를 사용하면 함수가 실제로 전역 컨텍스트의 메서드이기 때문에 여전히 전역 개체에 바인딩됩니다. < /p>
으아아아
위의 f1是一个全局对象的方法。因此我们也可以在 window 개체에서 다음과 같이 호출하세요.
<强>2. 객체 메서드 내에서 사용되는 경우
객체 메소드 내에서 this 关键字时，this를 사용하면 "직접" 둘러싸는 객체에 바인딩됩니다.
위에서 "즉시"라는 단어를 큰따옴표로 묶었습니다. 이는 객체가 다른 객체 내에 중첩된 경우 this가 직계 상위 객체에 바인딩된다는 것을 보여주기 위한 것입니다.
객체에 명시적으로 메서드로 함수를 추가하더라도 위의 규칙을 따릅니다. 즉, this계속 상위 객체를 가리킵니다.
<强>3. 컨텍스트 프리 함수를 호출할 때
사용됨 this 时，它会绑定到全局对象（浏览器中的window) 컨텍스트 없이(즉, 객체가 아닌) 함수 내에서 호출할 때(함수가 객체 내부에 정의된 경우에도).
모든 기능을 사용해 보세요
함수를 사용하여 위 사항을 시도해 볼 수도 있습니다. 그러나 여전히 몇 가지 차이점이 있습니다.
this를 사용하여 함수에 멤버를 추가할 수 있습니다. 그들을 지정합니다. new 연산자를 사용하여 인스턴스를 만들어야 할 수도 있습니다. 아래에서는 Object와 this를 사용하여 위에서 했던 모든 작업을 시도했지만 먼저 객체를 직접 작성하는 대신 함수를 만들었습니다.
<强>4. 생성자 내부에서 사용되는 경우 .
함수가 생성자로 사용되는 경우(즉, new 关键字调用时），函数体内的 this 키워드를 사용하여 호출되는 경우) 함수 본문의 < /p>는 생성되는 새 객체를 가리킵니다.
으아아아 <强>5. 프로토타입 체인에 정의된 함수 내에서 사용되는 경우
🎜메서드가 객체의 프로토타입 체인에 있는 경우, 메소드 내의 this는 마치 해당 객체에 메소드가 정의된 것처럼 메소드가 호출되는 객체를 참조합니다.
<强>6. 내부 호출(), 적용() 및 바인드() 함수
Function.prototype에 정의되어 있습니다. this 값을 지정할 수 있습니다. 또한 호출 시 원래 함수에 인수를 전달할 수도 있습니다. fun.apply(obj1 [, argsArray]) 将 obj1 设置为 this 内的值code>fun() 并调用 fun()，传递 argsArrayfun.apply(obj1 [, argsArray])fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - 设置 obj1 作为 fun() 内 this 的值，并调用 fun()fun()을 호출합니다. argsArray 요소를 인수로 전달합니다. < /code>
fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - 返回对函数的引用fun，其中 fun 内的 this 绑定到 obj1，并且 fun 的参数绑定到指定的参数 arg1、arg2， arg3，... - obj1 를 apply、call 和 bind 之间的区别一定已经很明显了。 apply 允许将参数指定为类似数组的对象，即具有数字 length 属性和相应的非负整数属性的对象。而 call 允许直接指定函数的参数。 apply 和 callarg1, arg2, arg3, ...
thisfun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])
fun 함수에 대한 참조를 반환합니다. 여기서 fun 🎜는 🎜obj1에 바인딩되고 🎜fun의 인수는 지정된 인수 🎜arg1, arg2, arg3,...에 바인딩됩니다. 🎜
🎜이제 🎜apply, 🎜call 및 🎜bind의 차이점이 분명해졌습니다. 🎜apply를 사용하면 인수를 배열과 같은 객체(예: 숫자 🎜length 속성과 그에 대응하는 음수가 아닌 정수 속성이 있는 객체)로 지정할 수 있습니다. 그리고 🎜call을 사용하면 함수의 매개변수를 직접 지정할 수 있습니다. 🎜apply 및 🎜call 모두 지정된 컨텍스트에서 지정된 매개변수를 사용하여 즉시 함수를 호출합니다. 반면, 바인딩은 지정된 this 값과 인수에 바인딩된 함수를 반환합니다. 이 반환된 함수에 대한 참조를 변수에 할당하여 캡처할 수 있으며, 그런 다음 언제든지 호출할 수 있습니다. 🎜
🎜
으아악
🎜🎜7. 🎜🎜🎜이벤트 핸들러 내부this 来引用相应的元素。这种直接的函数分配可以使用 addeventListener 方法或通过 onclick와 같은 기존 이벤트 등록 방법을 사용하여 수행됩니다. this와 같이 요소의 이벤트 속성을 직접 호출하면 해당 요소를 참조합니다.
this 会解析为全局对象 window
attachEvent
저는 JSFiddle을 추천합니다. 으아아아
8. <强>this ES6 화살표 함수
는 공개 변수처럼 동작합니다. 즉, 어휘 범위에서 상속됩니다. 화살표 함수를 정의하는 함수의 this 的行为类似于公共变量：它将从其词法范围继承。定义箭头函数的函数的 this 将是箭头函数的 this는 화살표 함수의
따라서 이는 다음과 동일한 동작입니다.
으아아아
아래 코드를 참조하세요: 🎜 으아아아P粉1565327062023-10-13 11:53:32
此은 실행 컨텍스트의 속성인 JavaScript의 키워드입니다. 주요 용도는 함수와 생성자입니다.
this 규칙은 매우 간단합니다(모범 사례를 따르는 경우).
this은 사양서ECMAScript 표준definitionthis을 통한 추상 작업(약어: AO) ResolveThisBinding:
전역 환경 기록, 모듈 환경 기록, 함수 환경 기록 각각에는 고유한 GetThisBinding 메서드가 있습니다.
GetThisEnvironment AO는 현재 실행 중인 실행 컨텍스트의 LexicalEnvironment를 조회하고 this< /em> 바인딩(예: HasThisBinding이 true 을 반환함)이 있는 가장 가까운 오름차순 환경 레코드를 찾습니다([[OuterEnv]] 속성을 반복하여). . 프로세스는 세 가지 환경 레코드 유형 중 하나로 끝납니다.
this 값은 일반적으로 코드가 엄격 모드인지 여부에 따라 달라집니다.
GetThisBinding의 반환 값은 현재 실행 컨텍스트의 this 值，因此每当建立新的执行上下文时，this 값을 반영하므로 새 실행 컨텍스트가 설정될 때마다
코드 샘플을 AST Explorer
에 배치하여 사양 세부정보를 따를 수 있습니다.
전역 환경 레코드의 [[GlobalThisValue]] 속성은 항상 모듈은 ECMAScript 2015에 도입되었습니다. 이것은 모듈 내부에서 직접 작동합니다. 이것은 최상위 수준에서 평가되는 스크립트 코드입니다(예: ).
this스크립트의 초기 전역 실행 컨텍스트 내에서 를 평가하면 GetThisBindingglobalThis(웹의 창를 통해 액세스할 수 있는 호스트 정의 전역 개체globalThis ( Web 上的 window，Node.js 上的 global로 설정됩니다. , Node.js 글로벌 MDN 문서). InitializeHostDefinedRealm 단계에 따라 [[GlobalThisValue]] 속성이 생성되는 방법을 알아보세요. 2. module
의 전역 실행 컨텍스트