자바스크립트 this, call(), apply(), bind() - FE study11

1. this

JAVA 의 경우, this 는 클래스의 인스턴트의 레퍼런스 변수를 의미하지만,
JAVASCRIPT 의 경우, this 는 현재 실행 문맥에서의 호출자를 의미한다.

자바스크립트 작동원리(실행 컨텍스트)

var value = "전역 값";
var obj = {
  value: "함수 내부 값",
  Outer: function() {
    console.log(`${this.value}`); // "함수 내부 값" : 현재실행 호출자는 obj (why? obj 객체 내 메소드를 실행하였기 때문)

    var Inner = function() {
      console.log(`${this.value}`); // "전역 값" : 현재실행 호출자는 전역 (why? 이 때 function은 선언됨에 따라 호이스팅 되며, 전역 value를 참조)
    };
    Inner();
  }
};

obj.Outer();

2. call(), apply()

function.call(obj) 형태로 쓰이는 데, 앞의 함수를 실행하는데 obj 를 this 로 사용한다는 것을 뜻한다. obj1.function.call(obj2)의 형태도 가능.

var value = "전역 값";
var obj = {
  value: "함수 내부 값",
  Outer: function() {
    console.log(`${this.value}`); // "함수 내부 값" : 현재실행 호출자는 obj (why? obj 객체 내 메소드를 실행하였기 때문)

    var Inner = function() {
      console.log(`${this.value}`); // "함수 내부 값" : call을 통해 obj 내부value를 불러옴
    };
    Inner.call(this);
  }
};

obj.Outer();

call() 과 apply()의 차이점은
function.call(this, 1, 2, 3); function.apply(this, [1, 2, 3]);
이런 식으로 함수의 파라미터 전달할 때, 값으로 줄지, 배열로 줄지 이다.

3. bind()

bind() 는 호출하지 않고 함수에 this 만 전달해주는 역할!!

var obj1 = {
  value: "obj1값",
  alert1: function() {
    console.log(this.value);
  }
};
var obj2 = {
  value: 'obj2값'
};
var bindPractice = obj1.alert1.bind(obj2);
bindPractice(); // "obj2값"

4. 리액트에서의 bind(this)

class App extends React.Component {
  constructor() {
        super();
        this.handler = this.handler.bind(this); // bind 해줘야만 컴포넌트의 this의 state를 수정할 수 있음
    }
    handler() {
        this.setState({
            // ...
        });
    }
 
    render() {
        return <div
            onClick={ this.handler }
        />;
    }
}

this.handler = this.handler.bind(this) 에서 앞의 this는 window 를 뒤의 this는 해당 컴포넌트를 의미한다.

하지만 화살표함수를 쓰면 자동 bindind 이 된다.

    handler = () => {
        this.setState({
            // ...
        });