JavaScript中的函数个人分享

函数

函数的概述

• 所谓函数就是只被定义一次,但可能被执行或调用多次
• 变量与函数的区别: 变量存的是数据内容而函数存的是语句块

定义函数

• 备注:

1. 定义函数时 - 函数体的内容不会被执行
2. 调用函数时 - 函数体才被执行

• 注意: 一般以个函数就去完成一个功能

1.函数声明方式:

• 语法: function 函数名称 () {
  函数体 - 语句块 }
• 注意: 定义函数时 - 函数体的内容是不会被执行的

示例代码:

function fu(){
     console.log('一花一世界')
     }

2.字面量/直接量方式:

• 语法: var 函数名称 = function(){
  函数体 }

示例代码:

var fun = function(){
    console.log('这是一个函数');
};

// 调用函数 -> 函数体的内容才被执行
fun();

• 注意: 控制台调用函数的语法是函数名加( )而不是console.log( )

示例代码:

/* 调用函数 */
fu()

---

变量与函数

var v = 100;/* 定义变量，并初始化值 */
console.log(v);/* 调用变量 */

// 变量是允许被重新赋值的
v = function(){
    console.log('这是一个函数');
}
// v既是个变量，又是个函数
console.log(v);// 调用结果为 [Function: v]
v();/* 函数的调用 */

控制台效果图:

• 注意: 一旦有同名的变量时下面的函数则不生效

示例代码:

var v2 = 200;
function v2(){
    console.log('这是一个函数');
}
// v2是变量 - TypeError: v2 is not a function - 表示 v2 不是一个函数
console.log(v2);
v2();

控制台效果图:

---

函数的参数

• 函数参数分类两种:

1. 形参 : 就是定义函数后的小括号叫形参 - function fun(形参)

   • 注意: 允许定义多个形参 - 形参之间使用逗号分隔

2. 实参 : 就是调用函数后的小括号叫实参 - fun(实参)

   • 注意: 形参的个数与实参不一定是一致的
   • 参的个数多于实参的个数 -> 多余的形参没有值(默认为 undefined)
   • 实参的个数多余形参的个数 -> 多余的实参没有对应的形参
   • 形参与实参根据占位符进行一一对应

示例代码:

function fun(a){// 在函数中定义一个变量，但未初始化值
    console.log(a);
}
fun(100, 200);// 为函数中定义的变量初始化值

---

return语句

• 函数的return语句

  • 注意:
  • 并不是必要的 - 可有可无
  • 作用 - 作为函数的返回值(数据内容)
  • 用法 - 一般会被编写在函数体的最后面

示例代码:

function fun(){
    console.log('一花一世界');
    return 100;
}
/* 将函数的返回值 赋值到变量中 */
 var result = fun();
 console.log(result);

console.log(fun());/* 打印函数调用的结果 */
console.log(fun);/* 打印变量的值 */

• 函数的return语句

  • 注意:
  • 的确允许不编写在函数体的最后面
  • 一旦return语句不在函数体的最后面 - return语句之后的代码都不再执行

示例代码:

function fn(){
    console.log('这是return语句之前...');
    return;
    console.log('这是return语句之后...');
}
var result = fn();
console.log(result);// 100

---

目前JavaScript得到undefined值的情况总结：

1. 定义变量，但未初始化值
2. 定义变量，并初始化值为 undefined
3. 访问数组中不存在的位置 - 默认值为 undefined
4. 在函数体调用没有定义值的形参 - 默认值为 undefined
5. 当函数定义时，没有指定返回值 - 默认返回值为 undefined

---

作用域

• 就是变量和函数都有作用域,作用域就是变量和函数的可被访问范围,控制着变量和函数的可见性和生命周期- 函数作用域就是某一个函数里的
• 函数以外的叫全局作用域
• 备注: 函数作用域中的变量叫局部变量

---

全局作用域与局部作用域

全局作用域

• 全局作用域(函数作用域之外的范围) - 全局变量

  • 全局变量的作用域 - 全局作用域 + 函数作用域
• 注意: 全局作用域不能访问局部变量

全局作用域与局部作用域示例代码对比:

var v1 = 100;
console.log(v1);

function fun(){
    /*
        函数作用域 - 局部变量
        * 局部变量的作用域 - 当前函数作用域
     */
    var v2 = 200;

    console.log(v1);
    console.log(v2);
}

console.log(v1);

fun();
// 全局作用域不能访问局部变量
// console.log(v2);

function fn(){
    console.log(v2);
}
fn();

---

局部作用域与函数的参数

• 局部变量 - 作用于当前函数作用域中

  • 局部变量的值 - 只能在当前函数作用域进行初始化

• 函数的参数 - 作用于当前函数体中

  • 参数的值(实参) - 在全局作用域中传递的

示例代码:

var num = 200;

function fun(a){
    var v = 100;

    console.log(v + a);
}
fun(num);

控制台调用图:

---

按值传递

• 是指将函数实参的变量值赋值给函数形参，使实参和输出结果一样
• 在对局部变量进行修改时，不会修改全局变量

示例代码:

/* 按值传递 */
var num = 100;/* 定义一个全局变量 */
/* 定义一个函数 */
function fun(num){/* 形参 */
    num++;
    console.log('这是函数内部的值: ' + num);// 101
}
/* 调用指定函数 - 实参传递的是全局变量的值 */
fun(num);/* 实参 */
/* 调用指定全局变量 */
console.log('这是全局作用域的值: ' + num);// 100 101


var v = 200;
function fn(){
    v++;
}
fn();
console.log(v);// 201

---

声明提前

• 表示在使用变量时，先调用变量，在对变量进行定义

  • 注意: 语法不会报错，会显示 undefined

示例代码:

console.log(num);// undefined

var num = 100;/* 定义全局变量 */
/* 定义函数 */
function fun(){
    // 全局变量与局部变量同名时 - 在当前函数作用域中只能访问局部变量
    console.log(num);// undefined

    var num = 200;/* 定义局部变量 */
    // 就近原则
    console.log(num);// 200
}
/* 调用函数 */
fun();
// 局部变量在全局作用域中无法访问 - 只能访问全局变量
console.log(num);// 100

控制台调用图: