[JS] this

코드가 실행될 때 Js 엔진은 어떤식으로 작동하는가?

var num = 2;
funciton pow(num){
	return num*num;
}

메모리 상에는 아래와 같이 저장된다.

variable name	value
num	2
pow	function pow(num){ ... }

- Global memory 생성
- Global execution context 생성 (전형 실행 context형셩 - 위표와같음)

---

function을call할때는 어떻게될까?

- Local memory 생성 : lexical scope에 의존
- Local execution Context생성.
(실행 시, 즉 call될때 생성됨)

예시

function a() {
	let youAreIn = 'A Scope';
    b();
}

function b() {
	let youAreIn = 'B Scope';
    c();
}

function c() {
	let youAreIn = 'C Scope';
    debugger;
}

a();

//이와 같은 상황일 때 실행context는 몇개일까?
// - A, B, C, Global로 4개의 실행 context(메모리 테이블이)가 생길것이다.

  실행 Context는 함수단위로 생성됨. Block단위로 생성되지 않음

 

---

Execution context

- 어떠한 함수가 호출되면, 실행 컨텍스트 execution context가 만들어진다.
  - Call Stack 에 push, 함수를 벗어나면 Call Stack 에서 pop
-   (Function) scope 별로 생성
- 여기에 담긴 것
  -  scope 내 변수 및 함수(Local, Global)
  -  전달 인자(arguments)
  -  호출된 근원 (caller)
  -  this

---

'this' keyword

-   모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자
-    execution context의 구성 요소 중 하나로, 함수가 실행되는 동안 이용 할 수 있다.

 

'this'의 5가지 패턴

1.   Global : window
2.  Function 호출 : window - (function 단계에서 부모가 window 이기때문에 window가 호출되는것)
3.   Method 호출 : 부모 object
4.   Construction mode ( new 연산자로 생성된 function 영역의 this) : 새로 생성된 객체
5.   .call or .apply 호출 : call, apply의 첫번째 인자로 명시된 객체

 

---

 

1, 2번 예시

var name = 'Gloval Variable';
	console.log(this.name); //1. 'Gloval Variable'

function foo(){
	console.log(this.name); //2. 'Gloval Variable'
	console.log(this = window); // true
}

foo();


function outer(){
	function inner(){
    	console.log(this.name); // 'Gloval Variable
        console.log(this = window); // true
		//함수가 여러번 겹쳐있어도, this 는 window다!
    }
    inner();
}

outer();

 

 

---

 

3. funciton 호출과 Method호출의 차이점?

//객체에 담긴 함수가 Method이다

//Method 호출 예시
let obj = {
	foo : function(){ console.log(this); }
}

obj.foo();

// 실행결과 : {foo : f}

var counter = {
	val : 0,
    increment : function(){
    	this.val += 1;
    }
};

counter.increment();
console.log(counter.val); //1
counter['increment']();
console.log(counter.val); //2

// 여기서 비추어봤을 때 this는 counter obj 이다!

let obj2 ={
	hello : {
    	fn : function(){ console.log(this); }
    }
}

obj.hello.fn();

// 실행결과 : { fn : f() }
// 본인의 (직계)부모만 호출함!

 

문제

//아래 코드의 실행 결과는???

var obj ={
	fn: function(a,b){
    	return this;
    }
};

var obj2 = {
	method : obj.fn
};

console.log( obj2.method() === obj2 );
console.log( obj.fn() === obj );


// true, true !

// this 는 실행되는 시점에서의 부모가 누군지가 중요하다.
// 따라서 obj2.method()에서의 실행 시점은 obj2 이기때문에 obj2 가 return 되고,
// obj.fn()의 경우 실행 시점이 obj 이기때문에 obj 가 return 된다.

 

 

---

 

4. Construction mode - 생성자에서 this, Java에서의 this 와 동일한 것.

function Car(brand, name, color){
	// 이 예제에서 this 는 avante
	this.brand = brand;
    this.name = name;
    this.color = color;
}

// prototype 객체 : 속성, 메소드 등을 정의 할 수 있듬!
Car.prototype.drive = function(){
	console.log(this.name + '가 운전을 시작합니다.');
}

//avante <- instance
let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); // 'avante가 운전을 시작합니다.'

 

 

---

 

5.   .call or .apply 호출 : call, apply의 첫번째 인자로 명시된 객체

foo(); // function invocation
window.foo(); // method invocation
new foo(); //construction mode

foo.call(); // --?
foo.apply(); // --?

 

funciton bar(){
	console.log(this);
}

var obj = { hello : 'world'}

bar.call(obj);

// {hello : "world"}

// this 는 명시적으로 넘겨줄때!

bar.call(undefined);//window
bar.call(null);//window

function identify(){
	return this.name.toUpperCase();
}

function speak() {
	var greeting = "Hello, i'm " + identify.call(this);
    console.log(greeting);
}

var me = {name : "Kyle"};
var you = { name : "Reader"};

indentify.call( me ); // KYLE
identify.call( you);// READER
speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

// apply와 call 의 차이점

var add = function(x, y){
	this.val = x + y;
};

var obj = {
	val : 0;
};

add.apply(obj, [2, 8]);
console.log(obj.val); //10
//apply로 배열을 넘길경우 x, y는 배열로 인식하고, this는 obj로 인식함

add.call(obj, 2, 8); //call은 쉼표로 넘겨줌!
console.log(obj.val); //10

 

예제

Math.max(2,3,5,1,10,14);
//14

let arr = [10,3,5,1,23];

Math.max.apply(null, arr);
//23

 

---

연습문제

let fn = function (one, two) {
  console.log(this, one, two);
};

let r = {r:1};
let g = {g:1};
let b = {b:1};
let y = {y:1};

r.method = fn;

// (1)
r.method(g,b);

// (2)
fn(g,b);

// (3)
fn.call(r,g,b);

// (4)
r.method.call(y,g,b)

각 문제에서 this는?