1、Function

  • 每个 JavaScript 函数实际上都是一个 Function 对象。运行 (function(){}).constructor === Function // true 便可以得到这个结论。
    ———————引用自官网

2、构造函数

  • 创建一个新的 Function 对象。直接调用此构造函数可以动态创建函数,但会遇到和 eval() 类似的的安全问题和(相对较小的)性能问题。然而,与 eval() 不同的是,Function 构造函数创建的函数只能在全局作用域中运行。
    ———————引用自官网

3、函数的特点

  • 可以重复调用,隐藏内部执行过程;
  • 函数使用原则:高内聚和低耦合:

① 高内聚(只有一个功能);
② 低耦合(与外界的联系要少);

4、函数返回值

  • 函数返回值是通过 return 来进行返回

return 只能返回一个值;
return 执行后,跳出函数,return 后面的语句不再执行;
③ 如果函数没有 return,返回的值为 undefined

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>

③ 运行效果

Picture

(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>

③ 运行效果

Picture

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>

③ 运行效果

Picture

(2)箭头函数(es6)
1)常见写法

① 语法格式:

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

② 示例:

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

③ 运行效果

Picture

2)一个参数时,省略小括号

① 语法格式:

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

② 示例:

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

③ 运行效果

Picture

3)没有大括号时,默认return

① 语法格式:

	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>

③ 运行效果

Picture

更多函数学习,请参考官方文档

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

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐