front-end 국비과정 일차 20일차 학습일지: this, call(),apply(),bind()

1 this란? this 키워드를 소유하는 소유자를 가리킴
 2 this의 소유자가 누군지에 따라 정의되는 내용이 달라짐 즉 this가 가리키는 대상이 달라짐 

// --- this를 문서(document)에서 출력한 경우 --- 

ex)

console.log(this)

1 this를 문서에서 출력할 경우 this의 소유자는 window이다
2 위코드는 this를 문서(document)에서 출력한 예시이다
3 JS란확장자를 가진파일은 하나의 문서임 그 문서에서 this를 출력했으니 this의 소유자는 window임 window는 최상위 객체임
4 console창에 출력값 = {}(객체)를 반환 여기서 {}는 빈객체인것 으로 생각 할 수있지만 window객체임 단지 window가 생략된 것



 --- method에서 this가 명시된경우 --- 
1 method에서 this가 명시된경우 this의 소유자는 해당 method를 감싸고있는 데이터가 소유자이다.
2 메서드(method)란? 속성값 즉 value가 함수인것을 의미함 객체에서 key는 객체의 속성임
ex)

const myInfo = {
  firsName: "Kim",
  lastName: "JungHwan",
  age: 26,
  info: function () {
    return `저의 이름은${this.firsName} ${this.lastName}이고 ${this.age}살 입니다!`
  }
}
console.log(myInfo.info())

1 myInfo라는 변수안에 객체 데이터를 생성 info라는 key에 value가 함수이기 때문에 method임
2 method안에 this를 명시했으니 this의 소유자는 메서드를 감싸고 있는 데이터 myinfo임
3 일반 함수로 작성했을때 this는 호출될때 정의됨  
4 info를 ()을 통해 콘솔창에 호출할때 this는 자신의 소유자인 myInfo를 참조
즉 호출시 return의 내용이 `저의 이름은${myInfo.firsName} ${myInfo.lastName}이고 ${myInfo.age}살 입니다!`로 바뀜



 
--- 메서드(method)안에 내부함수가 일반함수로 작성되었을 경우와 내부함수가 화살표 함수로 작성되었을 경우에 따라 this의 소유자가 달라짐 ---

--- 메서드에 내부함수가 일반함수 일때 this ---
1메서드 내부함수가 일반함수이고 this가 명시된 경우this의 소유자는 window이다

ex)

const myInfo2 = {
  firsName: "Kim",
  lastName: "JungHwan",
  age: 26,
  info: function () {
    console.log(this)//info라는 메소드에 this가 명시되었을 경우 소유자는 this가 명시된 메소드를 감싸고있는 객체라는 것을 증명하는 코드
    const innerFunc = function(){
      console.log(this) 
      //1info라는 메소드안에 innerFunc라는 내부함수를 작성후 consol창에 출력하는 코드
      //2innerFunc라는 내부함수의 this의 소유자는 window임을 증명한다 출력값이 window이기 때문 참고로 window는 생략됫을거임
    }
    innerFunc() //innerFunc라는 함수호출  
  }
}
myInfo2.info() //info라는 메서드를 호출 하면 안에있는 innerFunc이 호출됨

// --- 메서드에 내부함수가 화살표 함수일때 this ---
1메서드 내부함수가 화살표 함수이고 this가 명시된 경우 this의 소유자는 this가 명시된 함수를 감싸고있는 함수의 상위스코프가 소유자이다. 

//ex)

const myInfo3 = {
  firsName: "Kim",
  lastName: "JungHwan",
  age: 26,
  info: function () {
    const arrowFunc = () =>{
      console.log(this)
    }// arrow함수로 console창에 this를 출력하는 함수데이터를 정의
    //  이때 this는 자신을 감싸고있는 info라는 메서드의 상위 스코프인 myInfo3를 소유라로 인식
    //  때문에 myInfo3의 담긴 객체를 출력함
    
    arrowFunc() //arrowFunc이라는 함수 호출  
  }
}
myInfo3.info() // info라는 메서드를 호출한코드 호출하면 내부의 arrow함수 호출한 코드가 실행됨

바인딩(Binding)이란 ?
호출할 함수와 데이터를 연결한다는 의미를 가진다

1 call(),apply(),() = 함수를 호출할 때사용된다 
2 call(),apply()로 함수를 호출하면 this의 소유자는 call(),apply()의 1번파라미터의 명시된 데이터이다

--- call()---
call() :  다른 객체의 함수나 메소드를 호출한다
이때 1번파라미터에는 메소드안에 this와 연결될 데이터 이름을 명시한다(this의 인자로 사용됨) 2번파라미터 이후는 메소드의 인자를 명시한다
ex)

const person1 = {
  fName: "lee",
  lName: "sangwonn"
} // call()로 호출될 때 this와 연결되는 객체 데이터 

const person2 = {
  name:"kim",
  study:function(a,b){
    console.log(`${this.fName} ${this.lName}님이 공부하고 있습니다 ${a}와 ${b} 는 ${this.name}의 친구입니다`)
  }
} person2라는 객체안에 study라는 메소드를 명시한 코드

person2.study.call(person1,"짱구","철수")
//1 person2의 study라는 매소드를 call()로 호출함 
//2 이때 1번파라미터에는 study라는 메소드안에 this와 연결될 데이터 이름을 명시
//3 2번 파라미터 부터는 study라는 메소드의 명시된 파라미터의 값을 작성하여 인자화

--- apply () ---
apply(): call()과같이 다른 객체의 함수나 메소드를 호출한다 차이점은 apply를 사용하는 메소드의 인자를 배열로 호출한다.
ex)

const myInfo = {
  info:function(a,b){
   return `${this.fName} ${this.lName} 나이는 ${this.age}입니다 ${a}과 ${b}를 좋아합니다 `
  }
} 
//myInfo라는 객체안에 info라는 메서드를 명시 

const myInfo2 = {
  fName:'Kim',
  lName:'JungHwan',
  age:26,
}
//apply()로 호출할때 info라는 메서드안에 this와 연결될 객체 데이터

console.log(myInfo.info.apply(myInfo2,["개발","운동"]))
//1 콘솔창에 apply()로 info()메서드 호출하는 코드
//2 1번파라미터 에는 info메서드에 this와 연결될 데이터를 명시, 2번파라미터에는 info메서드의 인자를 명시 
//3 apply는 인자를 배열로 반환하기때문에 []안에 파라미터 값을 작성해줘야함

--- bind() ---
bind(): 
1함수와 데이터를 바인딩 해준다 즉 this의 소유자가 bind의 ()안에 데이터를 가르킨다
2바인딩이란? 위해서 언급했듯이 호출할 함수와 데이터를 연결한다는 의미를 가진다
3bind()는 call(),apply()와 달리 호출하는 기능은 없다 연결 만 시켜주기 때문에 호출은 별도로 해줘야한다.
ex)

const myInfo = {
  info:function(a,b){
   return `${this.fName} ${this.lName} 나이는 ${this.age}입니다 ${a}과 ${b}를 좋아합니다 `
  }
} 
//myInfo라는 객체안에 info라는 메서드를 명시한 코드 

const myInfo2 = {
  fName:'Kim',
  lName:'JungHwan',
  age:26,
}
//myInfo2라는 객체데이터 선언   

const result = myInfo.info.bind(myInfo2,"운동","개발")
//bind라는 기능을 통해 1번파라미터에 명시한 myInfro2가 info라는 메서드에 this 소유자로 연결(이것을 바인딩 이라한다)   
console.log(result())
//bind()는 호출기능이없기때문에 console창에 ()를 이용해 호출한 코드