[JS - 개념] this 예제, this 바인딩

자바스크립트에서 함수가 호출될 때는

기존 매개변수로 전달되는 인자 값에 대해서

arguments 객체와 this 인자가 함수 내부로 암묵적으로 전달된다.

 

일반적인 프로그래밍 언어에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다.

 

하지만 자바스크립트의 경우 Java, C++ 등과 같이 this에 바인딩되는 객체가 한가지가 아니고,

해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 결정된다.

 

따라서,

함수 실행 컨텍스트에서 this는 함수가 어떻게 호출됐는지에 집중해서 파악하면 된다.

 

 

 

함수 호출 방식과 this 바인딩

 

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.

기본적으로 다음 4가지 경우가 있다.

 

1. 일반 함수 호출시 this
2. 메소드 호출시 this
3. 명시적 바인딩(Explict Binding) - call, apply, bind
4. new 키워드

---

 

1. 일반 함수 호출시 this

 

일반 함수 실행 방식에서 this는 글로벌 객체다.

 

//일반 함수 실행 방식

function foo (){
	console.log(this); // 'this' === global 객체 (브라우저상에선 window 객체)
}

foo();

 

 

 

예외: strict mode(엄격 모드) 사용 시, this는 undefined이다.

 

'use strict'; // strict mode 사용

var name = 'Ray';
function foo() {
	console.log(this.name); // 'this' === undefined, 에러가 난다.
}

foo();

 

 

 

var age = 100;

function foo() {
    var age = 99;
    bar(); // 일반 함수로 실행
}

function bar() {
	console.log(this.age); // 'this' === window
}

foo();

 

 

 

 

---

2. 메소드 호출(혹은 Dot Notation)시 this

 

객체의 메소드를 호출할 때는 해당 메소드를 호출한 객체로 바인딩된다.

 

var age = 100;

var Ray = {
    age: 20,
    foo: function foo () {
    	console.log(this.age); // 'console.log(Ray.age)'와 같다. 결과값: 20
    }
};

Ray.foo(); //function foo를 실행

 

메소드 방식이므로, ' . ' 앞에 있는 객체, 즉, Ray라는 객체가 this로 설정된다.

Ray.foo()의 결과값은 20이 나온다.

 

 

function foo () {
	console.log(this.age);
}

var age = 100;

var Ray = {
    age: 20,
    foo: foo
};

var Lim = {
    age: 29,
    foo: foo
};

Ray.foo(); // 20
Lim.foo(); // 29

 

var age = 100;

var Ray = {
    age: 20,
    foo: function bar () {
    	console.log(this.age);
    }
};

var Lim = {
    age: 29,
    foo: Ray.foo // bar()
};

var foo = Ray.foo; // bar()

Ray.foo(); // 20
Lim.foo(); // 29
foo(); // 일반 함수 실행 방식, window 객체가 실행된다. 결과값: 100

 

 

 

---

3. 명시적 바인딩(Explict Binding) - call, apply, bind

 

 

call과 apply의 인자를 설정해서, this 값을 직접 설정해줄 수 있다.

 

var age = 100;
function foo (){
	console.log(this.age);
}

var Ray = {
	age = 20
};

var Lim = {
	age = 29
};

foo(); // 글로벌 객체(window), 결과값: 100

foo.call(Lim); // this 값을 Lim으로 설정한다. 결과값: 29
foo.apply(Ray); // this 값을 Ray로 설정한다. 결과값: 20

 

var age = 100;

function foo (a,b,c,d,e){
	console.log(this.age);
    console.log(arguments);
}

var Ray = {
    age: 20
};

foo.call(Ray, 1, 2, 3, 4, 5); 
// 첫번째 인자(Ray)가 this 값으로 설정된다. 결과값: 20
// 나머지 인자는 각각 a, b, c, d, e로 넘어간다. 결과값: 유사 배열 [1, 2, 3, 4, 5]
// call은 인자의 수가 정해져 있지 않다.

foo.apply(Ray, [1 ,2 ,3 ,4 ,5]);
// 첫번째 인자(Ray)가 this 값으로 설정된다.
// 결과값은 call과 같다.
// apply는 인자를 2개만 받기 때문에, 여러 인자를 넣으려면 배열로 묶어줘야 한다.

 

var age = 100;

function foo() {
    console.log(this.age);
}

var Ray = {
    age: 20
};

var bar = foo.bind(Ray); 
// bind()는 첫번째 인자를 this의 값으로 받지만, 해당 함수(foo)를 바로 실행시키지는 않는다.
// 대신, foo()의 this 값을 Ray로 설정한 함수를 반환한다.


bar(); // 결과값: 20

 

var age = 100;

function foo (){
    console.log(this.age);
    console.log(arguments);
}

var Ray = {
   age: 20
};

var bar = foo.bind(Ray);

bar(1, 2, 3, 4, 5);
/* 
console.log(Ray.age); // 20
console.log(arguments); // [1, 2, 3, 4, 5]
*/

 

---

4. new 키워드

 

new 키워드를 사용하면,

빈 객체가 생성되고,

해당 함수의 this 값에 할당된다.

 

function foo() {
     console.log(this);
}

new foo();

/* 
new 키워드를 사용하면,
빈 객체가 새로 생성된 후,
함수(foo)의 this 값으로 할당돼서 실행된다.
*/

 

function foo () {
	//new 사용시: 1. this = {} 빈 객체 생성

	this.name = 'Dessert';
    
    //2. Dessert를 담아줌.
    //{
    //	name: 'Dessert'
    //}
    
    //3. return this; 
    //new 키워드를 사용하면, return을 사용하지 않더라도,
    자동적으로 this에 담긴 객체가 반환된다고 생각하면 된다.
    
}

var ApplePie = new foo();

conosle.log(ApplePie);

 

function User (name, age){
     this.name = name;
	 this.age = age;
}

var Ray = new User('Ray Lee', 20);
var Lim = new User('Lim Lee', 29);

console.log(Ray); //{name: 'Ray Lee', age: 20}
console.log(Lim); //{name: 'Lim Lee', age: 29}

 

cf.

new를 사용해서 실행하는 함수를 생성자 함수(Constructor function)라고 부른다.

일반적으로 생성자 함수는 앞글자를 대문자로 표기한다.

 

 

 

 

 

 

 

 

---

자료 출처:

this | PoiemaWeb

자바스크립트, "this" 정리편