this가 가리키는 몇 가지 상황

결론은 다음과 같다.정상적인 상황에서this의 지향은 함수가 어디에서 호출되는지 보아야 한다.2. 정상적인 상황에서this는 모두 이 방법을 호출하는 대상, 실례 또는 구조 함수를 가리킨다.3. 방법이 호출될 때 호출 대상(예: fn()이 없으면 기본this는 window를 가리키지만 에서undefined를 가리키지만 화살표 함수와setTimeout은 특수한 경우)를 가리킨다.4.화살표 함수는 자신의this를 만들지 않습니다. 이것은 자신의 역할 영역 체인의 상단에서this를 계승할 뿐입니다 따라서 내의this는 상급작용역의 호출 대상을 보아야 한다.5.setTimeout에서 호출된 코드는 함수와 완전히 분리된 실행 환경에서 실행됩니다. 이 코드에 포함된this 키워드는 window를 가리킵니다., 에서도 영향을 받지 않지만 와 관련되면 화살표 함수의 규칙을 따른다.6. 구조 함수this는 제2조 규칙을 만족시키는 것을 가리킨다. 방법에 새로운 변수를 부여한 후에 this는undefined를 가리킨다. 이것은class구조 함수가 , 즉 제3조 규칙을 충족시켰기 때문이다.7. 、setTimeout、 가 동시에 존재한다면 그 규칙의 중요도는 다음과 같다. 화살표 함수 > setTimeout > 엄격한 모드
상황1: 함수에서this는 window를 가리킨다.->>그러나use strict 모드에서this는undefined를 가리킨다.->>그러나use strict 모드에서 화살표 함수this는 window를 가리킨다

function app1() {
    console.log(this)
}
let app2 = function () {
    console.log(this)
}
let app3 = () => {
    console.log(this)
}

app1()
app2()
app3()

// 
Widnow
Widnow
Widnow

'use strict'
function app1() {
    console.log(this)
}
let app2 = function () {
    console.log(this)
}
let app3 = () => {
    console.log(this)
}

app1()
app2()
app3()

// 
undefined
undefined
window

상황2: 대상에서 일반 함수this는 이 대상을 가리키고 화살표 함수는 window->를 가리키며 해체한 후this는 모두 window->>를 가리키지만use strict 모드에서this는undefined->>를 가리키지만use strict 모드에서 화살표 함수this는 여전히 window를 가리킨다

let Person = {
    say: function () {
        console.log(this)
    },
    speak:() => {
        console.log(this)
    }
}
Person.say()
Person.speak()

// 
Person
Window

let { say, speak } = Person
say()
speak()

// 
Window
Window

'use strict'
let Person = {
    say: function () {
        console.log(this)
    },
    speak: () => {
        console.log(this)
    }
}

let { say, speak } = Person
say()
speak()

// 
undefined
Window

상황3: 타이머에서this는 window를 가리키며'use strict'모드에서도 마찬가지다

let Person = {
    say: function () {
        setTimeout(function () {
            console.log(this)
        })
    }
}
Person.say()

// 
Window

상황5: 타이머에서 화살표 함수를 사용하고this는 window를 가리키며'use strict'모드에서도 마찬가지입니다

let Person = {
    say: function () {
        setTimeout(() => {
            console.log(this)
        })
    }
}
Person.say()

// 
Person

상황6:class클래스에서 ->>직접 호출하고this는 이 실례를 가리킨다. ->>그러나 구조 함수 내의 정적 방법이라면this는 이 구조 함수를 가리킨다->>방법은 다시 값을 부여한 후 어떤 방법이든지this는undefined를 가리킨다

class app {
    constructor(name) {
        this.name = name
    }
    say() {
        console.log(this)
    }
}

let person = new app('bob')
person.say()
let fn = person.say;
fn()

// 
person
undefined

class app {
    constructor(name) {
        this.name = name
    }
    static say() {
        console.log(this)
    }
}

app.say()
let fn = app.say;
fn()

// 
app
undefined