箭头函数的使用及注意事项【自学笔记】

语法

省略函数function，然后在（）后面加上=>{}
例

const fn = function（）{
	
}

改为

const fn = （）=> {

}

如果只有一个形参时可以省略小括号（）

例

const fn = item => {

}

有两个形参或以上时箭头前面必须加上小括号

例

const fn = （item1，item2）=>{

}

函数内有return且只有一行代码的时候可以省略大括号{ }和return并且写成一行

例

const test = ()=>{
	return '111111'
}

改为
const test = () =>‘111111’

但是如果返回的是一个对象须在大括号外面加上小括号,否则系统无法识别

例

const test = () => {
	return {
		name: '坤哥',
		age: 2.5
	}
}

改为

const test = () => ({
	name: '坤哥'
	age: 2.5	
})

箭头函数的this指向的是父作用域

例

const rel = document.querySelector('#rel')
        rel.addEventListener('click', item => {
            console.log(this)//指向的是window
            const test = () => {
                alert(11)
                console.log(this) //指向的是window
            }
            console.log(test());
})

const rel = document.querySelector('#rel')
       rel.addEventListener('click', function(item) {
           console.log(this)//指向的是rel
           const test = () => {
               alert(11)
               console.log(this) //指向的是rel
           }
           console.log(test());
})

箭头函数无法访问arguments，无法new