登录
原创

ES6-箭头函数

发布于 2021-10-12 阅读 34
  • 前端
  • JavaScript
  • ECMAScript 6
原创

箭头函数形式:(参数) => {、、、}

ES6中可以可以将函数简写成- - -箭头函数

ES5(javaScript)中,函数是这两种形式书写:

// 形式1
function sum(a, b) {
   return a + b
}

// 形式2
var sum2 = function(a, b) {
    return a + b
} 

ES6中可以简写成

let sum = (a, b) => {
    return a + b
}

如果只有一个参数,函数语句只有一句,可以简写成这样:

let sum = a => a

上面这句相当于:

let sum = (a) => {
   return a
}

箭头函数特点

1. this 指定定义时所在的对象,而不是调用时所在的对象

2. 不可以当做构造函数

3. 不可以使用arguments对象

举例1.this 指定定义时所在的对象,而不是调用时所在的对象- - -
ES5中this指向调用时所在的对象,ES6中this指向义时所在的对象

例如:

let btn = document.querySelector('button')
btn.addEventListener('click', function () {
     console.log(this)

     setTimeout(function() {
         console.log(this)
     }, 1000)
})

本来想要点击后,延迟1秒打印按钮对象,但是打印出了window对象:

image.png

因为setTimeout是window对象的方法,想要点击后,打印按钮对象,可以使用箭头函数:

let btn = document.querySelector('button')
btn.addEventListener('click', function () {
     console.log(this)

     setTimeout(() => {
            console.log(this)
        }, 1000)
})

打印结果:

image.png

举例2.不可以当做构造函数- - -

function Student(name, age) {
        this.name = name
        this.age = age
    }
    let s1 = new Student('史迪仔', 2)
    console.log(s1)

    let Student2 = (name, age) => {
        this.name = name
        this.age = age
    }
    let s2 = new Student2('蓝胖子', 3)
    console.log(s2)

打印结果:箭头函数写构造函数会报错

image.png

举例3.不可以使用arguments对象- - -

但是可以用rest参数来实现arguments对象的效果:

 let foo = function() {
        console.log(arguments)
    }
    foo(1, 2, 3)

    let foo2 = () => {
        console.log(arguments)
    }
    foo2(1, 2, 3)

    let foo3 = (...args) => {
        console.log(args)
    }
    foo3(1, 2, 3)

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报