this

1.

console.log(this)

function 함수() {
	console.log(this)
}

함수();


// strict mode + 일반 함수 내에서 쓰면 undefined 가 뜹니다.

window : {
	함수() {
    	console.log()
    }
}

window

기본 함수들 수납 공간

global object : 전역 변수 보관소

모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체

 

 

 

2. 

let examp = {
	data : 'kim',
    	hello : function () {
    		console.log(this)
    	}
}

examp.data;

examp.hello();
//함수인 걸 명시해주기 위해서 소괄호를 포함합니다.
//{data: 'kim', hello: f}

오브젝트 내 함수 안(method)에서 쓰면, 이 함수를 가지고 있는 오브젝트를 뜻함 (여기서는 object examp 을 뜻합니다)

this를 포함하고 있는 오브젝트

 

let examp = {
	data : {
    	example : function () {
        	console.log(this)
        }
    }
}


examp.data.example();
// {example: f}

 

TIP. arrow fun 을 쓰면 this를 만들어주지 않음. 상위의 this 값을 물려 받는다.

let examp = {
	data : {
    	example :  () => {
        	console.log(this)
        }
    }
}


examp.data.example();
// window {...}

let examObj = {
  names : ['김', '이', '박'],
  examFuc : function(){
  	console.log(this); // {names: Array(3), examFuc: f}
    
      examObj.names.forEach(() => {
        console.log(this); //  {names: Array(3), examFuc: f} * 3
      });
  }
}

examObj.examFuc();

 

3.

let random = {}

function copy(){  // constructor 오브젝트 생성 기계
  this.name = 'Kim';
}

let newObejct = new copy();
// newObject : copy {name: 'Kim'}

함수(copy)로부터 새로 생성되는 object.

instance: 함수 안에서 this를 쓰면 새로 생성되는 오브젝트

 

 

4. 

document.getElementById('btn').addEventListener('click', function(e){
	this; //e.currentTarget, 해당 html button 태그가 나온다.

  var examArr = [1,2,3];
  examArr.forEach(function(){
    console.log(this)
    // window * 3, 일반 함수 내에서 this가 쓰임 
  });
});

eventListener 안에서의 e.currentTarget, 지금 이벤트가 동작하는 곳

 

let examObj = {
  names : ['김', '이', '박'],
  examFuc : function(){
  	console.log(this); // {names: Array(3), examFuc: f}
    
      examObj.names.forEach(function(){
        console.log(this); // window * 3
      });
  }
}

examObj.examFuc();