자바스크립트의 apply,call 그리고 bind

씨언어로 객체지향을 하던때가 있었습니다. 방법은 간단 했습니다.

함수의 첫번째 인자로 스트럭쳐 객체를 넣어주고 두번째 인자부터는 그 함수의 실제 인자 값을 넣어주는 것입니다.

사실 이방법은 씨뿐만 아니라 어셈블러 심지어 코볼이나 포트란에서도 비슷하게 썻었습니다.

자바스크립트의 함수도 기본적으로 그기능을 지원 해주는 함수객체의 멤버들이 있습니다.

apply

call

이 두가지 함수들은 서로 비슷한기능을 합니다. 다만 차이가 있다면 인자전달 방식을 배열로 해주는 apply 와 직접 해주는 call이 있습니다.

object.foo(인자들,..,...)

과

foo.call(object,인자들,..,...)

두개는 서로 완전히 일치합니다.

<script>

        var x = 10;

        function foo() {

            console.log(this.x);

        }

        foo();

        var obj = {x:12}; 

        foo.apply(obj); //12가 출력 됩니다.

        var obj2 = {x:18}

        foo.call(obj2); //18 가 출력 됩니다.

</script>

다음으로 인자들을 넘겨주는 예를 알아보도록 하겠습니다.

<script>

        var name = 'bill';

        function foo(msg,msg2) {

            console.log(msg + '  ' + msg2);

            console.log(this.name);

        }

        foo('normal call','default');

        var obj = {

            name : 'steve'

        }

        foo.call(obj,'call function','object'); //인자를 그냥 전달합니다.

        foo.apply(obj,['apply function','object']); //인자를 배열형태로 전달 합니다.

</script>

그럼 call이나 apply같은 건 왜 쓰일까요?

평소에는 쓸이유가 거의 없지만 객체를 상속받았을때 부모클래스의 함수를 호출하고 싶을때 응용할 수 있습니다.

show : function {

superclass.show.call(this);

}

bind 에 대해서 알아보도록 합시다.

기본적으로 핸들러로 호출되는 람다함수들의 this는 전역객체이기 때문에

타이머라든지 이밴트 핸들러의 콜백함수로 호출이될때도 특정 객체와 연결하여 this를 유지 하고싶을때 bind 함수를 사용해서 해결할 수 있습니다.

fun.bind(object,arg1,....argn)

<script>

        var a = 'global this'

        function test() {

            this.a = 'that this';

            function test2() {

                console.log(this.a);

            }

            var _test2 = test2.bind(this);

//global this 가 찍힌다.

            test2();

            setTimeout(test2,1);

            //아래 2개는 모두 같은 결과

            //test2.apply(this);

            //_test2();

//that this 가 찍힌다.

            //타이머같은 콜백 함수로도 응용 가능함

            setTimeout(_test2,1);

        }

        var obj = new test();

</script>

bind 는 인자로 넘겨준 객체에 연결된 새로운 함수객체를 반환한다.

콜백 함수를 특정 객체와 연결하고 싶을 때 사용한다.

처음에 호출된 test2  에서 사용된 this는 전역 객체 이지만 두번째 bind를 통해서 만들어진 _test2 에 있는 this 는 test 함수로컬 객체가 된다.

참고 : 

call ,apply 에 관한글

http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

bind 에 관한글

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind