22장 this

1. this 키워드

 

 

 

 

 

https://black7375.tistory.com/71

 

 

function Person1(){  console.log('pp ',this);  this.age=0;  setInterval(function gg(){ this.age++; console.log('this>> ',this);},2000); } const p1 = new Person1();
function Person1(){  let self = this;  console.log('pp this ',this);  console.log('pp self ',self);  self.age=0;  setInterval(function gg(){ this.age++; console.log('self>> ',self);},2000); }

 

 

 

 

바인딩?

식별자와 값을 연결하는 과정

 

변수 선언?

변수 이름 == 식별자 ------- 메모리 공간 주소를 바인딩

 

this 바인딩?

this ---------this가 가릴킬 객체      를 바인딩

 

	전역에 속한 메서드 내의 this는 그냥 this는 window
this는 객체의 프로퍼티, 메서드를 참조할때 쓴다 객체의 메서드 내부, 생성자 함수 내부 에서 의미 있음 strict mode --> this는 undefined가 바인딩됨

 

 

	객체 리터럴 내부 함수의 this는 호출한 객체

 

	생성자 함수의 내부 함수의 this는 인스턴스(객체가 메모리에 올라감, 각각 다름)

 

 

 

2. 함수 호출 방식과 this 바인딩

 

 

함수호출 방식에 따라 바뀐다

 

 

 

1. 일반 함수 호출

2. 메서드 호출

3. 생성자 함수 호출

4. Function.prototype.apply

 

일반 함수 호출	this == global Object
	일반함수 ff() 도 this == window 중첩함수 ffd()의 this == window
	'use strict' 을 사용하면 일반함수 ff() 의 this == undefined 중첩함수 ffd()의 this == undefined
const obj = {  value : 99, // 프로퍼티: 값  ff(){  console.log("ff ->this: ", this);  console.log("ff ->this.value: ", this.value);    function ffd(){     console.log("ffd ->this: ", this);     console.log("ffd ->this.value: ", this.value);    } ffd();  }//ff() end }; var : 전역 변수에 등록한다 var value : 전역 객체의 프로퍼티	const 선언: 전역 객체의 프로퍼티가 안된다.

 

 

	콜백 함수가 setTimeout 일반 함수로 호출이 된다면    obj.ff() 콜백함수 내부의 this에도(빨간색) 전역 객체 == window가 바인딩 된다. setTimeout 첫번째 인수: 콜백함수!!! 이처럼 일반 함수로 호출되면 모든 함수 내부의 this == window(전역 객체)가 바인딩된다.
	<this를 명시적으로 바인딩> let that = this; 를 추가해서 that을 사용하면... 콜백함수 내부의 this에도 객체가 바인딩된다.
	<this를 명시적으로 바인딩> Function.prototype.apply Function.prototype.call Function.prototype.bind const obj = {     v : 100,     ff() {                  setTimeout(function(){                     console.log('callback this: ',this);                     console.log('callback this v: ',this.v);         }.bind(this), 100);     } };
	<this를 명시적으로 바인딩> 화살표 함수 const obj = {     v : 100,     ff() {                  setTimeout(()=>{                     console.log('callback this: ',this);                     console.log('callback this v: ',this.v);         }, 100);     } };

 

 

 

 

 

 

 

 

메서드 호출	메서드 내부의 this는  메서드를 소유한 객체가 아니라 메서드를 호출한 객체에 바인딩 됨
	this == person 객체 getName 메서드는 person 객체의 메서드이다. 프로퍼티 : 바인딩된 함수 getName 프로퍼티가 가리키는 함수 객체 다른 객체의 메서드가 될수 있다 일반 변수에 할당하여 일반 함수로 호출됨
	this는  메서드를 가리키고 있는 객체와 관계없다. 메서드를 호출한 객체에 바인딩 된다. const person = {     name: 'han',     getName(){         console.log('객체안 함수 this: ',this);         return this.name;     } }; const person2 = {     name : 'han2' }; 주황색 person2.getName() 은 호출을 하였다. getName()을 호출한 객체는 person2이다. this == person2 이다 초록색 gg 는 가장 바깥쪽에 존재하는 변수 gg 함수의 내부this는  window다. window.name 값이 없어서 빈값이 나온다.

 

생성자 함수
	this 는 각자의 인스턴스