자바스크립트의 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








And