JavaScript 기본 개념 공부 day4

this

---

생성자 함수를 만들 때 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 이때 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특별한 식별자로 this를 사용한다. 함수가 호출되면 this가 암묵적으로 함수 내부에 전달되며 this도 지역변수처럼 사용할 수 있다.

다른 언어(자바, C++ 등)에서 this는 항상 클래스가 생성하는 인스턴스를 가리키지만 자바스크립트에서의 this는 함수가 호출되는 방식에 따라 this에 바인딩 되는 값이 동적으로 결정된다.

일반 함수로 호출했을 때의 this

일반 함수로 호출된 모든 함수 내부의 this 에는 전역 객체가 바인딩된다. 아래의 경우 일반 함수로 호출된 bar()의 this는 전역객체가 바인딩 된다. foo()는 obj.foo()로 호출되었기 때문에  this에 obj가 바인딩 된다.

const obj = {
    foo(){
        console.log(this);
        function bar(){
           console.log(this) 
        }
        bar() 
    }
}
obj.foo()

메서드로 호출했을 때의 this

메서드 내부의 this는 프로퍼티로 메서드를 가리키고 있는 객체와는 관계가 없고 메서드를 호출한 객체에 바인딩 된다. 아래의 경우 각각 ryu 와 hyunju를 출력한다. 

const obj = {
    name : 'ryu',
    foo(){
        return this.name
    }
}
const person ={
    name : 'hyunju'
}
person.foo = obj.foo;
console.log(obj.foo())
console.log(person.foo())

생성자 함수로 호출했을 때의 this

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩 된다. 아래의 경우 'ryu 님'이 출력된다.

function User (name){
    this.name = name;
    this.nick = function (){
        return this.name + '님'
    }
}
const user1 = new User('ryu')
console.log(user1.nick())

this를 바인딩하지 않는 함수

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게되어, 상위 스코프의 this를 그대로 활용할 수 있다. 첫번째 this 는 obj를 바인딩하고 두번째 this는 화살표함수이기 때문에 첫번째 this와 똑같이 obj를 바인딩한다.

var obj = {
    outer:function(){
        console.log(this)
        var innerfunc =()=> {
            console.log(this)
        }
        innerfunc()
    }
}
obj.outer()

콜백함수

---

콜백 함수는 다른 코드에게 인자로 넘겨줌으로써 함수의 제어권도 함께 위임한다. 콜백 함수를 위임받은 코드는 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행하게 된다.

function repeat(n,f){
    for(let i=0;i<n;i++){
        f(i);
    }
}
let logAll = function (i){
    console.log(i)
}
let logOdd = function (i){
    if(i%2) console.log(i);
}
repeat(5,logAll)
repeat(4,logOdd)

위의 경우처럼 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 하며, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다.