犀牛书的函数内容
- 函数是什么？
- 定义函数
- 调用函数
- 函数参数
- 函数作为值
- 闭包
- 函数的属性和方法
- 构造函数
- 函数链式编程思想
函数是什么？
-
函数是语句的集合
-
函数是执行特定任务的代码块
-
函数是可重复执行特定任务的代码块。三层含义
函数是语句的集合
每个函数都执行特定的任务，一般讲，函数都必须求值
函数只定义一次，可以调用无数次 -
注意：如果只定义函数不调用，那么函数永远不会执行。
定义函数
函数声明
- 就是使用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。
函数作的用途
-
函数的本职责功能：复用代码
通过语法定义一种形式，通过这种形式我们可以重复调用代码，从而增强代码的复用性。
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
- 执⾏上下⽂
- 变量对象
- 作⽤域链
- 闭包
- 函数的length属性
- 函数的name属性
- 函数的prototype属性
- 函数中的this
- 函数的call()⽅法
- 函数的apply()⽅法
- 函数的bind()⽅法
- 函数式编程
执行上下文
- 英文：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"
网友评论