binding

→ 호출한 대상에게 실제함수를 연결하는 것

var myObject = {
	name : "jitae";
	sayName : function () {
		console.log(this.name);
	}
}

var otherObject = {
	name : "영수";
}

otherObject.sayName = myObject.sayName; //객체에 추가시킨거

myObject.sayName(); //jitae -> myObject가 호출한 sayName은 myObject
otherObject.sayName(); //영수 -> otherObject가 호출한 sayName은 otherObject꺼니까!

• 올바른 객체에 올바른 메서드 묶어주기(매칭시키기)

전역 객체

• 전역을 감싸는 객체
• 코드 전체를 아우르는 객체
• 예시

//전역 객체의 메서드
console.log()
clear()

//전역 객체의 속성
전역변수

JS in browser : window 객체
JS in server side(Node.js) : global 객체

일반 함수를 호출 했을때 this는 어디로 바인딩 되는가

• 함수 → 전역객체의 메서드이다
• 전역 변수 → 전역 객체의 속성이다.

function myFunc() {
	console.log("this 값 : ", this);
}
myFunc(); //내가 정의한 myFunc 함수 실행
window.myFunc(); // 전역 객체 (window)의 메서드 myFunc 실행

//내가 정의한 myFunc = 전역 객체(window)의 메서드 myFunc
//내가 정의한 함수 = 전역 객체의 메서드

var name = "jitae"

console.log("전역변수 name : ",name);
console.log("전역객체의 속성 name : ",window.name);

//내가 정의한 변수 = 전역객체의 속성

→ 일반 함수의 호출 과정에서 this는 전역 객체를 가르킨다.

하단을 참고해보면 위의 예제 1과 2인데 사실상 window를 this로 바꾸어 보면 결론이 맞다.

function myFunc() {
	console.log("this 값 : ", this);
}
myFunc();
this.myFunc();

var name = "jitae"
console.log("전역변수 name : ",name);
console.log("전역객체의 속성 name : ",this.name);

var name = "jitae";
console.log(window.name);

var sayHello = function(){
	var name="kangminchul";
	console.log(this.name);
}

sayHello();

//출력값
jitae
jitae

일반 함수의 호출 과정에서 this는 전역 객체를 가르킨다. =일반 함수는 전역 객체의 메서드이다. =전역 변수는 전역 객체의 속성이다.

객체를 호출했을때 this는 어디로 바인딩 되는가

→ 객체의 메서드에서 사용된 this는 그 메서드를 호출한 객체로 바인딩 된다.

var myObject = {
	name : "jitae";
	sayName : function () {
		console.log(this.name);
	}
}

var otherObject = {
	name : "영수";
}

otherObject.sayName = myObject.sayName;
//전자는 myObject가 호출해줬고 후자는 otherObject가 호출을 해줬음

myObject.sayName();
otherObject.sayName(); 

생성자 함수를 호출했을 때 this는 어디로 바인딩 되는가

→ 생성자 함수에서의 this는 그 생성자 함수를 통해 생성되어 반환되는 객체에 바인딩

//Person 생성자 함수
var Person = function(name) {
	this.name = name;
}

//boy 객체 생성
var boy = new Person('민철');
console.log(boy.name); //민철

//girl 객체 생성
var girl = new Person('영희');
console.log(girl.name); //영희

생성자 함수 this vs 일반 함수 this

→ new로 새로운 객체를 만들면 생성자 함수

→ new 없이 그냥 호출되어 쓰이면 일반 함수

function ComputerClass(name,professor,classno){
		this.name = name;
		this.professor = professor;
		this.classno = classno;
		this.printInfo = function () {
			console.log(`${this.name} 강의 ${this.classno} 분반입니다. 교수님은 ${this.professor}입니다.`);
		}
}

//new를 사용하여 객체를 만드는 생성자 함수
var class1 = new ComputerClass('운영체제','이동희',2);
var class2 = new ComputerClass('데이터베이스','홍의겸',1);

//new를 사용하지 않는 일반 함수
var class3 = ComputerClass('컴퓨터조직','지태',3);
var class4 = ComputerClass('알고리즘','도훈',4);

→ new 없이 ComputerClass를 실행하면 ComputerClass는 일반함수로서 실행 this는 전역객체에 바인딩됨

→ 내부함수에서의 this는 무조건 전역 객체에 바인딩 된다.

function myFunction() {
	console.log("myFunction's this: ",this); //window에 바인딩
	function innerFunction(){
		console.log("innerFunction's this: ",this); //window에 바인딩
	}
	innerFunction();
}
myFunction();

//출력물
//myFunction's this:  constructor {0: Window, window: constructor, self: constructor, document: document, name: '알고리즘', location: Location, …}
//innerFunction's this:  constructor {0: Window, window: constructor, self: constructor, document: document, name: '알고리즘', location: Location, …}

• 일반 함수의 내부함수 innerFunction의 this는 전역객체에 바인딩

  var value = 1;
  
  var obj = {
  	value:100,
  	objmethod: function() {
  		
  		console.log("objmethod's this: " ,this); //obj에 바인딩됨
  		console.log("objmethod's this.value: ", this.value); //obj의 속성 100
  		//출력물
  		//objmethod's this : {value: 100, objmethod: ƒ}...
  		//objmethod's this.value = 100
  		//바로 위 객체에 바인딩됨
  
  		function innermethod() {
  			console.log("innermethod's this: ", this); //window에 바인딩됨
  			console.log("innermethod's this.value: ",this.value); //전역변수 value : 1
  		}
  		innermethod();
  		//출력물
  		//innermethod's this: Window {0: Window, window: Window, self: Window, document: document, name: '알고리즘', location: Location, …}
  		//innermethod's this.value : 1
  		//내부함수이므로 전역객체인 window에 바인딩 된것을 알 수 있음
  	}
  };
  
  obj.objmethod();
  

• 내부함수의 this

function constructor() {
	console.log("constructor's this: ", this);
	function innerFunction() {
		console.log("innerFunction's this: " , this); //window에 바인딩됨
	}
	innerFunction();
}
constructor();

myobj = new constructor();

//결과값
//constructor's this:  constructor {0: Window, window: constructor, self: constructor, document: document, name: '알고리즘', location: Location, …}
//innerFunction's this:  constructor {0: Window, window: constructor, self: constructor, document: document, name: '알고리즘', location: Location, …}
//constructor's this:  constructor {}
//innerFunction's this:  constructor {0: Window, window: constructor, self: constructor, document: document, name: '알고리즘', location: Location, …}