JavaScript 函数

JavaScript 函数

函数就是封装起来可以被重复使用的代码块

函数的优点

• 使代码更加简洁
• 方便代码的修改和维护
• 使程序运行更加高效

函数的封装(创建 声明)和调用

封装

1. 通过function关键字封装

function 函数名(参数) {函数体:被封装的代码
}

2. 匿名函数

• 将一个函数直接赋值给一个变量

  let fn = function() {};

• 将一个函数直接赋值给某个对象的事件

   divObj.onclick=function() {}

3. 实例化构造函数

 let fn = new Function();

调用

1. 函数名(); 变量名();
2. 通过触发事件调用;
3. 自调用

(function() {})();

函数的参数

根据输入值的一些设置可以让函数多次运行产生不同的结果

形参和实参

• 形参：当函数声明或者定义的时候使用的参数(变量)
• 实参：当我们对函数调用的时候传递的参数(值)

function fn(形参) {使用形参来完成操作
}
fn(实参);

参数的个数和类型

• 参数的个数是没有上限的，但是一般不宜太多
• 参数可以是任意的数据类型

参数的默认值

• 通过判断语句实现
• 通过逻辑运算表达式来实现
  • 或运算
  • 三元表达式
• 直接在形参位置赋值

参数的返回值

函数调用表达式的值 默认是undefined

• 通过return语句可以设置返回值
• return语句之后的代码都不会执行
• return 后面只能返回一个值
• 在一个函数当中只会有一个return语句被执行

arguments 对象和模拟函数重载

• arguments 对象会自动保存所有的实参的信息
• arguments[n] 获取第n+1个实参
• arguments.length 获取到当前实参的个数
• 根据函数参数的类型或者个数的不同实现不同的函数体

作用域

变量或者函数可以被访问到的范围

js执行环境（执行上下文 context）

• 全局执行环境 – 所有的js代码最终执行的位置
• 函数执行环境 – 每调用一次函数，从函数体代码开始进入函数执行环境到函数体代码结束退出函数执行环境
• eval()执行环境

变量的作用域

• 声明变量所在的执行环境变量的，如果是全局执行环境中声明变量，这个变量叫做全局变量，可以在全局执行环境和所有函数执行环境中被访问到，如果是在某个函数执行环境中声明变量，这个变量就叫做局部变量，只能在当前的函数执行环境中被访问到。

形参也是局部变量

好处

• 保证全局变量不受污染
• 在变量命名的时候可以更加方便
• 节省计算机内存的消耗或占用

作用域链

• 当程序进入一个函数执行环境还未退出就进入到下一个执行环境的时候，js会将这两个执行环境关联起来。当我们在内部的执行环境访问某一个变量的时候，js会根据当前执行环境的关联关系从当前的执行环境开始一直向上寻找，直到全局环境为止。这种变量作用域的存在方式叫做作用域链。

高级使用

递归函数

在函数内部自己调用自己 一般递归函数都会有一个出口（不再继续调用的情况）。

回调函数(callback)

将一个函数作为另外一个函数的参数传入的时候，这个函数就被称为回调函数。

• 在函数声明的时候，不用把所有要执行的操作都定义好，可以预留一部分让函数的调用者自己定义。通过封装一个匿名函数作为参数传递的方式就是回调函数
• 回调函数一般是一个匿名函数，但是可以通过传递函数名的方式实现

闭包函数

• 当函数运行结束之后，函数内部定义的局部变量没有被销毁的一个状态
• js内部变量内存分布机制
  • 栈区
  • 堆区
  1. 栈区中保存的都是固定长度的值
  2. 进行值查找的效率是更高的
  3. js初始类型的值都是保存在栈区中的
  4. js引用类型的值都是保存在堆区中的
• js垃圾回收机制（内存维护机制）
  • 在函数运行过程中声明的变量会在函数运行结束之后会在内存中进行销毁

箭头函数

 let fn = function (a,b) {return a + b;}let r = fn(1,1);console.log(r);//let fn2 = (a,b) => a+b;let r2 = fn2(1,1);console.log(r2);//没有参数时let fn3 = function() {return 10;}let fn4=()=>10;console.log(fn4());// 只有一个参数时let fn5 = function(n) {return n * n;}let fn6 = n =>n*n;console.log(fn5(5));// 多行代码时let fn7 = function() {let n=1;console.log(n);return n;}let fn8=()=>{let n=1;console.log(n)};fn7();//右边是对象时let fn9 = function() {return {name:"zhangsan"};}let fn10 = ()=>({name:"zhangsan"});

块级作用域

• 在ES6当中，let、const会将if(){}、 for(){}、 while(){}、 do{}while();、 {}这些结构识别为一个类似于函数的单独的执行环境

内置顶层函数

js自带的拥有全局作用域的函数

• escape(); ----对汉字进行编码
• unescape(); ----对编码后的汉字进行解码
• eval(); ----执行字符串格式的代码
• Number(); ----将其他的数据类型转换为数值类型
• parseInt(); ----将字符串类型转化为整数
  • Number();小数输出后还是小数，parseInt();小数输出后为整数
  • Number();在字符串之前的数字不识别，parseInt();识别
  • Number();中""输出后为0，parseInt();输出为NaN
• parseFloat(); —建华字符串类型转化为整数/小数
• String(); ----将其他数据类型转换为字符串
• Boolean(); ----将其他数据类型转换为布尔值
• isNaN(); ----判断某个值是不是不能转化为数值类型

数据类型转换

• 强制数据类型转换： Number();、 String();、 Boolean();
• 隐式数据类型转换：

  • - * / 隐式调用 Number();

  • “10” > 5 隐式调用 Number();

  • !10 隐式调用 Boolean();

  • “hello”+123 隐式调用 String();

  • 10?5:2; 隐式调用 Boolean();

  • if(10){} 隐式调用 Boolean();

    ​