본문 바로가기
웹/javascript

setTimeout 과 this

by java개발자 2018. 5. 19.
    function fn1(){
        console.log("this is window: " + this);
    }
    var obj2 = {
        name : "obj2Name"
        , age : 21
        , fn2 : function(){
            console.log("this is obj2: " + this);
        }
        , fn3 : function(){
            this.age = this.age + 2;
            console.log("this is 5 " + this);
            console.log("obj2.age 5==" + obj2.age);
        }
        , fn4 : function(){
            // 정상
            console.log("this is obj2: " + this);
            this.age = this.age + 1;
            console.log("obj2.age==" + obj2.age);   // 22

            // 원하는 대로 되지 않음.
            // setTimeout(function(){
            //     console.log("this is window2: " + this);    // 여기서 this는 window 객체다. 왜????   -- this를 obj2로 할 수 없나?
            //     this.age = this.age + 1;
            //     console.log("obj2.age==" + obj2.age);   // 변하지 않는다.
            // }, 1000);

            // 에러
            // window.setTimeout.call(this, this.fn3, 1000);
            // --> 에러 : Uncaught TypeError: Illegal invocation

            // 정상
            // setTimeout(function(){
            //     obj2.fn3();          // obj2를 직접 명시하는 것은 별로다...
            // }, 1000);

            // 에러
            // var st = setTimeout.bind(this);
            // st(this.fn3, 1000);
            // --> 에러 : Uncaught TypeError: Illegal invocation

            // 정상
            // var this2 = this;           // this를 임시 보관. 불필요한 변수 생성-_-;;
            // setTimeout(function(){
            //     this2.fn3();
            // }, 1000);          

            // 비정상
            // setTimeout(this.fn3, 1000);     // 여기 this는 obj2이지만, fn3 함수 내의 this가 window 객체가 된다-_-;

            // 성공
            // 출처: https://coderwall.com/p/65073w/using-this-in-scope-based-settimeout-setinterval
            // >> setTimeout에 this를 bind하는게 아니라, fn3에 bind하는 거구나...
            setTimeout(this.fn3.bind(this), 1000);      // this 2개 모두 obj2
        }

    }
    // this 표시
    fn1();
    obj2.fn2();
    obj2.fn4();
    
    // 외부에서 실행하면 정상
    // setTimeout(function(){
    //     obj2.age = obj2.age + 1;
    //     console.log("obj2.age==" + obj2.age);   // 22가 된다.(정상)
    // }, 1000);

    // obj2.fn3();
    // console.log("obj2.age==" + obj2.age);   // 24가 된다.(정상)

' > javascript' 카테고리의 다른 글

NaN !== NaN  (0) 2018.05.22
typeof, instanceof  (0) 2018.05.20
css  (0) 2018.05.02
Browsersync, VSCode, Brackets  (0) 2018.05.01
svg to png  (0) 2017.11.15