(49) [JavaScript] 5일 JavaScript 내장객체

Function 객체
함수를 나타내는 객체.
Function() 생성자는 새로운
Function 객체를 생성하며, 생성자를 호출하여 동적으로 함수를 생성할 수 있다.
Function() 생성자로 함수를 만들 경우 보안 문제와 eval과 비슷한 유사(덜 심각한) 성능 문제가
발생할 수 있다. 하지만, 전역 범위에서 코드를 실행할 수 있고, 코드를 최소화 할 수 있다.

Function 객체

apply() 주어진 this 값과 배열(또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출한다. 매개변수 : thisArg : fun를 호출하는데 제공될 this의 값이며, 메소드가 비 엄격 모드 코드내의 함수일 경우, null과 undefined는 전역 객체로 대체된다.
call() : 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다. apply()구문과 유사하며, 차이점은 call은 함수에 전달된 인수 리스트를 받는데 비해, apply()는 인수 배열 하나를 받는다는 점이다.

</head>
<body>


	<h3>apply(),call()</h3>

	<script type="text/javascript">
	var sum = function (a,b,c) {
		return a+b+c;
	};
	
	var s; 
	
	// 함수 호출 방법 -------------
	// 1) 일반적인 방법으로 함수 호출 
	s=sum(1,2,3);
	console.log(s);
	
	// 2) aplly() 함수를 이용한 함수 호출
	// apply(thisArg[,argArray]) : 주어진 this 값과 배열로 제공하는 인수로 함수 호출 
	s = sum.apply(null,[1,2,3]);
	console.log(s);
	
	// 3) call() 함수를 이용한 함수 호출
	// call(thisArg[,agr1,arg2,...]): 주어진 this 값과 각각 전달된 인수로 함수 호출 
	s = sum.call(null,1,2,3);
	console.log(s);
	console.log('-----------------------')
	
	var m = Math.max(5,6,3,7,8,3);
	console.log(m);
	
	var nums=[5,6,3,7,8,3];
	m = Math.max(nums);
	console.log(m); // NaN
	
	m = Math.max.apply(null,nums);
	console.log(m);
	
	
	
	</script>

</body>
</html>

</head>
<body>

	<h3>apply(),call()</h3>
	
	<script type="text/javascript">
	var obj = {
		name : '이자바',
		sayName : function() {
			console.log(this.name); // this 필수 
		}
	};
	
	var obj2 = {
		name:'스프링'
	};
	
	obj.sayName();
	
	 //call(thisArg[,agr1,arg2,...])
	 // thisArg : 함수를 호출할 때 제공될 this 
	obj.sayName.call(null); // 아무것도 출력되지 않는다. this가 null 이므로 아무것도 출력 안됨
	
	obj.sayName.call(obj);
	
	obj.sayName.call(obj2); // 스프링

	
	</script>

</body>
</html>

</head>
<body>
	<h3>apply(),call()</h3>

	<script type="text/javascript">
		function sub() {
			for (let i = 0; i < arguments.length; i++) {
				console.log(arguments[i]);
			}
		}
		sub(1, '자바', 2);
		console.log('------------------------');

		function sub2() {
			console.dir(arguments); // Arguments(3), 유사배열
			console.dir([]); // Array(0) 
			//cnosole.log(arguments.join); 
			// join()은 Array의 함수 
		}
		sub2(1, '자바', 2);
		
		//Array 객체의 Join 
		function sub3(){
			console.log(Array.prototype.join.call(arguments));
		}
		
		sub3(1,'자바',2);
		
	</script>


</body>
</html>

</head>
<body>

	<h3>bind</h3>

	<script type="text/javascript">
	var obj = {
			name : '이자바',
			sayName : function () {
				console.log(this.name);
			}
	};
	
	var obj2={
		name : '스프링'
	};
	
	//bind(thisArg[,arg1,arg2,arg3,...])
	// : 호출할 때 this를 제공된 값으로 설정하는 새로운 함수를 만듦
	var fn = obj.sayName.bind(obj2);
	fn();
	
	
	
	</script>
</body>
</html>

'💻 > Javascript' 카테고리의 다른 글

(50) [JavaScript] 6일 JavaScript 객체 - 클래스 (1)	2024.04.28
(49) [JavaScript] 5일 JavaScript 객체 - 생성, 구조분해 (1)	2024.04.28
(48) [JavaScript] 4일 JavaScript Array (0)	2024.04.24
(47) [JavaScript] 3일 JavaScript 내장객체 (0)	2024.04.23
(47) [JavaScript] 3일 JavaScript 함수&예외처리 (0)	2024.04.22

Power Up!

(49) [JavaScript] 5일 JavaScript 내장객체

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

(49) [JavaScript] 5일 JavaScript 내장객체

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바