자바스크립트 함수(함수)

1, 기능

  • 모든 JavaScript 함수는 실제로 Function 개체입니다. Run (function(){}).constructor === Function // 이 결론을 얻으려면 true입니다.
    ——————공식 홈페이지에서 인용

2. 생성자

  • 새 함수 개체를 만듭니다. 이 생성자를 직접 호출하면 함수를 동적으로 생성할 수 있지만 eval()과 유사한 보안 문제 및 (상대적으로 사소한) 성능 문제가 있습니다. 그러나 eval()과 달리 Function 생성자가 만든 함수는 전역 범위에서만 실행할 수 있습니다.
    ——————공식 홈페이지에서 인용

3. 기능의 특징

  • 내부 실행 프로세스를 숨기기 위해 반복적으로 호출할 수 있습니다.
  • 함수 사용의 원리: 높은 응집력과 낮은 결합성:

① 높은 응집력(하나의 기능만)
② 낮은 결합도(외부 세계와의 연결이 적음)

4. 함수 반환 값

  • 함수의 반환 값은 return 에 의해 반환 됩니다.

return은 하나의 값만 반환할 수 있다
return이 실행된 후 함수에서 빠져나와 return 이후의 문장이 실행되지
않는다 ③ 함수에 return이 없으면 반환 값은 정의되지 않는다 .

5. 기능 범위

  • 함수 선언은 끌어올릴 수 있습니다.
  • var를 사용하여 선언된 변수는 승격될 수 있지만 할당은 승격될 수 없습니다.
  • 변수 선언 키워드( let/var )를 사용하지 않는 경우 기본값은 전역 변수입니다.
  • 변수 범위:

전역 범위: 함수 외부에서 선언, 모든 함수 사용 가능
블록 수준 범위: 함수 내에서 선언, 선언된 블록 수준 범위만 사용 가능

6. 기능 구성

  • 함수 이름(필수)
  • 함수 본문(필수)
  • 매개변수(생략 가능, 5. 기능 분류 참조 )
  • 반환 값 (생략 가능, 5. 함수 분류 참조 )

7. 함수 구문

(1) 함수 키워드 커스텀 함수

① 구문 형식:

	function 函数名称(可以为空,也可以写形参){
    
    
		//函数体;
	};

② 예시:

	<script>
        //声明变量并赋值
        let NumOne = 10;
        let NumTwo = 20;
        
        //调用函数,传入实参,将函数运行结果赋值给result
        result = sum(NumOne,NumTwo);
        
        //输出结果
        document.write(result);
        
        //自定义一个名为sum的函数,并设置形参num1,num2
        function sum(num1,num2){
    
    
            //计算传入的参数之和
            NumThr = num1 + num2;
            //返回执行结果
            return NumThr;
        };
	</script>

③ 동작 효과

그림

(2) 함수 표현(익명함수)

① 구문 형식:

	var 函数名 = function(形参1,形参2){
    
    
			//函数体
		};

② 예시:

	<script>
		//声明变量并赋值
		let NumOne = 10;
		let NumTwo = 20;
		//定义函数,函数名为sum,并设置形参num1,num2
		let sum = function(num1,num2){
    
    
				//计算传入的参数之和
				NumThr = num1 + num2;
				//返回执行结果
				return NumThr;
			}

		//调用函数,传入实参,将函数运行结果赋值给result
		let result = sum(NumOne,NumTwo);
		//输出结果
		document.write(result);
	</script>

③ 동작 효과

그림

8. 기능의 분류

(1) 매개변수 없음 및 반환값 없음

① 예:

	<script>
		//调用函数,结果赋值给result
		let result = search();
		//输出结果
		document.write(result);
		//定义函数
		function search(){
    
    
			let Num1 = 10;
			let Num2 = 20;
			Num3 = Num1 + Num2
		}
	</script>

(2) 매개변수 및 반환값 없음

① 예:

	<script>
		//调用函数,结果赋值给result
		let result = search();
		//输出结果
        document.write(result);
        //定义函数
		function search(){
    
    
			let Num1 = 10;
			let Num2 = 20;
			Num3 = Num1 + Num2
			return Num3;
		}
	</script>

(3) 매개변수는 있지만 리턴 값이 없음

① 예:

	<script>
		//声明变量
		let NumOne = 10;
		let NumTwo = 20;
		//调用函数,结果赋值给result
		let result = search(NumOne,NumTwo);
		//输出结果
		document.write(result);
		//定义函数
		function search(num1,num2){
    
    
			NumThr = num1 + num2;
		}
	</script>

(4) 매개 변수와 반환 값이 있습니다.

① 예:

	<script>
		//声明变量
		let NumOne = 10;
		let NumTwo = 20;
		//调用函数,结果赋值给result
		let result = search(NumOne,NumTwo);
		//输出结果
		document.write(result);
		//定义函数
		function search(num1,num2){
    
    
			NumThr = num1 + num2;
            return NumThr;
		}
	</script>

9. 확장

(1) 익명 함수

① 구문 형식:

	let 变量名 = function(){
    
    
		//函数体;
	}

② 예시:

	<script>
		let demo = function(){
    
    
			return "这是一个匿名函数";
		}
		let result = demo();
		document.write(result);
	</script>

③ 동작 효과

그림

(2) 화살표 함수(es6)

1) 일반적인 작성법

① 구문 형식:

	let 变量名 = () => {
    
    
		//函数体;
	}

② 예시:

	<script>
		let demo = () => {
    
    
			return "这是一个箭头函数";
		}
		let result = demo();
		document.write(result);
	</script>

③ 동작 효과

그림

2) 하나의 매개변수에 대해 괄호 생략

① 구문 형식:

	let 变量名 = 参数 => {
    
    
		//函数体;
	}

② 예시:

	<script>
		let number = 10;
		let demo = num => {
    
    
			return "传入的参数值为:" + num;
		}
		let result = demo(number);
		document.wrirte(result);
	</script>

③ 동작 효과

그림

3) 중괄호가 없으면 기본 리턴

① 구문 형식:

	let 变量名 = (参数1,参数2) => 函数体

② 예시:

	<script>
		let demo = (numOne,numTwo) => numOne + numTwo;
		let numberOne = 10
		let numberTwo = 20;
		let result = demo(numberOne,numberTwo)
		document.write(result);
	</script>

③ 동작 효과

그림

함수 학습에 대한 자세한 내용은 공식 문서를 참조하십시오.

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

추천

출처blog.csdn.net/StupidlyGrass/article/details/128717649