文章目录
ES6 箭头函数
ES6 中 新的书写函数的方式
是对于函数表达式的简写
语法 () => {}
() 书写形参的位置
=> 箭头函数的标志
{} 书写代码的位置
特点
1. 可以省略小括号不写
当形参只有一个的时候可以不写小括号
2. 可以省略大括号不写
当函数体只有一句话,可以不写大括号,
会自动把这句话的结果当做函数的返回值
3. 箭头函数没有arguments
arguments: 是函数参数的默认集合,天生存在
4. 箭头函数没有this
箭头函数内的this 就是该作用域外部作用域的this
箭头函数外面的函数this是啥,箭头函数this就是啥
注意: 事件处理函数不要用箭头函数,会改变this指向
5. 箭头函数不能当做构造函数使用
不能和 new 关键字连用
箭头函数语法
1.省略()不写
当形参只有一个的时候可以省略小括号不写
const fn = a => {
return a + 10;
};
console.log(fn(5));
2.省略{}不写
当{}只有一句话,可以省略{}不写, 而且会自动把这句话当做函数的返回值
const fn = a => a + 10
console.log(fn(5));
const arr = [
{id:1, username:'tom',age: 18},
{id:2, username:'jerry',age: 19},
{id:3, username:'nick',age: 20},
]
const id = 3
// 找到数组中id为3的这一项 --> find
const res = arr.find(function(item){
return item.id === id
})
console.log(res);
const res = arr.find(item=> item.id === id)
console.log(res);
3.箭头函数没有argument
function fn() {
// arguments 表示函数参数的集合
console.log(arguments, arguments.length, arguments[0]);
}
fn(10, 20, 30, 40)
const fn = () => {
console.log(arguments);
}
fn(10, 20, 30, 40)
4. 箭头函数没有this
const fn = () => {
console.log(this);
}
fn()
const obj = {
a: 100,
f: ()=>{
console.log(this);
}
}
obj.f()
document.onclick = () => {
console.log(this);
}
document.onclick = function() {
console.log(this); // 事件处理函数的this指向事件源document
var fn = () => {
console.log(this, 1);
}
fn() // 箭头函数定义在事件处理函数作用域中,this指向父级
}
箭头函数案例
需求:
希望这个this指向的是li
打印出来li的内容
案例1-定时器
const lis = document.querySelectorAll('li')
lis.forEach(function (li) {
li.onclick = function () {
setTimeout(function () {
console.log(this);
// 希望这个this指向的是li
// 打印出来li的内容
console.log(this.innerHTML);
}, 200);
}
})
这里的this在定时器内, 定时器里的函数是自动执行, 指向window, 我们需要将this指向li, 所以接下来修改代码
案例2-事件处理函数
const lis = document.querySelectorAll('li')
lis.forEach(function (li) {
li.onclick = function () {
var fn = function() {
console.log(this);
console.log(this.innerHTML);
}
setTimeout(fn.bind(li), 200);
}
})
这里的在点击中触发事件click, 所以this指向事件源li
案例3-使用that
const lis = document.querySelectorAll('li')
lis.forEach(function (li) {
li.onclick = function () {
const that = this
setTimeout(function () {
console.log(that);
console.log(that.innerHTML);
}, 2000);
}
})
这里使用that, 是that变量提前将this存起来再使用, 也可以使用其他变量将this存起来使用, 通俗的写法就是写成that或者_this
案例4-使用箭头函数
const lis = document.querySelectorAll('li')
lis.forEach(function (li) {
li.onclick = function () {
setTimeout(()=>{
console.log(this);
console.log(this.innerHTML);
}, 200);
}
})
箭头函数的this不取决于调用取决于定义, 定义在哪个作用域就是指向谁, 这里的箭头函数定义在了事件处理函数中, 所以this指向事件源
注意: 这里的定时器已经不再是原来的定时器, 原来的定时器里面的参数写的是普通函数, 将普通函数改成箭头函数之后就按照箭头函数的情况考虑
案例4-使用箭头函数-加强版
const lis = document.querySelectorAll('li')
lis.forEach(li => {
console.log(this);
li.onclick = ()=> {
setTimeout(()=>{
console.log(this);
console.log(this.innerHTML);
}, 2000);
}
})
这次把事件处理函数也改成了箭头函数, 那么同样是this指向上一级(父级)作用域, 这里指向了window