ES6 箭头函数

箭头函数

1.ES6允许使用 箭头 (=>)来定义函数

//常规声明
let fn=function(){函数体}
//简化声明
    let fn = (X, Y) => {
        return X + Y
    }
	let sum = fn(1, 2)
	console.log(sum)
//此时结果是 3

2.箭头函数this

	// this是静态的 this时钟指向函数声明时所在作用域下this的值
	function GRTs(){
		console.log(this.name)
	}
	let getName2=()=>{
		console.log(this.name)
	}
	//
	window.name='野猪佩奇'

this指向

function GRTs(){
		console.log(this.name)
	}
	let GRTs2=()=>{
		console.log(this.name)
	}
	window.name='野猪佩奇'
	const school={
		name:'小猪'
	}
	GRTs2.call(school)//this指向还是声明时候作用域的对象
	GRTs.call(school) //this指向为了 school对象

结论

this 箭头函数无法使用call更改this 指向 因为是静态的 始终指向在声明时作用域下的this 默认也就是window

3.箭头函数不能构造实例化对象

//不能作为构造实例化对象使用
	let Person=(name,age)=>{
			this.name=name;
			this.age=age;
	}
let me=new Person('野猪',18)
//结果会报错

4.箭头函数不能使用arguments变量

//		3.箭头函数不能使用arguments变量
		let fn=(arguments)=>{
			console.log(arguments)
			//此时输出的值为 1
           
		}
		fn(1,3)

arguments 只会被当成一个形参 而不是像JS一样当成一个类数组

###5.箭头函数的缩写

//省略前
let add=(n)=>{
    return n*n
}
let sum=add(9)
//结果为81

//省略后
let add=n=>n*n
let sum=add(9)
//结果为81

省略花括号,当函数体只有一条语句才能省略,此时return必须去除return

箭头函数实例

//普通方法解决 this 作用域问题
let box=document.querySelector('.box')
    box.addEventListener('click',function(){
       console.log(this)
       let that=this
        let time=setInterval(function(){
            //此时的this 指向的是windows
            //我们在外部存储一个this 即可
                console.log(that)
            //此时我们输出的 that也就是目标this了
        },1000)
    })
//箭头函数解决 this作用域问题

let box=document.querySelector('.box')
    box.addEventListener('click',function(){
       console.log(this)
        let time=setInterval(()=>{
                console.log(this)
            //在 click事件函数中 this就是box这个对象 
            //使用箭头函数时候会指向声明时(也就是box事件处理函数的this)作用域下的this
        },1000)
    })

• 当使用箭头时候 箭头函数中的this 指向的是 声明作用域时候的this也就是上侧代码 事件处理函数里面的this

箭头函数实例2

//普通方法
const arr = [1, 5, 7, 69, 8, 9, 10]
    const result = arr.filter(function (item) {
        if (item % 2 == 0) {
            return true
        } else {
            return false
        }
    })
    console.log(result)
    //箭头函数方法
    const resu=arr.filter(item =>item%2===0)
    console.log(resu)

总结

• 箭头函数适合与this 无关的回调,比如 定时器

• 箭头函数不适合与this 有关的回调,比如 事件回调(事件处理函数)

• 箭头函数也不适合对象的 方法

• 当使用箭头时候 箭头函数中的this 指向的是 声明作用域时候的this也就是上侧代码 事件处理函数里面的this

• 箭头函数简化时候 形参=>函数体>