[JavaScript] this

this

vo.) context: 의미가 고정적이지 않고 그것을 사용하는 상황에 따라 의미가 달라질수 있다. 가변적이다

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

this는 함수 안에서 사용할 수 있는 일종의 변수이면서 그 변수안에 값은 그 함수를 어떻게 호출하느냐에 따라서 달라진다.

1. 함수호출

함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.

function func(){

    if(window === this){//"==="--> 정확하게 같은지 체크한다.

        document.write("window === this");

    }

}

func(); 

결과) 

window === this

cp.) 최상위 this

var abc = "Kim";

     window.def = " HJ";

     console.log(this.abc + "+" + this.def);

(function(){

console.log(this.abc + "+" + this.def);

})();

실행결과)

Kim+ HJ

Kim+ HJ

2. 메소드의 호출

객체의 소속인 메소드의 this는 그 객체를 가르킨다. 

var o = {

    func : function(){

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();   

결과)

o === this

이것을 통해 우리가 알 수 있는 것은 어떠한 객체안의 메소드에서 메소드를 호출하면 메소드가 소속되어 있는 객체를 this로 접근할 수 있다.

3. 생성자의 호출

아래 코드는 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이를 보여준다.

함수 안에서 this라는 키워드는 그 함수가 소속되어 있는 객체를 가리킨다.

---> 이것이 기본 원칙이다. 그 함수가 누구의 소속(객체)이냐에 따라서 this의 값은 그 객체(소속)의 값을 가리킨다.

var funcThis = null; 

 

function Func(){ 

    funcThis = this;// var이 없으므로 전역 변수인 funcThis이다.--->this는 window

}

var o1 = Func();// Func는 일반함수이다.함수안에서의 this는 window를 가리킨다.

if(funcThis === window){

    document.write('window </br>');

}

 

var o2 = new Func();//비어있는 객체를 만들고 그 비어있는 만들어진 객체가 생성자 안에 this가 된다(this는 생성된 객체를 가리킨다.). new를 통해 호출했으므로 Func는 생성자이다. -->this는 o2

if(funcThis === o2){

    document.write('o2 </br>');

}

결과)

window 

o2

생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킨다. 이것은 매우 중요한 사실이다. 

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문이다. -->undefined

function Func(){

    document.write(o);

}

var o = new Func();

결과)

undefined

cp.) 생성자 this

var Abc = function Abc(msg) {

this.abc = msg;

this.method = function () {

console.log("method+" + this.abc);

}

}

var obj1 = new Abc("Hello");

var obj2 = new Abc("World");

// Hello 표시

console.log(obj1.abc);

// method+Hello 표시

obj1.method();

// World 표시

console.log(obj2.abc);

// method+World 표시

obj2.method();

// new를 안붙였기 때문에 Abc내 this는 전역 객체임

Abc("new가없음");

console.log(window.abc == "new가없음");

// method+new가없음!

window.method();

실행결과)

Hello

method+Hello

World

method+World

true

method+new가없음

4. 어떤 것에 소속된 this

소속된 개체를 가리킵니다.

var abc = {def:"HJ"};

abc.print1 = function() {

console.log(this.def);

};

// HJ 표시

abc.print1();

var func = function() {

console.log(this.def);

};

// window.def가 참조되어 undefined

func();

abc.print2 = func;

// this가 abc로 변경되어 HJ 표시

abc.print2();

// prototype시도

var Abc = function Abc(msg) {

this.message = msg;

};

Abc.prototype.print = function() {

console.log("prototype+" + this.message);

}

var obj = new Abc("Hello");

// prototype+Hello 표시

obj.print();

실행결과)

HJ

undefined

HJ

prototype+Hello

4. apply, call

함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있다. 

cf.) 함수도 객체이다.

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;          

    }

}

func();

func.apply(o);

func.apply(p);

결과)

window

o

p

자바스크립트에서 함수는 일반적인 객체지향언어의 메소드보다 위상이 높다.(객체에 종속적이지 않다.) 

그럼에도 불구하고 함수를 어떻게 호출하느냐에 따라서 맥락적으로 함수는 어떠한 객체에 종속될 수도 있다.

this는 맥락에 따라 달라진다.

cf.) var o { }: 객체리터럴/ var o =new Object();

      var a =[1,2,3]/ var new Array(1,2,3)