JavaScript函数1

犀牛书的函数内容

• 函数是什么？
• 定义函数
• 调用函数
• 函数参数
• 函数作为值
• 闭包
• 函数的属性和方法
• 构造函数
• 函数链式编程思想

函数是什么？

• 函数是语句的集合

• 函数是执行特定任务的代码块

• 函数是可重复执行特定任务的代码块。三层含义
  函数是语句的集合
  每个函数都执行特定的任务，一般讲，函数都必须求值
  函数只定义一次，可以调用无数次

• 注意：如果只定义函数不调用，那么函数永远不会执行。

定义函数

函数声明

• 就是使用function关键字定义的函数。

function 函数名(形参1，形参2，...形参N){
//语句的集合
return
alert（"hello2"）//不会执行，return终止函数执行
}

语法：

• function：定义函数的关键字
• 函数名：是一个标识符。我们约定：使用动词命名函数。
• 形参：形式上的参数。形参用于接收实参。实参就是程序运行中操作的值。
• return：返回语句运行的结果。特点：终止函数执行。

函数表达式

• 函数表达式也是使用function关键字定义的函数表达式。

function (形参1，形参2，...形参N){
//语句的集合
return
}

函数表达式和函数声明的区别：

• 有名和无名
• 语句和表达式
• 函数声明语句会创建变量，函数表达式不会。
• 函数声明变量会提升，函数表达式不会

箭头函数

是什么
箭头函数是一种语法糖：让我们使用简洁的箭头定义语法。
示例：

(a,b) =>{
let c = a+b
return c
}

(a,b) =>{return a+b}
（a,b）=> a+b

a => a*a

function fn2(){consloe.log("hello")}
()=>console.log("hello")

语法：

• 箭头用于分割参数和函数体
• 省略function关键字
• 省略函数名
• 如果函数体只有一条return语句，那么可以省略return关键字和大括号
• 如果只有一个参数，可以省略小括号
• 如果没有参数，必须有小括号

箭头函数的特点

• 箭头函数是表达式

调用函数

五种方法：

• 函数调用：函数调用是调用函数的常规方法：函数名（arg）

• 方法调用：
  方法：如果一个对象的属性是一个函数，我们就说它是一个方法。
  方法调用是通过对象的属性调用函数：对象名.方法（）

• 构造函数调用：new构造函数（）：Number String Array Object Boolean

• 间接调用：通过函数自身的方法调用函数call（）apply（）bind（）

• IIFE:自调用：自己调用自己，自执行

• 隐式调用

函数参数的基础知识

参数是什么
参数是函数调用时，传入到函数体内的值。在函数体内对值进行处理，把处理结果使用return返回出去。

参数的分类

• 形参：形式上的参数。形参出现在定义函数定义时。行参是函数体内的局部变量。形参用于接收实参，英文:parameter => para
• 实参：实际传入的参数，实参出现在调用函数时。实参通过形参进入函数体内，英文：arguments => args

形参的默认值

定义函数时不检查参数类型，调用函数时不坚持参数数量。

示例

//JS:定义函数时它不检查参数类型 调⽤函数时不检查参数数量
function sum(a=0, b=0) {
//传统检测参数的⽅法
// if(b){
// return a + b
// } else if(a) {
// return a
// } else {
// return 0
// }
//在繁琐的检测参数的背景下，形参默认值语法出现
return a + b
 }
console.log(sum())//NaN => 0
console.log(sum(2))//NaN => b = 0 || 忽略b
console.log(sum(2,9))//11
console.log(sum(2,9,5))//11

剩余参数

arguments是函数体内的一个内置数组，通过它能获取到所有的实参

• 剩余参数是取代arguments对象的一种方案。用于接收多余的实参。
• 剩余参数是一个标识符，标识符前面有三个点：...args
• 剩余参数是一个数组
• 剩余参数必须放在列表参数的最后一位。
• 剩余参数是先传入实参，再传入剩余参数。

实列：找最大数

 function max(a,...aaa){
            let maxValue = -Infinity
            for(n of aaa){
                if(n>maxValue){
                    maxValue = n
                }
            }
            return maxValue
        }
        let resule = max(1,10,100,1000,-10000)
        console.log(resule )//1000

?. （可选链运算符）

• ?. 可以无限链下去，不论有多少属性，只要有最后可以访问到属性，就会直接赋值最后的属性值。否则当任何一个链出现问题，立刻停止，而后赋值undefined。

函数作的用途

1. 函数的本职责功能：复用代码
   通过语法定义一种形式，通过这种形式我们可以重复调用代码，从而增强代码的复用性。

2.函数作为值：把函数看作数据。

• 把函数赋值给一个变量。

let sing = functiom(){
console.log("嘿嘿嘿")
}

• 把函数赋值给对象的属性

let student = {
name : "zhangsan",
age:19
sing:function (){console.log("hhh")}
}

• 把函数赋值给数组元素

let arr = [1,2,student.sing]

• 把函数赋值给形参
  sort()方法帮助我们理解函数

(a,b,function(){
console.log("hello)
}) =>{

}

array.sort

定义:array.sort()对数组元素就地排序并返回排序后的数组。
语法1：在不传递参数的情况下，使用sort的工作原理

let arr = [20,3,1,100]
arr.sort()
console.log(arr)//1,100,3,20
let arr = [20,3,1,100]
//1 -> 49 2->50 3->51 1 ->49
arr.sort()
console.log(arr);//[ 1, 100, 20, 3 ]
let arr2 = ['d','a',3,'A','y']
arr2.sort()//? [3,'A','a','d','y']

• 将数组元素转字符串然后比较它们的UTF-16编码。
• 默认升序排序
• 如果编码相同，那么按照原有顺序排序

语法2：使用比较函数排序的语法

array.sort(compareFun)

Compare:⽐较 fun：function函数
copareFun: 这是ECMAScript的内置函数，内置在sort函数体内。
在⽐较两个值的时候，将值发送给⽐较函数，⽐较函数会返回负值、0、正直

• a>b 升序
• a<b 降序

let arr = [20,3,1,100]
arr.sort((a,b) => a > b)//隐式return
console.log(arr);

函数作为命名空间

函数的⽤途：保证函数体内的变量不会污染到全局命名空间

var a = '你好'
;(function (){
 //假设下⾯是外来的可复⽤代码，放在函数体内，a就变成了局部变量，避免与外部的全局变量a发⽣冲突
let a = 'hello'
var aa = 'hell'
}())
// console.log(a)
console.log(window.a);//变量a的副作⽤是影响到了window对象，因为在全局下定义的属性都会成为window对
象上的⼀个属性
console.log(window.fn)//变量fn的副作⽤是影响到了window对象，因为在全局下定义的函数都会成为window
对象上的⼀个⽅法
//所以我们可以去掉函数名，添加⼩括号，改成⾃执⾏函数来解决window对象上的副作⽤
;(function(){
let a = 'hello'
var aa = 'hell'
}())

函数执行上下文（预解析)

Function Execution Context

作用域

作用域：发生作业的区域

• 发生作业：可以读可以谢
• 区域：{} || function

变量作用域

解释：
定义变量的区域。
变量定义在哪个区域就在哪个区域发声作用。
变量作用域决定了变量的可见性/可访问性。在这个区域内变量可以被访问到，在这个区域以外变量不可以被访问到。
分类

• 全局作用域
  局部以外区域就是全局作用域。
• 局部作用域
  函数作用域：指函数体内使用var关键字定义的变量，会创刊函数作业域。
  块级作用域：指大括号内使用let 或const关键字定义的变量或常量，会创建块级作用域。

作业

• 作业1：请你录视频讲解 ?. 的使⽤⽅法
• 作业2：封装⼀个函数，传⼊任意数量的数字，可以返回最⼤值（arguments)
• 作业3：记住字符对应的编码
  0 - 9 48 - 57
  A - Z 65 - 90
  a - z 97-122

1. 执⾏上下⽂
2. 变量对象
3. 作⽤域链
4. 闭包
5. 函数的length属性
6. 函数的name属性
7. 函数的prototype属性
8. 函数中的this
9. 函数的call()⽅法
10. 函数的apply()⽅法
11. 函数的bind()⽅法
12. 函数式编程

执行上下文

• 英文：Execution Context
• execute：执行，运行
• 可执行文件的扩展名：exe
• Context：上下文，语境

定义：

执行上下文特指js函数的执行环境。有两种执行上下文：

• 全局执行上下文：在全局下运行的环境。即函数可以运行在全局环境内。全局执行上下文在脚本开始运行的时候创建
• 函数执行上下文：在函数内运行的环境。即函数可以运行在另一个函数内。函数执行上下文是在函数调用时创建的。

在每个函数执行上下文的内部。可以访问的变量分为两种。

• 自身变量
• 父级变量
• 祖先级变量
• 全局变量

总结：执行上下文是函数运行的环境。编辑器通过变量对象创建函数作用域。当我们在代码中

• 编译器首先会在当前作用域下检查有没有声明
• 如果找不到，编译器会向当前作用域的父级查找。
• 以此类推
• 最后找到全局，如果还是没有找到，则会抛出未定义的错误。

变量对象

定义：变量对象是执行上下文中的一个内置对象
在这个对象里保持了当前执行上下文中可以访问到的变量，函数的列表

作用域链

作用域链就是为函数访问变量的规则
作用域链就是为函数创建作用域的规则。
作用域是通过执行上下文中的变量对象实现的

闭包

定义:"闭包"就是能访问到外部特殊变量的内部函数。

• 闭包是组合
• 必须有一个镶套函数
• 必须有一个引用

用途：主要用于保护特殊变量。如果你在写函数的过程中，遇到语法特殊变量。

闭包的生命周期

• 开始于外部函数调⽤
• 结束于内部函数执⾏完毕

Function.length属性

定义：返回参数的数量。不包含剩余参数。
length是一个读属性，不能写
没有参数时，Function.length为0.

Function.name属性

• 返回函数名
• 用途：记录调试信息

Function.prototype属性

定义：
Function.prototype属性返回函数的原型对象。
在JavaScript中，prototype对象是实现面向对象的一个重要机制。

每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

this

this是一个关键字
this是一个

• 方法调用，this指向对象
• 独自使用，this指向全局对象
• 函数名调用，this指向全局对象
• 函数名调用：（严格模式）下，this是未定义
• 事件函数中this指向接收事件的元素。
• 函数的方法 call()，apply(),and bind()中的this指向 anyobject.意6
  对象

this永远指向调用函数的主人。

Function.call(obj,arg1,arg2,...agrN)

定义：call()方法用于间接调用。

注：如果是箭头函数，那么会忽略第一个值

用法1：当没有参数时，间接调用函数等价于直接调用

 function fn(){
            console.log(this)
        }
        fn()//window
        fn.call()//window

用法2：当传入第一个参数时，就定于修改了this指向。第一个参数可以是任意对象。

let obj = {x:1}
      function fn(){
            console.log(this)
        }
        fn(1)//window
        fn.call(obj)//Object { x: 1 }

用法3：call方法的第二个参数用于设置实参。

let obj = {x:1}
      function fn(a,b){
            console.log(this)
        }
        fn()//window
        fn.call(obj,1,2)//1 2 Object { x: 1 }

Function.apply(obj,arg1,arg2,...aegN)

定义：Function.apply与Function.call差不多，只不过传入的实参必须是数组罢了。

注：如果是箭头函数，那么会忽略第一个值

let obj = {x:1}
      function fn(a,b){
        console.log(a,b)
            console.log(this)
        }
        fn.apply(obj,[1,2])//1 2 Object { x: 1 }

Function.bind()

bind：绑定
定义：把函数绑定到对象。
语法：

函数名.bind(要绑定的对象)
function.bind(obj,arg1,agr2,arg3...argn)

返回值：
返回一个函数的副本。
参数：
obj ： this的指向
Arg：实参列表

bind()返回函数的name属性由单词“bound”和调用bind()的函数的name属性构成。

 function fn(a){//要绑定的函数
           console.log(this)
        }
        let obj = {c:3}//要绑定的对象
        let g = fn.bind(obj)//调用g(c)会在obj上调用到fn（）
        console.log(g)//function fn()length: 1name: "bound fn"