网站建设好推荐无锡今日头条新闻
函数进阶
函数提升
函数提升与变量提升比较类似，是指函数在声明之前即可被调用
好处：能够使函数的声明调用更灵活
函数提升出现在 相同作用域 当中
//可调用函数
fn()//后声明函数
function fn() {console.log('可先调用再声明')
} 注意：函数表达式不存在提升的现象
//调用表达式，不存在提升现象
bar() //错误var bar = function() {console.log('函数表达式不存在提升哦')
}
函数参数
动态参数
arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参
function sum() {// console.log(arguments) arguments是伪数组let s = 0for (let i = 0; i < arguments.length; i++) {s += arguments[i]}console.log(s)}sum(3, 3) //6 总结：
1. arguments 是一个伪数组， 只存在于函数中
2. arguments 的作用是动态获取函数的实参
3. 可以通过for循环依次得到传递过来的实参
剩余参数 (提倡使用)
剩余参数允许我们将一个不定数量的参数表示为一个数组
function getSum(...other) {console.log(other) //使用的时候不需要写...//other 得到 [1,2,3]
}
getSum(1,2,3)- ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
- 借助 ... 获取的剩余实参，是个真数组,只存在于函数中
function getSum(a,b,...other) {console.log(a,b,other) //里面的 other 也可以换成其他字母哦
}
getSum(1,2,3,4) //1 2 [3,4] 展开运算符(…)
数组中使用, 将一个数组进行展开，不会修改原数组
典型运用场景：
求数组最大值(最小值)
const arr = [1,2,3,4]
console.log(...arr) //1 2 3 4//...arr === 1,2,3,4
console.log(Math.max(...arr)) //4
console.log(Math.min(..arr)) //1 合并数组
const arr1 = [1,2]
const arr2 = [3,4]
const arr3 = [...arr1,...arr2]
console.log(arr3) //[1,2,3,4]箭头函数（重要）
引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁
更适用于那些本来 需要匿名函数的地方
基本写法
//普通写法
const fn = function () {console.log('我是普通函数哦')
}
fn()//箭头函数
const fn = () => {console.log('俺是箭头函数')
}
fn() 只有一个参数可以省略小括号
//普通函数
const fn = function (x) {return x + x
}
consle.log(fn(1)) //2//箭头函数
const fn = x => {return x + x
}
console.log(fn(1)) //2 如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值
//普通函数
const fn = function(x,y){return x+y
}
fn(1,2) //3
//箭头函数 一行代码的时候可以省略大括号，也可以省略return
const fn = (x,y) => x+y
console.log(fn(1,2)) //3//更简洁的语法
const form = document.querySelecor('form')
form.addEventListener('click', ev => ev.preventDefault()) 加括号的函数体返回对象字面量表达式
const fn1 = uname => ({name : uname})
console.log(fn1('俸涛'))
箭头函数属于表达式函数，因此不存在函数提升
箭头函数参数
箭头函数没有 普通函数的arguments 动态参数，但是有 剩余参数 ..args(args可以用任意字母替代)
const getSum = (...args) => {let sum = 0for(let i = 0; i < args.length; i++){sum += args[i]
}
return sum //注意函数体有多行代码时，要用return
}
console.log(getSum(1,2,3)) //6箭头函数 this
箭头函数更适用于那些本来 需要匿名函数的地方
箭头函数不会创建自己的this ,它只会从自己的作用域链的 上一层 沿用this
console.log(this) //此处为 windowconst sayHi = function(){console.log(this) //普通函数指向调用者 此处为window
}
sayHi()const sayHi = () => {console.log(this) //箭头函数此处this为 window，并不是window调用了此函数，而是上一层作用域的this
}
sayHi()btn.addEventListener('click',function(){console.log(this) //当前this 指向 btn
})btn.addEventListener('click',() => {console.log(this) //当前this 指向 window
})//对象方法箭头函数 this
const user = {name:'小明'，//该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this) //指向 window 不是 user
}
}
user.walk()const user = {name:'小明',sleep: function () {console.log(this) //指向 userconst fn = () => {console.log(this) //指向 user //普通函数的this 指向的是它的调用者，箭头函数的this指向的是其上一层的调用者
}
//调用箭头函数
fn()}
}
user.sleep() 在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此
DOM事件回调函数为了简便，还是不太推荐使用箭头函数
//获取DOM 节点
const btn = document.querySelector('.btn')//箭头函数 此时 this 指向了 window
btn.addEventListener('click', () => {console.log(this)
})//箭头函数 此时 this 指向了 DOM对象
//所以推荐使用这种情况
btn.addEventListener('click',function() {console.log(this)
})路漫漫其修远兮，吾将上下而求索