js this

JS에서 this는 자신이 속한 객체, 또는 생성할 인스턴스를 가리키는 자기참조변수다.
자신이 속한 객체 또는 인스턴스를 참조하면서 프로퍼티나 메서드를 참조할 수 있다.

this 바인딩은 함수 호출 방식에의해 동적으로 결정된다.
또한 this는 코드 어디서든 참조 가능하다.

*strict mode가 적용된 일반함수에서는 undefiend를 가리킨다.

일반함수에서 this는 Window를 가리킨다.

console.log(this) // Window

function test(){
	console.log(this)
}

test() // 일반함수에서 this는 Window

 

 

메서드 내에서 this는 자신을 호출한 객체를 가리킨다

const user = {
	getThis(){
		console.log(this);
	}
}

const userWrap = {user}

user.getThis(); // {name:'rumi', getThis:f}  user 객체를 가리킴
userWrap.user.getThis(); // {name:'rumi', getThis:f}  user 객체를 가리킴

 

생성자 함수에서 this는 생성자 인스턴스를 가리킨다

function User(name){
	this.name = name
	console.log(this); // User {name:'rumi'}
}

const user = new User('rumi')

 

함수는 다양한 방식으로 호출될수있고, 호출시점에 따라 this가 바인딩된다

function test(){
	console.log(this) 
}

test(); // Window;

const obj = { test };

obj.test() // {test:f}

 

apply/call/bind 에 의해 간접호출 될 때, 인수에 바인딩된다.

function test(){
	console.log(this) 
}

const bindTest = {desc:'this is bind test...'}

test.call(bindTest) // {desc:'this is bind test...'}
test.apply(bindTest) // {desc:'this is bind test...'}
test.bind(bindTest) // f test(){console.log(this)}
test.bind(bindTest)(); // {desc:'this is bind test...'}

 

메서드를 호출한 객체에 바인딩된다.

var value = 1;
  function bar(){
        console.log("bar this::",this);
        console.log("bar this.value",this.value);
    }
const test = {bar}
const obj = {
    value :100,
    foo(){
        console.log("foo this::", this);
        console.log("foo this.value::", this.value);
    
    test.bar();
    }
};

obj.foo(); 

// foo의 this는 obj객체에서 호출했으므로 obj를 가리키고
// bar의 this는 test객체에서 호출했으므로 test를 가리킨다 * test에는 value가 없으므로 undefiend

 

화살표함수 내부 this는 상위스코프에 바인딩된다.

var value = 1;

const obj = {
    value:100,
    foo(){
        setTimeout(()=> console.log(this.value), 1000);
    }
    
}
obj.foo(); // 1초후 100 출력

 

1. 명시적으로 this를 바인딩했는가?
2. 화살표 함수 내에서 this가 선언되었는가?
3. 객체로 호출되었는가?
4. 일반함수로 호출되었는가?