[FE/JavaScript]this

like this yo like this

Q.this가 뭔가요?

this는 자기참조변수

자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)

😲q**.왜 사용하는데?**

• 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 한다.
• 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하기 때문!

+)this의 특징

• this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능!
• 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달
• this가 가리키는 값, 즉 this binding은 함수 호출 방식에 의해 동적으로 결정 (클래스기반의 언어(C++,JAVA의 경우 this는 언제나 클래스가 생성하는 인스턴스를 가리킴)
• 또한, strict mode(엄격모드) this binding에 영향을 준다!

this는 코드 어디에서든 참조 가능(전역에서도, 함수 내부에서도 참조)

//this는 어디서든지 참조 가능
//전역에서 this는 전역 객체인 window를 가리킴

console.log(this) //window

function square(number){
//일반 함수 내부에서 this는 전역 객체 window를 가리킴
	console.log(this) //window
	return number*number
}

square(2)

const person={
	name:'yu',
	getName(){
	//메서드 내부에서 this는 메서드를 호출한 객체를 가리킴!
		console.log(this) // {name:'yu',getName:f}
		return this.name
	}
}

console.log(person.getName())//yu

function Person(name){
	this.name = name
	//생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다!
	console.log(this)//Person{name:'yu'}
}
const me = new Person('yu')

🚨this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있음!

• 따라서, strict mode가 적용된 일반 함수 내부의 this는 undefined가 바인딩+) strict modehttps://beomy.tistory.com/13
• strict mode는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킴!
• (일반 함수 내부에서 this를 사용할 필요가 없기 때문)

<aside> 💡 ✏summary

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다! </aside>

Q.this 바인딩이란?

바인딩이란?

바인딩이란 식별자와 값을 연결하는 과정!

ex) 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것

<aside> 💡 그렇다면 this 바인딩은?

this(키워드로 분류되지만 식별자 역할을 함!)와 this가 가리킬 객체를 바인딩 하는 것

</aside>

Q.this는 동적으로 바인딩 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?

<summary>

<aside> 💡 this 바인딩(this에 바인딩 될 값)은 함수 호출 방식,

즉 함수가 어떻게 호출 되었는지에 따라 동적으로 결정

</aside>

함수 호출 방식 this 바인딩

일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 (미래에) 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫번째 인수로 전달한 객체

<code>

//this binding은 함수 호출 방식에 따라 동적으로 결정

const foo = function(){
	console.dir(this)
}

//동일한 함수도 다양한 방식으로 호출
//1. 일반 함수 호출
//foo 함수를 일반적인 방식으로 호출
//foo 함수 내부의 this -> 전역 객체 window를 가리킴

foo() //window

//2.메서드 호출
//foo 함수를 프로퍼티 값으로 할당하여 호출
//foo 함수 내부의 this는 메서드를 호출한 객체 obj를 가리킴
const obj ={foo}
obj.foo() //obj

//3.생성자 함수 호출
//foo 함수를 new 연산자와 함께 생성자 함수로 호출
//foo 함수 내부의 this는 생성자 함수가 생성한 인스턴스를 가리킴
new foo() // foo

//4.Function.prototype.apply/call/bind 메서드에 의한 간접 호출
//foo 함수 내부의 this는 인수에 의해 결정

const bar = {name:'bar'}
foo.call(bar) //bar
foo.apply(bar) //bar
foo.bind(bar) //bar

---

😎더 보 기

---

this binding을 더 알고 싶다면 다음을 참고하세요!

1.일반 함수 호출

---

• 기본적으로 this에는 전역 객체가 binding
• 어떠한 함수라도 일반 함수로 호출되면 this에 전역 객체가 binding

function foo(){
	console.log("foo's this: ",this) //window
	function bar(){
		console.log("bar's this: ",this) //window
	}
	bar()
}
foo()

• 전역 함수는 물론이고 중첩 함수를 일반 함수로 호출시 함수 내부의 this에는 전역 객체가 binding

  function foo(){
  	'use strict'
  	
  	**console.log("foo's this**:", this) //undefined
  	function bar(){
  		console.log("bar's this:", this)//undefined
  	}
  	bar()
  }
  foo()
  

• +) strict mode 가 적용된 일반 함수 내부의 this는 undefined가 binding
• +)콜백 함수가 일반 함수로 호출된다면?⇒콜백 함수의 this가 전역 객체를 바인딩하는 것은 문제가 있기 때문에, 다음과 같은 방법으로 콜백 함수의 this 바인딩을 메서드의 this 바인딩과 일치 시킴
• var value = 1 const obj = { value:100, foo(){ //this 바인딩(obj)을 변수 that에 할당 const that = this //콜백 함수 내부에서 this 대신 that을 참조 setTimeout(function(){ console.log(that.value) //100 },100) } } obj.foo() //⇒이 방법 외에 JS는 this를 명시적으로 바인딩 할 수 있는 //`Function.prototype.apply`,`Function.prototype.call`, //`Function.prototype.bind`메서드를 제공
• ⇒ 콜백 함수 내부의 this에도 전역 객체가 바인딩!

2. 메서드 호출

---

• 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩
• 🚨메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩됨!

2.1 메서드 내부의 this

const person = {
	name:'Lee',
	getName(){
	//메서드 내부의 this -> 메서드를 호출한 객체에 binding
		return this.name //this는 person이 되게 됨!
	}
}

//메서드 getName을 호출한 객체 : person
console.log(person.getName()) //Lee

--------------------------------------------
const anotherPerson(){
	name:'Kim',
}
//getName 메서드를 anotherPerson 객체의 메서드로 할당!
anotherPerson.getName = person.getName
//getName 메서드를 호출한 객체는 anotherPerson
console.log(anotherPerson.getName()) //Kim

//getName 메서드를 변수에 할당
const getName = person.getName
//getName 메서드를 일반 함수로 호출!
console.log(getName()) //''

/*왜 ''이 출력되나?
일반 함수로 호출된 getName 함수 내부의 this.name은 브라우저 환경에서 window.name과 같음
따라서, 브라우저 환경에서의 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티
---->기본값은 ''이다!
*/

//node.js 환경에서 this.name === undefined

2.2 프로토타입 메서드와 this

function Person(name){
	this.name = name
}

Person.prototype.getName = function(){
	return this.name
}

const me = new Person('Lee')

//getName 메서드를 호출한 객체 : me
console.log(me.getName()) //Lee

Person.prototype.name = 'Kim'
//getName 메서드를 호출한 객체는 Person.prototype
cosole.log(Person.prototype.getName) //'Kim'

즉, this에 바인딩 될 객체는 호출 시점에 결정된다!

3. 생성자 함수 호출

---

• 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩

//생성자 함수
function Circle(radius){
	//생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴
	this.radius = radius
	this.getDiameter = function(){
		return 2*this.radius
	}
}

//반지름이 5인 Circle 객체 생성
const circle1 = new Circle(5)
//반지름이 10인 Circle 객체 생성
const circle2 = new Circle(10)

console.log(circle1.getDiameter())    //10
console.log(circle2.getDiameter())    //20

------------------------------------
//new 연산자와 함께 호출하지 않으면 생성자 함수로 동작 x =>즉, 일반적인 함수의 호출
const circle3 = Circle(15)
//일반 함수로 호출된 Circle에는 반환문이 없음! 암묵적으로 undefined 반환
console.log(circle3)      //undefined
//일반 함수로 호출된 Circle 내부의 this는 전역 객체를 가리킴!
console.log(radius)      //15

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

---

• apply, call, bind메서드는 Function.prototype 메서드
• 이 메서드들은 모든 함수가 상속 받아 사용 가능

<apply,call>

• apply 메서드와 call 메서드의 본질적인 기능
  • 함수를 호출하는 것
• apply와 call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩

function getThisBinding(){
	return this
}

//this로 사용할 객체
const thisArg = {a:1}
console.log(getThisBinding()) //window

//getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this 바인딩
console.log(getThisBinding.apply(thisArg)) //{a:1}
console.log(getThisBinding.call(thisArg)) //{a:1}

<bind>

• apply와 call 메서드와 달리 함수를 호출하지 않음
• 다만, 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환

function getThisBinding(){
	return this
}
// this로 사용할 객체
const thisArg = {a:1}

//bind 메서드는 첫 번째 인수로 전달한 thisArg로 this 바인딩이 교체된
//getThisBinding 함수를 새롭게 생성해 반환
console.log(getThisBinding.bind(thisArg)) //getThisBinding
//bind메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다
console.log(getThisBinding.bind(thisArg()) //{a:1}