환경 대상
this에 대한 흔한 오해: 함수 대상 자체를 가리키지만 사실은 그렇지 않다. 예를 들어 다음과 같다.
function foo(num){
console.log("foo:"+ num)
this.count++
}
foo.count = 0
for(var i = 0; i < 10; i++){
if(i > 5){foo(i)}
}
console.log(foo.count)//0
console.log(window.count)//NaN
운행 결과가 0인 것을 보면this가 함수 자체를 가리키는 것이 아니라는 것을 추측할 수 있다.그리고 여기서 우리는 this가 누구를 가리키는지 분석할 수 있다.우선, 호출 위치를 찾고 이어서 호출 방식을 살펴보면 여기가 일반 호출이기 때문에this는 전역 대상을 가리킨다.이로 인해count값이 전역 작용역으로 유출되었다.문제는 왜 카운트의 값이 10이 아니라 Nan입니까?정답은 카운트의 초치가 undefined이기 때문이다.
물론 우리도this가 자신을 가리키도록 강요할 수 있다.call,apply,bind 등 방법을 이용하여 이 목적을 달성할 수 있다.다음은 예를 들어 위의 이 예를 수정한다.
function foo(num){
console.log("foo:"+ num)
this.count++
}
foo.count = 0
for(var i = 0; i < 10; i++){
if(i > 5){foo.call(foo, i)}
}
console.log(foo.count)//4
**엄격한 모드를 사용한다면 일반적인 방식으로 비화살표 함수를 호출하면this는 전역 작용역에 귀속되지 않습니다. 더 정확히 말하면 어디에도 귀속되지 않습니다.**
function foo(){
"use strict"
console.log(this.a)
}
var a = 2
foo()//TypeError: this is undefined
다음 몇 가지 예를 완성하고 작은 테스트를 해보자.
function foo(){console.log(this.a)}
function doFoo(fn){fn()}//
var obj = {"a": 2, "foo": foo}
var a = "oops, global"
doFoo(obj.foo)//"oops, global"
예2:
function foo(){console.log(this.a)}
var obj = {"a": 2, "foo": foo}
var a = "oops, global"
setTimeout(obj.foo, 1000)//"oops, global"
예3:
function foo(something){this.a = something}
var obj1 = {}
var bar = foo.bind(obj1)
bar(2)// new
console.log(obj1.a)//2
var baz = new bar(3)
console.log(baz.a)//3
console.log(obj1.a)//2
예 4:
function foo(){console.log(this.a)}
var a = 2
var obj = {"a": 3, "foo": foo}
var p = {"a": 4}
obj.foo()//3
(p.foo = obj.foo)()//2
예5:
function Fun(name){this.name = name}
var Bind = Fun.bind("window")
var obj = new Bind("bighai")
console.log(obj.name)//"bighai"
console.log(window.name)//undefined
분석에 의하면 여기는 하드 귀속 함수가 구조 함수로 호출되기 때문에 환경 대상인this는 new를 가리키는 대상이다.규정이네요.
END
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
