ES6指北【2】—— 箭头函数

DobbyKim 发布于2019-08-22 14:57 / 3292人阅读

摘要：箭头函数基本语法函数语法具名函数匿名函数三句话第一句话声明第二句话声明匿名函数第三句话把匿名函数赋值给箭头函数语法特点只能做赋值，不能做声明第一种写法完全写法不省略参数个数，不省略函数体花括号参数个数函数体内语句个数第二种写法省略参数括号参

1.箭头函数基本语法 1.1 ES3 函数语法

// 具名函数
function xxx(arg1, arg2) {
    console.log(arg1)
    console.log(arg2)
    return arguments
}

// 匿名函数(三句话)
let xxx = function (arg1, arg2) {
    console.log(arg1)
    console.log(arg2)
    return arguments
}

// 第一句话 声明xxx
// 第二句话 声明匿名函数
// 第三句话 把匿名函数赋值给xxx

1.2 箭头函数语法

特点：只能做赋值，不能做声明

    第一种写法【完全写法 —— 不省略参数个数，不省略函数体花括号】
    1.参数个数 >= 2
    2.函数体内语句个数 >= 2

    let xxx = (arg1, arg2) => {
        console.log(arg1)
        console.log(arg2)
        return arg1 + arg2
    }

    第二种写法【省略参数括号】
    1.参数只有一个
    2.函数体内语句个数 >= 2
    let xxx = arg1 => {
        console.log(arg1)
        return arg1
    }

    第三种写法【省略函数花括号和return】
    1.参数个数 >= 2
    2.函数体内语句只有一句，且这一句会被return
    let xxx = (arg1, arg2) => arg1 + arg2
    // 如果你加了花括号，就必须把return同时加上去才能够返回arguments
    let xxx = (arg1, arg2) => {
        return arg1 + arg2
    }

2.为了搞定难搞的this，我们搞出了箭头函数

ES3 支持 this，关于this在ES3中的使用
请看this总结【1】—— this概览和this总结【2】—— call/apply和bind
ES6 的箭头函数弱化了this的用法

2.1 箭头函数不绑定this

    在ES3里，this是Function隐藏的第一个参数
    而且this是什么，是不确定的，因为每个被新定义的函数都会创建自己的this值

    function Person() {
        // Person() 构造函数定义 `this`作为它自己的实例.
        this.age = 0;

        setInterval(function growUp() {
            // 在非严格模式, growUp()函数定义 `this`作为全局对象,
            // 与在 Person()构造函数中定义的 `this`并不相同.
            this.age++;
        }, 1000);
    }

    let p = new Person();

    不同函数里的this可能总是不一样，而且没有什么规律和逻辑，很难使用
    因此，我们在调用函数的时候，高级写法就是使用call
    这样，我们在代码未执行前就能确定this的值是什么

    function xxx(/*this,*/arg1, arg2) {
        console.log(this, arg1, arg2)
    }

    xxx.call(window, 1, 2) // Window 1 2

箭头函数里的this不会被call改变

    let test1 = () => {
        console.log(this)
    }
    test1.call({name: "bruce"}) // window

2.2 如何使用箭头函数里的this

划重点：把箭头函数里的this当做普通变量看待！！！！
划重点：把箭头函数里的this当做普通变量看待！！！！
划重点：把箭头函数里的this当做普通变量看待！！！！

    function Person() {
        this.age = 0;
        let a = 0
        setInterval(() => {
            console.log(a) // 请问a去哪儿找？Person的作用域
            this.age++; // 请问this去哪儿找？Person的作用域
            // 这样，|this| 就能正确地指向person对象，你也再也不用管call的第一个参数到底传的是啥了
        }, 1000);
    }

    let p = new Person();

3.使用箭头函数使得代码变得简洁

一般用于回调函数

// 把数组内每一个数都换做其平方数
// 然后再将每个数都减2
// 【使用map方法】
// 请问该怎么写？？

// ES3写法
let arr = [1, 3, 4, 6, 7]
arr.map(function (number) {
    return number * number
}).map(function (number) {
    return number - 2
})

// ES6写法
arr.map(number => number * number).map(number => number - 2)

4.ES6Function作为方法时的简写

    let obj = {
        console: function (a) {
            console.log(a)
        }
    }
    // 等价于
    let obj = {
        console(a) { // 删去了冒号和function关键字
            console.log(a)
        }
    }

5.箭头函数其它知识【抄mdn的】 5.1箭头函数没有arguments

    let arrow = p1 => {
        console.log(arguments) // 报错：arguments is not defined
    }
    arrow("xxx")

5.2箭头函数不可作为构造函数且没有prototype属性

    let Foo = () => "test"
    let f1 = new Foo() // 报错：Foo is not a constructor
    console.log(Foo.prototype) // undefined

海外云主机云服务器箭头函数指北入坑指北 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93023.html

ES6指北【4】——ES6的函数参数处理，超乎你想象

摘要：参数搭配的变量是一个数组，该变量将多余的参数放入数组中。从上面的概念中，我们至少可以知道如下三个信息语法变量。一、函数的默认参数值 1. ES6之前，我们如何实现函数默认参数 1.1 方式一：使用逻辑运算符【||】 function test(x) { x = x || 默认值 // 使用||设置默认值 console.log(x) } test() // 默认值但这样...

Pandaaa 2019-08-23 11:01 评论0 收藏0
ES6指北【6】——详谈解构赋值【附赠练习题】

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】一、何谓解构赋值？ 1. 基本概念首先我们看一下MDN给的定义解构赋值语法是一个 Javasc...

sorra 2019-08-23 11:33 评论0 收藏0
ES6指北【1】——let、const

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执 1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 ...

张春雷 2019-08-26 11:45 评论0 收藏0
ES6指北【1】——let、const

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执 1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 ...

tain335 2019-08-01 18:35 评论0 收藏0
ES6指北【5】——展开语法(spread syntax)

摘要：我们先来看一看的官方定义展开语法可以在函数调用数组构造时将数组表达式或者在语法层面展开还可以在构造字面量对象时将对象表达式按的方式展开。我们先来看一看MDN的官方定义展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1...

ZoomQuiet 2019-08-26 12:16 评论0 收藏0