23/10/14 TIL __ this 의 바인딩

 

 

 

🚗  this 

 

1. 그냥 사용한다면   

👉  브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다.

 

 

2. 일반 함수 내부에서 호출

👉  브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다.

 

 

3. script type = 'module' 배경의  일반 함수 내부에서 호출

👉  undefined 을 의미한다.

 

 

4. object 내의 함수 내부에서 호출

👉  해당 함수를 실행 한 바로 위  object 를 의미

 

 

5. 화살표 함수에서의 호출

👉 브라우저 에서는 window  /  node.js 에서는global 이라는 의미를 가지고 있다. 

 

 

6. 생성자 함수 안에서의 호출

👉 새로 생성되는 intance(생성자 함수로 부터 생성되는 오브젝트) 를  뜻한다. 

 

 

7. 이벤트 리스너 안에서의 호출

👉 e.currentTarget  를  뜻한다.

 

 

 

 

예시.  2)  4)

var obj1 = {
  outer: function () {
    //오브젝트 내부의 함수 안에서 this
    console.log(this);  //{ outer: [Function: outer] }
    
    var innerFunc = function () {
      //일반 함수 안에서 this
      console.log(this);  //global 객체 호출(node.js에서)
    };
    innerFunc(); //두번째로 실행 __ 메소드 내부에서 호출되었지만 앞에 점이 없음으로 함수로서의 호출

    var obj2 = {
      innerMethod: innerFunc, // 이 부분 때문에 innerFunc가 한번더 실행.   
      //{ innerMethod: [Function: innerFunc] }
    };
    obj2.innerMethod(); //세번째로 실행
  },
};
obj1.outer(); //첫번째로 실행

 

 

예시. 생성자 함수 내부에서 this 

function Student(name, gender, school) {
  this.name = name;
  this.gender = gender;
  this.school = school;
}

var kd = new Student("길동", "male", "상하이대");

console.log(kd); 
//Student { name: '길동', gender: 'male', school: '상하이대' }

 

 

 

예시. 화살표 함수 내부에서 this

var fullname = 'Ciryl Gane'

var fighter = {  
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
            return this.fullname;
        }
    },

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()
}
console.log(fighter.getFirstName());  //Ciryl 
console.log(fighter.getLastName)   //Gane

 

 

fighter.getFirstName() 에서의 this는 window가 되는걸 확인 할 수 있다. 

fighter가 되게 하려면 화살표 함수가 아닌, 일반 함수를 사용하면 된다.