(JavaScript) this_call_apply_bind

function a() {
    console.log(this)
}
a()
// 함수 내부에서 this를 출력해도 window를 출력하고

function b() {
    function c() {
        console.log(this)
    }
    c()
}
b()
// 외부함수 b의 내부함수인 c에서 this를 호출해도 window를 출력하고

const d = {
    e: function () {
        function f() {
            console.log(this)
        }
        f()
    }
}
d.e()
// d객체 내의 메소드 e 안에있는 f함수 내부에서 this를 출력해도 window를 출력합니다. 

const a = {
    b: function() {
        console.log(this)
    }
}
a.b()
// a.b를 호출하면 b함수 내부에서 this를 호출합니다
// 결과는 a객체를 출력합니다.

const a = {
    b: {
        c: function() {
            console.log(this)
        }
    }
}
a.b.c();
// 객체 a의 b 프로퍼티가 객체이고 그안에 c메소드가 있다면 
// a.b객체를 출력합니다. 

const obj = {
    a: 20,
    b: function() {
        console.log(this.a)
        function c() {
            console.log(this.a)
        }
        c()
    }
}
obj.b() // 20 undefined

// 첫번째 this.a는 20에 접근이 가능하여 출력이 되지만
// b메소드의 내부함수 c는 this.a가 undefined 가 출력이 됩니다. 
// 이를 우회하기 위해 아래와 같이 사용할수 있습니다. 

const obj = {
    a: 20,
    b: function() {
        const that = this
        console.log(this.a)
        function c() {
            console.log(that.a)
        }
        c()
    }
}
obj.b() // 20 20

const obj = {
    str: 'Hello World'
}

function a(x, y, z) {
    console.log(this, x, y, z)
}



a.call(obj, 1, 2, 3)
//  Object {str: "Hello World"} 1 2 3


a.apply(obj, [1, 2, 3])
//  Object {str: "Hello World"} 1 2 3

const b = a.bind(obj)
b(1,2,3)
//  Object {str: "Hello World"} 1 2 3

const d = a.bind(obj, 1,2)
d(3)
//  Object {str: "Hello World"} 1 2 3

fun.call(thisArg[, arg1[, arg2[, ...]]])

fun.apply(thisArg, [argsArray])

fun.bind(thisArg[, arg1[, arg2[, ...]]])

const callback = function() {
    console.log(this)
}

const obj = {
    a: 1,
    b: function(cb) {
        cb()
    }
}
obj.b(callback)
// 당연하게도 callback함수는 함수니깐 this는 window를 가르킵니다.

const callback = function() {
    console.log(this)
}

const obj = {
    a: 1,
    b: function(cb) {
        cb.call(this)
    }
}
obj.b(callback)
// call메소드를 이용해 this를 넘겨준다면 this는 obj객체를 가르킵니다. 

document.body.innerHTML += '<button id="a">클릭하세요</button>'

document.getElementById('a')
    .addEventListener('click', function() {
        console.dir(this)
    })

const obj = { a: 1 }
document.body.innerHTML += '<button id="a">클릭하세요</button>'

document.getElementById('a')
    .addEventListener('click', function() {
        console.dir(this)
    }.bind(obj))