[JS] this 고정 그리고 유사배열 활용 bind,call,apply

함수의 기본 메소드 중 중요한 call, apply, bind에 대해서.

 

함수의 실행은 1)선언 후 호출하거나 (함수 뒤에 () 붙이기) 2)call, apply해서 할 수 있다

함수는 함수객체라고 불린다. 객체는 (변수)프로퍼티와 함수형태인 프로퍼티를 갖는데 여기서 함수인 프로퍼티를 메서드라고 부른다. 객체는 .(점 연산자)를 통해 자신의 프로퍼티인 메서드를 사용할 수 있다.

함수이름.call() , 함수이름.apply() , 함수이름.bind()

//https://velog.io/@rohkorea86/this-%EC%99%80-callapplybind-%ED%95%A8%EC%88%98-mfjpvb9yap

 

부모인 Function.Prototype으로 부터 call,apply,bind을 물려받았기 때문이다. 자바스크립트는 프토토타입을 기반의 언어로 객체를 상속하는 언어이다. 그래서 모든 함수(function)는 call,apply,bind(프로퍼티)를 호출 할 수 있다.

call, apply, bind는 함수 자신의 실행"환경"을 외부 this로 설정할 수 있는 것이 주요한 특징이다.
첫번째 인수 없이도 에러 없이 작동하는데 없을 경우 자동적으로 전역객체를 가리키게 된다.

 

 

bind

경우에 따라서 this는 획획 바뀔 수 있기 때문에 this를 고정시키는 방법이 존재
bind함수를 사용하면 this는 내가 정한 object로 고정된다.

어떠한 함수이건 메소드이건 bind라는 함수를 사용할 수 있다.
bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않는다.

 

bind는 직역하면 “묶는다. 결속시키다. 서로의 관계를 맺게 한다.” 로 해석

태그등에 특정 사건이 일어 났을 경우, 원하는 함수를 실행시켜 주는 명령어
bind은 이벤트 타입과 함수가 매개 변수들로 들어간다. 이벤트 타입은 클릭, 마우스 오버 등의 사건을 지칭하며, 함수는 이러한 사건이 일어 났을 때 실행될 함수를 의미 한다.

보통, bind에 들어 가는 함수명은 on으로 시작하거나 Handler로 끝나는 경향이 있다. 꼭 그렇게 정해진 것은 아니나 on과 Handler로 이름이 정해지면,  bind와 연결된 함수라는 것을 직관적으로 인지 할 수 있기 때문이다.

onDown, onPlaneMouseDown, downHandler, planeMouseDownHandler ...

unbind는 bind와 반대되는 개념이라고 보면 된다. bind로 연결된 함수를 제거한다.

 

 

 

 

call, apply

bind와 같은 역할 (this 고정) +실행까지 한다.
공통적으로 가진 null 인자의 역할은 this를 대체하는 것이다.

call : 보통 함수와 똑같이 인자를 넣어 파라미터를 하나씩 넘기고
apply : 인자를 하나로 묶어 배열로 넘긴다

 

var example = function (a, b, c) {
  return a + b + c;
};
example(1, 2, 3);
example.call(null, 1, 2, 3);
example.apply(null, [1, 2, 3]);

 

아래 예시를 보면 다른 객체의 함수를 자기 것마냥 사용한다.
call,apply,bind메서드는 외부에서 할당하는 첫번째 인자가 그 함수의 this가 된다. 

 

var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what?'
};
obj.yell(); // 'zero';
obj.yell.call(obj2); // 'what?'

// https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd

 

주로 사용은 위 메소드들을 쓰는 예로, 함수의 arguments를 조작할 때 사용

arguments :함수라면 처음부터 갖고 있는 숨겨진 속성이며 바로 함수에 들어온 인자를 유사 배열 형식으로 반환 
유사배열은 배열의 메소드를 쓸 수 없어 call이나 apply과 함께join, slice, concat 등의 메소드를 사용한다.

 

function example() {
  console.log(arguments);
}
example(1, 'string', true); // [1, 'string', true]

// https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd