下载网站app,免费自助建站模板,搜索引擎营销的英文简称,代理服务器地址是什么函数进阶
函数提升 函数提升与变量提升比较类似#xff0c;是指函数在声明之前即可被调用 好处#xff1a;能够使函数的声明调用更灵活 函数提升出现在 相同作用域 当中 //可调用函数
fn()//后声明函数
function fn() {console.log(可先调用再声明)
} 注意#xff1a;函数表…函数进阶
函数提升 函数提升与变量提升比较类似是指函数在声明之前即可被调用 好处能够使函数的声明调用更灵活 函数提升出现在 相同作用域 当中 //可调用函数
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 xy
}
fn(1,2) //3
//箭头函数 一行代码的时候可以省略大括号也可以省略return
const fn (x,y) xy
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)
}) 路漫漫其修远兮吾将上下而求索
