this

this

• this의 값은 함수를 호출한 방법에 의해 결정

• 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있음

 

Global memory 생성

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

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

                                        자료출처 : 코드스테이츠

 

실행 컨텍스트 (excution context)

어떤 함수가 호출되면, 실행 컨텍스트 execution context가 만들어짐

• call stack에 push
• 함수를 벗어나면 call stack에서 pop

 

scope 별로 생성

 

여기에 담긴 것

• scope 내 변수 및 함수 (Local, Global)
• 전달 인자 (arguments)
• 호출된 근원 (caller)
• this

 

this 5가지 Bindng 패턴

전역	Global Reference	window
함수 호출	Free Function Invocation	window
.call or .apply 호출	.call or .apply Invocation	첫번째 인자로 명시 된 객체
생성자	Construction Mode	새로 생성된 객체
메소드 호출	Method Invocation	부모 object

                                              자료출처 : 코드스테이츠

 

Global  & Function Invocation

var name = 'Global Variable';
console.log(this.name);			// "Global Variable"

function foo() {
  console.log(this.name);		// "Global Variable"
}

foo();

 

Method Invocation

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

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

 

Construction Mode

function Security(e) {
  this.val = e;
}

// create new instance of Security
var info = new Security('Info Test');

console.log(info.val);			// Info TEST
console.log(val);			// ReferenceError

 

.call or .apply Invocation

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

add.apply(obj, [10, 20]);
console.log(obj.val);		// 30
add.call(obj, 10, 20);
console.log(obj.val);		// 30

 

사이트 참조 : MDN this

this