JavaScript-函数(Function)
JavaScript函数(Function)
·
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>
③ 运行效果
(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)没有大括号时,默认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>
③ 运行效果
更多函数学习,请参考官方文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献3条内容
所有评论(0)