1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

箭头函数

使用 => (箭头符号)也能定义一个函数,很多编程语言都支持这种写法, JavaScript 也不例外。这种写法被称为箭头函数。

下例是一个求和的箭头函数:

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

alert(sum(2, 5)) // 7

单行箭头函数

如果我们的箭头函数内部只有一行代码,那么可以简写成以下形式:

$$jsdemo$$
$$edit$$
let sum = (a, b) => a + b

alert(sum(2, 5)) // 7

单行箭头函数的运算结果会自动 return ,不用再写一个 return 语句。

箭头函数的 this 值

之前的章节学过,对象中的函数中的 this 值指向的是对象自身。

而如果这个方法使用的是箭头函数的写法,那么 this 值将是外部的 this 值,可以简单理解成对象所在上下文的 this 值。

$$jsdemo$$
$$edit$$
let mingren = {
    name: "鸣人",
    normal: function () {
        console.log(this)
    },
    arrow: () => console.log(this),
}

mingren.normal() // {name: '鸣人', normal: ƒ, arrow: ƒ}

mingren.arrow() // window
console.log(this) // window

当我们把鸣人对象放到柯南中时,鸣人的箭头函数的 this 值等同于 getMrthis 值也就是柯南对象。

$$jsdemo$$
$$edit$$
let kenan = {
    name: "柯南",
    getMr: function () {
        let mingren = {
            name: "鸣人",
            arrow: () => console.log(this),
        }

        return mingren
    },
}

let mingren = kenan.getMr()
mingren.arrow() // {name: '柯南', getMr: ƒ}

练习

1.使用箭头函数改写以下常规函数。

function callFunction(func, arg) {
    return func(arg)
}

function sayHello(message) {
    alert(message)
}

callFunction(sayHello, "北京你好")

2.以下程序的输出结果是?

let mingren = {
    name: "鸣人",
    getWife() {
        return {
            name: "雏田",
            getBrother: () => ({
                name: "宁次",
                getName: () => this.name,
            }),
        }
    },
}

alert(mingren.getWife().getBrother().getName()) // 输出结果?