this

함수별 정의 구분: this

일반(Normal) 함수는 호출 위치에 따라 this 정의

화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의

 

const happy = {
    name: 'Happy',
    normal: function() {
        console.log(this.name)
    },
    arrow: () => {
        console.log(this.name)
    }
}

happy.normal()
happy.arrow()

const amy = {
    name: 'Amy',
    //happy의 함수 자체가 할당되는 구조 (소괄호()를 입력안했기 때문에 함수를 호출하는 것이 아니다
    normal: happy.normal,
    arrow: happy.arrow
}

amy.normal()
amy.arrow()

// 생성자 함수 이용
function User (name) {
    this.name = name
}
User.prototype.normal3 = function(){
    console.log(this.name)
}
User.prototype.arrow2 = () => {
    console.log(this.name)
}
const happy2 = new User('Happy')
happy2.normal3()
happy2.arrow2()

// 타이머 함수 이용
const timer = {
    name: 'Happy',
    timeout: function() {
        // 2초뒤 함수 호출
        // 일반함수는 setTimeout내부에 어딘가에서 호출되기 때문에 undefined 가 호출된다
        // setTimeout(function() {
        //     console.log(this.name)
        // }, 2000)
        // 화살표함수는 선언된 함수 범위에서 this가 정의 되기 때문에 정상 출력
        setTimeout(() => {
            console.log(this.name)
        }, 2000)
    }
}
timer.timeout()

setTimeout 함수는 timeout이라는 일반 함수를 정의할때 사용되어지고 

timeout이라는 함수는 timer라는 객체에서 사용되어지기 때문에 this는 곧 timer가 되어 진다.

 

timeout의 일반함수를 화살표 함수로 바꾸면 undefined로 출력된다

화살표 함수를 일반함수로 감싸주어서 해당 일반함수가 호출되는 위치에 name이 선언 되어있어  this가 호출된것으로 보인다