ES6语法—箭头函数

  1. 一、箭头函数概述:
  2. 二、箭头函数语法:
  3. 三、箭头函数的特殊性:

一、箭头函数概述:

箭头函数是 ES6 里面一个简写函数的语法方式

重点: 箭头函数只能简写函数表达式,不能简写声明式函数

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
    fn: function () {} // 可以简写
}

二、箭头函数语法:

语法: var fn = (函数的行参) => { 函数体内要执行的代码 }

const fn = function (a, b) {
    console.log(a)
    console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
    console.log(a)
    console.log(b)
}

const obj = {
    fn: function (a, b) {
        console.log(a)
        console.log(b)
    }
}
// 可以使用箭头函数写成
const obj2 = {
    fn: (a, b) => {
        console.log(a)
        console.log(b)
    }
}

三、箭头函数的特殊性:

箭头函数内部没有 this,箭头函数的 this 是上下文的 this

// 在箭头函数定义的位置往上数,这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
    fn: function () {
    console.log(this)
    },
    // 这个位置是箭头函数的上一行,但是不能打印出 this
    fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
    console.log(this)
    }
}

obj.fn() // 指向obj
obj.fun() // 指向window

按照我们之前的 this 指向来判断,两个都应该指向 obj
但是 fun 因为是箭头函数,所以 this 不指向 obj,而是指向 fun 的外层,就是 window

箭头函数内部没有 arguments 这个参数集合

const obj = {
    fn: function () {
        console.log(arguments)
    },
    fun: () => {
        console.log(arguments)
    }
}
obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错

函数体只有一行代码的时候,可以不写{ },并且会自动 return

const obj = {
    fn: a => {
    return a + 10
    },
    fun: a => a + 10
}

console.log(fn(10)) // 20
console.log(fun(10)) // 20

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:ES6语法—箭头函数

文章字数:484

本文作者:Spicy boy

发布时间:2019-06-18, 18:47:49

最后更新:2021-03-30, 16:02:01

原始链接:http://www.spicyboy.cn/2019/06/18/ES6%E8%AF%AD%E6%B3%95%E2%80%94%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏