js 함수내부에서의 this 바인딩

자바스크립트에서는 상황에 따라 this 객체에 바인딩되는 값이 다름

 

1.화살표함수는 자신의 상위객체에 대해 접근함
2. 메소드 호출 시 메소드 내부의 this는 해당 메소드를 보유한 객체로 바인딩된다.
3. 일반함수 호출 시 함수 내부의 this는 전역객체에 바인딩된다.
4. 생성자 함수라면 생성자 함수에서 객체를 생성 후, 해당 객체에 this가 바인딩된다.

 

여기서 메소드는 객체내부에 일부로서 함수의 프로퍼티,값 쌍이 존재할 때

그 함수를 메소드라 부름

---

1번 예시

this.a = 5;
const eee = () => {
    console.log(this.a) // 화살표함수는 상위 객체인 전역객체를 this에 바인딩함.
}
eee(); // 5

 

2번 예시

const bbb = {
    name:'bbb',
    func:function(){return this.name;}
}
console.log(bbb.func()) // bbb

 

3번 예시

this.a = 5;
const ccc = function() {
    console.log(this.a)
}
ccc() // 5

 

4번 예시

function Human(name){
    this.name=name;
}
let human1 = new Human('john');
this.name = '555';
console.log(human1) // Human {name:'john'}

---

예시 +1

const fff = {
    name:'fff',
    func:function() {
        console.log(this.name); //fff
        const func2 = function() {
            console.log(this.name); //undefined
        }
        func2();
    }
}
fff.func();
// fff객체의 func프로퍼티는 메서드라서 처음 console.log는 'fff'가 반환되지만,
// func안의 func2함수는 메서드가 아닌 일반함수라서 전역 객체가 바인딩된다.

 

예시 +2

const ggg = {
    name:'ggg',
    func: {
        name: 'func',
        func2: function() {
            console.log(this.name)
        }
    }
}
ggg.func.func2(); 
//func2는 메서드 이므로 상위 객체인 func가 this에 바인딩되며, func의 name을 호출한다.

 

예시 +3

const hhh = function() {
    this.name = 'hhh';
    const func1 = function() {
        console.log(this.name); //'hhh;
        func2()
    }
    const func2 = () => {
        console.log(this.name);//'hhh';
    }
    func1()
    func2()
}
hhh(); //모두 전역객체를 참조함