-
자바스크립트 - apply / call / bind프로그래밍/JavaScript 자바스크립트 2021. 9. 30.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // 함수 표현식 방법으로 함수 작성 var sum = function(a,b,c) { return a+b+c; } var s; // 일반적인 방법으로 함수 호출 s = sum(1,2,3); console.log(s); // 6 // appaly() 함수를 이용한 sum() 함수 호출 // apply(thisArg [, argsArray]) - thisArg:함수를호출할때 제공될 this, argsArray:인수를 지정하는 배열 유사객체 s = sum.apply(null, [1,2,3]); console.log(s); // call() 함수를 이용한 sum() 함수 호출 // call(thisArg [, arg1, arg2 ...]) - thisArg:함수를호출할때 제공될 this // arg1, arg2 : 함수에 전달할 인수 값 // apply() 와 차이점은 함수에 전할할 인수가 배열이며, call()은 인수 리스트를 받는다. s = sum.call(null, 1,2,3); console.log(s); // 6 // 5,6,2,3,7 의 최대값 s = Math.max(5,6,2,3,7); console.log(s); // 7 var a = [5,6,2,3,7]; s = Math.max(a); console.log(s); // NaN s = Math.max.apply(null, a); console.log(s); // 7 s = Math.min.apply(null, a); console.log(s); // s </script> </head> <body> <h3>Function - apply(), call() 메소드</h3> </body> </html>apply는 함수를 호출하는 다른 방법 중 하나이다.
sum()이라는 함수를 호출 하려고 할 때 apply를 통해서 호출 하려면
sum.apply(null, [1,2,3]) 이렇게 해야한다.
null의 위치에는 원래 this.뭐뭐 가 들어간다. 뒤에 인자는 대괄호로 덮어야 한다.
(배열과 비슷해 보이지만 배열 아님)
call은 apply와 동일한데 뒤에 인자 부분에 대괄호가 필요 없다.
(대괄호는 안쓰는데 전달 받은 인수를 배열로 처리함. 리스트화)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var obj = { name:'김자바', sayName:function() { console.log('저는 '+ this.name +' 입니다.'); } }; var obj2 = { name:'스프링' }; obj.sayName(); // 김자바. sayName()에서의 this는 obj 객체 // obj2.sayName(); // 에러 obj.sayName.call(obj2); // 스프링 obj.sayName.apply(obj2); // 스프링 // this가 가리키는 것을 obj에서 obj2로 변경 // sayName()은 obj 메소드인데, obj2 메소드인것 처럼 사용 obj.sayName.call(null); // 이름이 안나옴 obj.sayName.call(obj); // 김자바 </script> </head> <body> <h3>Function - apply(), call() 메소드</h3> </body> </html>apply와 call을 이용하면 코드를 간소화 시킬 수 있다.
obj와 obj2를 비슷한 기능을 하게 하고 싶은데 obj의 내용을 똑같이 obj2에 쓰기 귀찮을때 쓰면 좋다.
obj에 있는 sayName의 메소드를 이용해서 obj2에 있는 name을 호출 하고 싶으면
obj.sayName.apply(obj2) 이때 아까 this의 자리 뭐 없으면 null 썼던 곳에 obj2 객체를 써준다.
이러면 obj의 sayName 메소드에서 this.name을 obj2의 name으로 쓴다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> /* function sub() { for(var i=0; i<arguments.length; i++) { console.log(arguments[i]); } } sub(1, '자바', true); */ // arr.join() : 배열의 모든 요소를 연결해 하나의 문자열로 만듬 /* function sub() { console.log(arguments.join()); } sub(1, '자바', true); // 에러. // arguments는 배열과 유사하지만 배열은 아니며 join 메소드가 없음 */ function sub() { console.log( Array.prototype.join.call( arguments )); } sub(1, '자바', true); // "1,자바,true" // ------------------------------------ var a1 = [10, 20, 30]; var a2 = ['a', 'b', 'c']; // a1 배열에 a2 배열의 내용을 뒤에 추가 /* for(var n of a2) { a1.push(n); } */ a1.push.apply(a1, a2); console.log( a1.join() ); // "10,20,30,a,b,c" </script> </head> <body> <h3>Function - apply(), call() 메소드</h3> </body> </html>arguments를 이용하면 인자가 없는 함수도 유연하게 처리 가능하다.
sub() 함수를 인자가 비어있는 함수로 만들었지만 함수 내부에서 인자를 몇개라도 받아서 처리 할 수 있도록
arguments를 넣어놨다.
그러면 sub() 인자에 형태가 다른 내용이나 몇개를 넣더라도 알아서 처리를 한다.
배열에서 뒤에 내용을 더 추가하고 싶을때 apply를 사용 할 수 있다.
a1.push.apply(a1, a2)를 하게 되면 a1배열안에 a2의 내용을 뒤로 추가한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // func.bind(thisArg, [arg1, arg2 ...]) // 함수를 호출하지는 않고 호출할 때 this로 제공된 값으로 설정하는 새로운 함수를 만듬 var obj = { name:'김자바', sayName:function() { console.log('저는 '+ this.name +' 입니다.'); } }; var obj2 = { name:'스프링' }; var fn = obj.sayName.bind(obj2); // 함수를 호출하지는 않고 this의 obj를 obj2로 변경 fn(); // 스프링 </script> </head> <body> <h3>Function - bind </h3> </body> </html>bind는 함수를 호출하는게 아니라 this로 받은 값을 가지고 새로운 함수를 만드는데 잘 안쓰인다.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크림트 - BOM (0) 2021.09.30 자바스크립트 - JSON 데이터 객체로 변환하기 (0) 2021.09.30 자바스크립트 - 클래스 (0) 2021.09.30 자바스크립트 - 객체(3) (0) 2021.09.30 자바스크립트 - 배열 / 객체 (2) (0) 2021.09.30
