자바스크립트 this

📌this란?

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다.
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다.

// this는 함수가 호출될떄 결정이 된다.

const student = {
	name 'Lee',
    getNAme: function(){
    	console.log("student getName",this)
    }
}

// student.getName(); student라는 객체가 호출한것이여서 this는 student(A.b)

const globaStudent = student.getName
// scope밖에서 불러서 최상단의 윈도우 객체가 불러져 옴 (b)
globaStudent();

const student2 = {
	name:'Kim',
  	getName: student.getName
}
// this값 'Kim'
student2.getName();

예시에서도 할 수 있듯이 this는 호출될때 결정이 된다.

📌.bind 사용방법

// bind를 사용하여 호출하면 this의 값이 고정됨
cosnt bindGetname = student2.getName.bind(student);
bindGetname(); 

📌화살표 함수 사용법

// 화살표함수에서의 this는 함수가 속해있는 곳의 this를 계승받는다.
const testStudent = {
	name:'Park',
  	getName:function(){
      	// this값은 Park
    	console.log("getName",this)
      	const innerFunc = () => {
          	// 외부 스코프값을 그대로 가져옴, main값을 그대로 가져와서 사용 함 
        	console.log("innerFunc",this)
        }
      	innerFunc()
    },
};

testStudent.getName()

this는 일반 함수와 화살표 함수의 값이 다르다.
화살표 함수는 .bind함수를 제공하지 않는다.

일반함수는 함수가 호출될때 this가 결정되는데
화살표함수가 선언된 위치에서 this가 결정되고 호출하는 방법에 따라서는 변경되지 않음.

const ageTest= {
	unit: "살",
  	getList: [10, 20, 30],
  	getAgeList: function() {
    	const result = this.ageList.map((age)=> {
        	return age + this.unit;
        });
      
      console.log(result);
    },
};

ageTest.getAgeList();

this를 사용하고싶다면 일반함수를 사용하는게 .bind를 이용하여 예측하는게 쉽고
함수안에 있는 함수를 사용할 경우는 화살표함수로 그대로 받아지게 사용하는게 용이하다.

const Test= {
	name: "시작",
  	main: function() {
      //내부적인 상황에 따라 바꿔버리는 일반 함수 
    	//setTimeout(function() {
      setTimeout(() => {
          console.log(this);
        }, 1000);
    },
};

ageTest.getAgeList();

this를 변경

call과 apply는 JavaScript에서 함수를 호출하는 데 사용되는 메서드입니다. 이 두 메서드를 사용하여 함수를 호출할 때 this의 값을 명시적으로 설정할 수 있습니다. 이는 함수의 컨텍스트를 변경하거나 원하는 객체를 this로 지정할 수 있도록 해줍니다.

call

함수를 호출하면서 첫 번째 매개변수로 전달된 객체를 해당 함수의 this로 설정합니다. 그리고 함수를 호출합니다. 이후 매개변수를 직접 받습니다.

apply

call과 비슷하지만 매개변수를 배열 형태로 받습니다. 배열의 각 요소가 함수의 매개변수로 전달됩니다.