ECMAScript 6 语法学习——箭头函数

概述

在ECMAScript 6中允许使用箭头（=>）定义函数。箭头函数的语法多变，根据实际的使用场景有多种形式

箭头函数的语法

单一参数、函数体只有一条语句的箭头函数定义如下

let welcome = msg => msg
/*
相当于
function welcome(msg) {
    return msg
}
*/

console.log(welcome("welcome you."))

如果一个函数有多个参数，则需要使用圆括号

let welcome = (user, msg) => `${user}, ${msg}`
/*
相当于
function welcome(user, msg) {
    return user + ", " + msg
}
*/

console.log(welcome("John", "welcome you."))

如果函数没有参数，则需要使用一对空的圆括号表示

let welcome = () => "welcome you."
/*
相当于
function welcome() {
    return "welcome you."
}
*/

console.log(welcome())

如果函数体有多条语句，则需要使用花括号包裹函数体

let add = (a, b) => {
    let c = a + b
    return c
}
/*
相当于
function add(a, b) {
    let c = a + b
    return c
}
*/

console.log(add(4, 6))

如果要创建一个空函数，则需要使用一对圆括号来表示参数内容并且使用一对花括号表示函数体部分

let emptyFunction = () => {}
/*
相当于
function emptyFunction() {}
*/

如果箭头函数的返回值是一个对象字面量，则需要将该字面量包裹在圆括号中

let createCar = (color, doors) => ({color : color, doors : doors})
/*
相当于
function createCar(color, doors) {
    return {
        color : color,
        doors : doors
    }
}
*/

console.log(createCar("black", 4))
  • 将对象字面量包裹在圆括号中是为了将其与函数体区分开

箭头函数可以和对象解构结合使用

let personInfo = ({name, age}) => `${name}'s age is ${age} years old.`
/*
相当于
function personInfo({name, age}) {
    return `${name}'s age is ${age} years old.`
}
*/

let person = {
    name : John,
    age : 18
}
console.log(personInfo(person))

箭头函数与this

JavaScript中的this关键字与其他高级语言中的this引用或this指针不同，JavaScript中的this并不是指向对象本身，其指向是可以改变的，根据当前执行上下文的变化而改变。

代码示例

<!DOCTYPE html>
<html>
    <head>
        <script>
            var greeting = "Welcome"
            function sayHello(user) {
                alert(this.greeting + ", " + user)
            }

            var obj = {
                greeting : "Hello",
                sayHello : sayHello
            }

            // Welcome, John
            sayHello("John")
            // Hello, John
            obj.sayHello("John")
            var sayHi = obj.sayHello
            // Welcome, John
            sayHi("John")
        </script>
    </head>
</html>

下面来分析下上述代码

  1. 调用sayHello("John")时，相当于执行window.sayHello("John")，因此函数内部的this指向的是window对象，我们在代码第一行定义的全局变量greeting将自动成为window对象的属性，因此最后的结果是“Welcome, John”。
  2. 调用obj.sayHello("John")时，函数内部的this指向的是obj对象，而obj对象内部定义了greeting属性，因此最后的结果时“Hello, John”。
  3. 调用sayHi("John")时，虽然该函数是由obj.sayHello赋值得到，但是在执行sayHi()函数时，当前的执行上下文对象时window对象，相当于调用window.sayHi("John")，因此最后的结果是“Welcome, John”。

再看这一段代码

<!DOCTYPE html>
<html>
    <head>
        <script>
            var obj = {
                greeting : "Hello",
                sayHello : function() {
                    setTimeout(function() {
                       alert(this.greeting)
                    }, 2000)
                }
            }
            // undefined
            obj.sayHello()
        </script>
    </head>
</html>

在这段代码中，调用obj.sayHello()时，只是执行了setTimeout()函数，2s后才开始执行setTimeout()函数参数中定义的匿名函数，而该匿名的执行上下文对象是window，因此this指向的是window对象。显然在window对象中并没有定义greeting属性，因此输出的结果是undefined。
为了解决this指向问题，可以使用函数对象的bind()方法，将this明确地绑定到某个对象上。

使用bind()方法绑定this对象

<!DOCTYPE html>
<html>
    <head>
        <script>
            var greeting = "Welcome"

            function sayHello(user) {
                alert(this.greeting + ", " + user)
            }

            var obj = {
                greeting : "Hello",
                sayHello : sayHello
            }

            var sayHi = obj.sayHello.bind(obj)
            // Hello, John
            sayHi("John")

            var obj = {
                greeting : "Hello",
                sayHello : function() {
                    setTimeout((function() {
                       alert(this.greeting)
                    }).bind(this), 2000)
                }
                // 或者用这种形式
                /*
                sayHello : function() {
                    var that = this
                    setTimeout(function() {
                        alert(that.greeting)
                    }, 2000)
                }
                */
            }
            // Hello
            obj.sayHello()
        </script>
    </head>
</html>

使用bind()方法实际上是创建了一个新的函数，称为绑定函数，该函数的this被绑定到参数传入的对象。为了避免创建一个额外的函数，可以通过使用箭头函数来更好的解决this问题。
箭头函数中没有this绑定，必须通过查找作用域来决定其值。如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this；否则，this的值会被设置为全局对象。

使用箭头函数修改上述代码

<!DOCTYPE html>
<html>
    <head>
        <script>
            var obj = {
                greeting : "Hello",
                sayHello : function() {
                    setTimeout(() => alert(this.greeting), 2000)
                }
            }
            // Hello
            obj.sayHello()
        </script>
    </head>
</html>

alert函数参数中的this与sayHello()方法中的this一致，而这个this指向的是obj对象，因此最后调用obj.sayHello()的结果是Hello。

箭头函数中的this值取决于该函数外部非尖头函数的值，且不能通过call()、apply()或bind()方法来改变this的值。

箭头函数在使用时需要注意以下几点

  1. 没有this、super、arguments和new.target绑定。在箭头函数中 这些值由外围最近一层非箭头函数决定。
  2. 不要通过new关键字调用。因为箭头函数不能被用作构造函数，所以使用new关键字调用箭头函数会导致程序报错。
  3. 没有原型。因为不能通过new关键字调用箭头函数，因此没有构造原型的需求，因此箭头函数不存在prototype这个属性。
  4. 不可以改变this的绑定。函数内部的this值不可被改变，在函数的生命周期内始终保持一致。
  5. 不支持arguments对象。箭头函数没有arguments绑定，所以只能通过命名参数和rest参数这两种形式访问函数的参数。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,335评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,895评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,766评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,918评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,042评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,169评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,219评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,976评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,393评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,562评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,193评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2赞 351