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

控制台调用图: