[JavaScript] this 문제

자바스크립트의 this는 항상 전역(window) 객체를 가르킨다

- 일반함수, 내부함수, 콜백함수 ...

- var 붙지 않은 모든 객체( 객체 리터럴 내에서 사용시에도)

//=================================

< 예외 경우 >

* 예외1: 객체내의 this

- 리터럴 객체, 생성자 함수의 메소드

- 그러나 여기서도 예외

객체 메소드의 내부함수

콜백함수

this 가 붙지 않은 변수는 전역에 바인딩(내부 선언되지 않은 경우)

//=================

        var val1 = 1;

        //객체 리터럴

        var obj1 = {

            val1: 101,

            // this 붙지 않은 val1 은 모두 전역개체

            func1: function () {

                console.log("func1 = ", val1, this.val1); // 1, 101  <=== this=자신

                //내부 함수

                var func2 = function () {

                    console.log("func2 = ", val1, this.val1); // 1 , 1 <= 모두 전역(window)

                }

                func2();

            }

        };

        //생성자 함수(Constructor)

        function Obj2() {

            this.val1 = 201;

            // this 붙지 않은 val1 은 모두 전역개체

            this.func3 = function () {

                console.log("func3 = ", val1, this.val1); //1, 201 <=== this=자신

                func4();

            }

            var func4 = function () {

                console.log("func4 = ", val1, this.val1); // 1, 1 <= 모두 전역(window)

            }

        }

        obj1.func1();        

var obj21 = new Obj2();        obj21.func3();

//========================

* 예외2: apply , call, bind 호출

- 함수의 this 값을 '객체1'로 바꿈

* call(), apply() 

- 함수를 바로 호출

- 인수가 원소와 배열인 차이만 있음

함수.call(객체1, 인수들..)

함수.apply(객체1, 배열)

//======

* bind() 

- 설정된 함수를 반환, 호출은 안함

- 주로 callback 함수에서 많이 쓰임

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

//==================

(예제)

        var val1 = 1,  a = "a0",   b = "b0";

        var obj1 = {

            val1: 101,  a: "a1",   b: "b1",

            func1: function () {

                console.log("func1=", val1, this.val1); // 1 , 101

                console.log("func1-2=", a, b, this.a, this.b); // a0 b0 a1 b1

            }

        };

        //obj1.func1(); // 1   , 101

        //

        function func2(a1, b1) {

            var val1 = 201;

            var a = a1;

            var b = b1;

            console.log("func2=", val1, this.val1);

            console.log("func2-2=", a, b, this.a, this.b);

        }

        //func2("a2", "b2"); // 201 , 1 //a2 b2 a0 b0

        //a2 b2 a0 b0

        func2.call(null, "call-a", "call-b"); // 201 , 101  <== obj1의 값으로 변경됨

        //call-a call-b a1 b1

        //apply()는 call()과 동일하고 인자를 배열로 받음

        func2.apply(obj1, ["apply-a", "apply-b"]); //func1= 201 101

        //func1= apply-a apply-b a1 b1

        //bind() 설정값을 반환만 한다.

        var func3 = func2.bind(obj1, "bind-a", "bind-b"); //설정만        

        func3();//201 101   //bind-a bind-b a1 b1

//========

참고

https://poiemaweb.com/js-this

https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd