this

자바스크립트의 this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정 된다.

 

1. 함수 호출 

전역 객체는 모든 객체의 유일한 최상위 갹체를 말한다. 

• Browser => window
• Server => global

기본적으로 this는 전역객체에 바인딩 된다. 그리고 내부함수는 일반함수, 메소드, 콜백함수 어디에서 선언되었든 this는 전역객체를 바인딩 한다.

 

// 1.내부 함수
function outer(){
	function inner(){
    	    console.log("bind: ", this) // window
    }
}

// 2.메서드의 내부함수
var obj = {
	method: function(){
    	function inner(){
        	console.log("bind: ", this) //window
        }
        inner();
    }
}

obj.method();

// 3.콜백 함수
var obj = {
	callback: function(){
    	setTimeout(function(){
        	console.log("bind: ", this);// window
        },100);
    }
};

obj.callback();

 

2. 메소드 호출

메소드 내부의 this는 해당 메소드를 호출한 객체에 바인딩 된다.

var obj = {
	title: "test"
    write: fucntion() {
    	console.log(this.name):
    }
}

obj.write() // "test"

프로토 타입 객체도 메소드를 가질수 있다. 

function Movie(title){
	this.title = title;
}

Movie.prototype.getTitle = function() {
	return this.title
}

var monster = new Movie("monster");
console.log(monster.getTitle()); // "monster"

 

3.생성자 함수 호출

생성자 함수는 말그대로객체를 생성하는 역활을 한다. 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

function Movie(title){
	this.title = title;
}

var monster = new Movie("monster");
console.log(monster.title); // "monster"