[독서] 코어자바스크립트 3장

 

this?

이게 왜 어렵나 하면, 그때그때 다른값을 가르키기때문이다.

 

자바스크립트 전역컨객체를 가리킨다.

 

함수 vs 메서드 this

this가 어려운 이유는 아래와 같다.

var obj = {
  outer: function () {
    console.log(this);

    var inner = function () {
      console.log(this);
    };
    inner();

    var obj2 = {
      innerMethod: inner,
    };
    obj2.innerMethod();
  },
};
obj.outer();


/// 응답값 
// {outer: ƒ}
// Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
// {innerMethod: ƒ}

이러한 차이가 발생하는 건 method로 호출하느냐 그냥 함수로 호출하느냐의 차이다.

 

obj.outer();
inner();
obj2.innerMethod();

객체 내부로 메소드로 호출하면, this는 해당 메소드로 호출하였기에 this는 해당 객체로 호출하지만,

그냥 함수 호출로하면 전역객체로 호출하여 예상과 다르게 호출된다.

 

 

 

이를 막기위해 2가지 방법이 있다.

1번째. 원하는 곳에서 따로 변수를 선언하여 this를 고정값으로 박아버리는 것.

var obj = {
  outer: function () {
    console.log(this);

    var self = this;
    var inner = function () {
      console.log(self);
    };
    inner();

    var obj2 = {
      innerMethod: inner,
    };
    obj2.innerMethod();
  },
};
obj.outer();

2번째는, 화살표 함수로 바꾸는 것이다.

arrow funtion의 경우 this를 바인딩하지 않아서 해당 this가 없기에 바로 상위의 this를 사용하게 된다.

var obj = {
  outer: function () {
    console.log(this);

    var inner = () => {
      console.log(this);
    };
    inner();

    var obj2 = {
      innerMethod: inner,
    };
    obj2.innerMethod();
  },
};
obj.outer();

 

콜백함수

함수의 제어권a을 다른 함수(메서드)b에 넘겨주는 경우 a를 콜백함수라고 한다.

 

call 메서드

apply 메서드

메서드의 주체인 함수를 즉시호출하는 함수.

둘다 임의의 객체를 this로 지정이 가능하다.

차이는 단순한데, call의 인자가 따로지만, apply의 경우 argument를 배열로 받는다.

function greet(lang, punctuation) {
  console.log(`${lang}로 인사합니다. ${this.name}${punctuation}`);
}

const person = { name: "철수" };

// call을 사용하여 this를 person으로 설정
greet.call(person, "한국어", "!");
// 출력: "한국어로 인사합니다. 철수!"


function greet(lang, punctuation) {
  console.log(`${lang}로 인사합니다. ${this.name}${punctuation}`);
}

const person = { name: "영희" };

// apply를 사용하여 this를 person으로 설정 (인자를 배열로 전달)
greet.apply(person, ["영어", "?"]);
// 출력: "영어로 인사합니다. 영희?"

 

Bind

즉시 함수를 호출하는 call, apply와 다르게 일단 미리 적용만하고 호출하지 않는 함수.

미리 적용하는 것과 부분적용함수를 구현한다.

 

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2); // 첫 번째 인자(a)를 2로 고정
console.log(double(5)); // 10 (2 * 5)


class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("Alice");
const sayHelloFn = person.sayHello; // 함수 참조만 가져옴 (this가 바뀜)

sayHelloFn(); // 실행하면 오류 또는 undefined가 출력될 수 있음

const boundSayHello = person.sayHello.bind(person); // this를 person으로 고정
boundSayHello(); // "Hello, my name is Alice"

 

그리고 this를 콜백함수에 전달하는 방법으로 2가지가 존재한다.

 

var obj = {
    outer : function() {
        console.log(this);
        var innerFunc = function() {
            console.log(this)
        }.bind(this);
        innerFunc();
    }
}
obj.outer()


// outer : func
// outer : func


var obj = {
    outer : function() {
        console.log(this);
        var innerFunc = function() {
            console.log(this)
        }
        innerFunc.call(this);
    }
}
obj.outer()

// 위의 내용과 동일하게
// outer : func
// outer : func


var obj = {
    outer : function() {
        console.log(this);
        var innerFunc = function() {
            console.log(this)
        }
        innerFunc.call();
    }
}
obj.outer()

// outer: func...
// window: { alert... }

 

위와 같이 this는 어디서 호출하느냐, 매개변수로 뭘 넣는냐에 따라 호출하는 값이 달라지므로

값이 혼동되어 매우 어렵다.

이를 해결하기위해서 화살표 함수 등이 나왔으니, this 프로토타입 함수를 사용하는 것보다 오류가 날 확률이 적은
화살표 함수, 기명함수 등을 사용하자.

 

 

  
  
  
  
  자바스크립트 'this' 바인딩 컨텍스트
  
  
  
  전역 컨텍스트
  this === window (브라우저) / global (Node.js)
  
  
  
  객체 메소드 컨텍스트
  this === 메소드를 호출한 객체
  
  
  
  생성자 함수 컨텍스트
  this === 새로 생성된 인스턴스
  
  
  
  명시적 바인딩 (call, apply, bind)
  this === 명시적으로 지정된 객체
  
  
  
  화살표 함수: 외부 스코프의 this를 상속

 

1. 전역 컨텍스트 (파란색): 함수 외부나 일반 함수에서의 this
2. 객체 메소드 컨텍스트 (녹색): 객체의 메소드로서 호출될 때의 this
3. 생성자 함수 컨텍스트 (주황색): new 키워드로 호출될 때의 this
4. 명시적 바인딩 (보라색): call, apply, bind 메소드를 통한 this
5. 화살표 함수 (빨간색): 자체 this가 없고 외부 스코프의 this를 상속받음