자바스크립트 this -5

2018-03-17

전역공간 / Window / Global

브라우저 콘솔에서 this는 Window

node.js에서 server 정보와 프로세스 정보

함수 내부에서 / Window / Global

함수내부에서의 this는 기본적으로 전역객체를 가르킴.

즉, 디폴트 값은 전역객체이고 바뀔 수 있다.

메소드 호출시 / 메소드 호출 주체

var a = {
    b: function(){
        console.log(this)
    }
}
a.b(); 
// Object {b:function}
// a 객체를 가리킴

var a = {
    b: {
        c: function(){
            console.log(this);
        }
    }
}
a.b.c();
// Object {c:function}
// c앞의 a.b까지 가리킴

// 메소드명 바로앞까지의 .까지가 this

함수는(전역객체의) 메소드다! (생각만)

var a = 10;
var obj = {
    a: 20,
    b: function(){
        console.log(this.a); // 20

        function c(){
            console.log(this.a); // 10
        }
        c();
    }
}
obj.b();

// b 메소드
// c 함수
// c도 20이 나오게하려면 스코프체인 이용한 우회

var a = 10;
var obj = {
    a: 20,
    b: function() {
        var self = this;
        console.log(this.a); // 20
        
        function c(){
            console.log(self.a); // 20
        }
        c();
    }
}
obj.b();

콜백에서 / 기본적으로는 함수내부에서와 동일

call, apply, bind 메소드

function a(x, y, z) {
    console.log(this, x,y,z);
}
var b = {
    c: 'eee'
};
a.call(b, 1, 2, 3); 
// func.call(thisArg[, arg1[, arg2[, ...]]])
a.apply(b, [1, 2, 3]);
// func.apply(thisArg, [argsArray])

var c = a.bind(b);
// func.bind(thisArg[, arg1[, arg2[, ...]]])
c(1, 2, 3);

var d = a.bind(b, 1, 2);
d(3);

call과 apply는 즉시호출

bind는 새로운 함수 생성(currying) 호출은 안함

var callback = function(){
    console.dir(this);
};
var obj = {
    a: 1,
    b: function(cb) {
        cb(); // Window
        cb.call(this); // Object
    }
};
obj.b(callback);

var callback = function)_{
    console.dir(this);
};
var obj = {
    a: 1
};
setTimeout(callback, 100); //Window
setTimeout(callback.bind(obj), 100); // Object
정리
  1. 기본적으로 함수의 this와 같다.
  2. 제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다
  3. 개발자가 this를 바인딩한 채로 callback을 넘기면 그에 따른다.

생성자함수에서 / 인스턴스

function Person(n, a){
    this.name = n;
    this.age = a;
}
var gomugom = new Person('고무곰', 30);
console.log(gomugo);