JavaScript 箭头函数不完全指北

撸码那些事

发布于 2019-07-30 11:48:53

2900

发布于 2019-07-30 11:48:53

在 JavaScript 中，我们通常可以使用如下代码进行函数声明

function example(paramters){
    //函数体
}

或者

var example = function (paramters){
    //函数体
}

从 ES6 开始，可以使用箭头函数声明匿名方法，如下

var example = p => {
    console.log(p);
}

我们可以使用 babel 转译器将 ES6 代码转译为 ES5代码, ES5代码如下

var example = function example(p) {
    console.log(p);
};

可以看出和普通的函数没有什么不同，但是它们本质上完全不同

1.箭头函数不能显式地命名2.箭头函数不能用作构造函数，并且没有 prototype 属性，这意味着不能使用 new 关键字3.箭头函数会绑定到所在的词法作用域，不会改变 this 的指向

箭头函数不会创建新的作用域

在 JavaScirpt 中，在一个对象内部，this指向的是这个对象，而在普通函数内部，this指向的是window对象。所以不能在普通函数里面用this来访问对象的属性。在对象内部定义的匿名函数的this指针也是指向window对象，而不是该对象。

var param = 'hello'
var obj = {
    param: 'world',
    method1: function () {
        console.log(this.param); //world
        function f() { //普通函数
            console.log(this.param); //hello
        }
        f()
    },
    method2: function(){
        setTimeout(function () { //对象内部定义的匿名函数
            console.log(this.param); //hello
        },1000)
    }
}
obj.method1() 
obj.method2()

通常我们会在函数的开头加上 var self = this 这样的声明语句，然后在函数内部引用 self ,解决 this 指向的问题，如下面代码的实现方式

var param = 'hello'
var obj = {
    param: 'world',
    method1: function () {
        console.log(this.param); //world
        var self = this //函数的开头加上 var self  = this
        function f() {
            console.log(self.param); //world
        }
        f()
    },
    method2: function(){
        var self = this //函数的开头加上 var self  = this
        setTimeout(function () {
            console.log(self.param); //world
        },1000)
    }
}
obj.method1() 
obj.method2()

但是使用箭头函数就完全不会存在这些问题，由于箭头函数不会创建新的作用域，在箭头函数的函数体内，this、arguments 以及 super 均属于所在的父级作用域。

var param = 'hello'
var obj = {
    param: 'world',
    method1: function () {
        console.log(this.param); //world
        var f = ()=>{
            console.log(this.param); //world
        }
        f()
    },
    method2: function(){
        setTimeout(() => {
            console.log(this.param); //world
        },1000)
    }
}
obj.method1() 
obj.method2()

箭头函数的写法

var double = (value) => {
    return value * 2
}

如果箭头函数只有一个参数，那么可以省略圆括号

var double = value =>{
    return value * 2
}

如果整个函数体只有一行表达式，那么可以省略大括号和 return(隐式返回)

var double = value => value * 2

隐式返回对象字面量需用（）包裹

var obj = () => ({modular: 'es6'})
var map = [1,2,3].map(value => ({number: value}))

箭头函数的用处

1.箭头函数更适合简短实例2.当需要定义任何情况下词法作用域都不改变的匿名函数（箭头函数不会创建新的作用域）3.函数式编程，使代码更简洁

var result = [1,2,3,4]
.map(value => value *2)
.filter(value => value >2)
.reduce((pre,cur)=> pre + cur)

参考

•《深入理解 JavaScript 特性》

-----END-----

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-06-04，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

ecmascript

本文分享自 CoderFocus 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

ecmascript

登录后参与评论

0 条评论

热度