专栏首页FEWY简单说 JavaScript的箭头函数

简单说 JavaScript的箭头函数

说明

箭头函数本质还是函数,我们来看看他与JavaScript中普通函数的区别,先看看写法上的区别。

解释

写箭头函数,我们记住一个顺序就好,参数、箭头、函数体、这个顺序记住就足够了,参数、箭头、函数体、这三个是必须的,函数名可以没有,但这三项必须有,一些简写的方式也是简写这三项里的东西。

简写

1、只有一个参数时,() 可省略

//不简写
var demo = (x) =>{
    console.log(x);
}

//简写
var demo = x =>{
    console.log(x);
}

2、函数体只有一句时, {} 可以省略

//不简写
var demo = (x) =>{
    console.log(x);
}

//简写
var demo = x => console.log(x);

3、函数体只有一条返回语句时,{} 和 return 都可以省略

//不简写
var demo = (x) => {
     return x;
}

//简写
var demo = (x) => x;   

//注意别写成这样  
var demo = (x) =>{ x };  
//或者 这样  
var demo = (x) => return  x;  
//要省略就都省略,不省略就都不省,别省一半,不然会出错的。

注意: 箭头函数放 参数 的地方就在 () 内, 没有参数,() 必须写, 一个参数,() 可写可不写, 多个参数,() 必须写。

箭头函数放 函数体 的地方在 {}内, 函数体 就 一句 {} 可写可不写, 函数体 不止一句,{} 必须写。

如果不知道,() {} 写不写,该不该省略,那就写,写了不会错。

箭头函数 如果要返回一个对象,要简写的话, 需要用()包住这个对象

//不简写
var demo = () =>{ 
    return {x:1};
}  

//简写
var demo = () =>({x:1});

为什么会这样?因为如果不加 () ,那{ } 就表示的是语法块,不是表示一个对象,而加上(),按照规范来说,() 里面 { } 就会被解析为对象了。

对于 {x:1} 这个情况,他不仅可以表示一个对象,这个对象有个x属性,值为1,也可以表示为语法块中含有 名为 x 的 label,忘记 label语法的话,可以看这里 如果不是很明白,可以看看这个回答,应该会理解的更加深刻。 https://www.zhihu.com/question/40902815 所以这也解释了为什么会出现下面代码中的情况

// 不报错
var demo = () =>{x:1};

// 报错
var demo = (y) =>{y,x:1};

对象的方法用 箭头函数写时,this 的指向 可能和你想的不一样

window.name='window';
var obj = {
    name:'obj',
    show_name:() =>{
        console.log(this.name);
    }   
}
obj.show_name(); //window

JavaScript使用的是函数作用域,在上面这段代码中对象的括号是不能封闭作用域的,所以此时的this还是指向window。 我们换成普通函数看看

window.name='window';
var obj = {
    name:'obj',
    show_name: function (){
        console.log(this.name);
    }   
}
obj.show_name();  //obj

换成普通函数,this 就不是指向window,而是指向 obj 对象了

箭头函数 与 普通函数 其他的区别

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。 2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。 3、箭头函数 不能用 new 关键字来实例化对象,不然会报错。 4、箭头函数没有arguments对象。

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        function fn (){
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name();  // window

声明一个 obj 对象,有一个name属性 与 show_name方法,上面这段代码,我的本意是想显示 obj对象的name, 但是没和我想的一样,一般我们会用 一个变量 self 或者 that 之类的留住this,像这样

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        //留住this
        var that = this;
        function fn (){
            console.log(that.name);
        }
        fn();
    },
}
obj.show_name();  //obj

通常来说,箭头函数内部的this就是外层代码块的this

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        var fn = () => {
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name(); //obj

2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。

window.name = 'window';
var obj = {
    name:'obj',
}
function show_name(){
    //这里 show_name 是一个普通的全局函数,所以他的this指window
    console.log(this.name);
}
//用了 call 方法,把 show_nam 的this 指向了 obj 对象
show_name.call(obj);  //obj

箭头函数 this 不可变

window.name = 'window';
var obj = {
    name:'obj',
}
var show_name = () => {
    //这里 show_name 是箭头函数,他的this指window,并且不会变
    console.log(this.name);
}
//用了 call 方法,但是 this 没变,所以打印了 window
show_name.call(obj);  //window

3、箭头函数 不能用 new 关键字来实例化对象,不然会报错,箭头函数的this 不可变,new 也改变不了 this的 指向,而且更为重要的是,箭头函数内部并没有 [[Construct]] 方法,所以会没有原型属性(prototype),所以箭头函数没法当构造函数。

4、箭头函数没有arguments对象,不能通过arguments对象访问传入参数,但是可以用rest参数实现 rest参数,剩余参数,不了解的朋友看这里

var demo = (...theArgs) => theArgs;
demo(1,2,3); //[1,2,3]

总结

在来看一遍 箭头函数 与 普通函数,除了写法上的区别

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。 2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。 3、箭头函数 不能用 new 关键字来实例化对象,不然会报错。 4、箭头函数没有arguments对象。

可以看出,最重要的区别还是 在 this 上,所以要想用好 箭头函数,还是要对 this 有一定认识的,朋友们继续努力吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript|箭头函数的用法

    JavaScript ES6标准新增了比较重要的一种新的函数:Arrow Function(箭头函数),但大多数人都不能很好的了解箭头函数的用法,也不能区别箭头...

    算法与编程之美
  • Salesforce Javascript(二) 箭头函数

    本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions...

    用户1169343
  • JavaScript闭包与箭头函数

    用户1203875
  • javascript js(=>) 箭头函数 详细解说 案例大全

    箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语...

    战神伽罗
  • JavaScript :ES6 的箭头函数,让你的代码更简洁

    本文由 Alone88 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名 最后编辑时间为...

    Alone88
  • Javascript中普通函数和箭头函数的区别

    2.箭头函数没有this对象,他会找到上层调用者作为this对象,直至window。还有,由于箭头函数没有自己的this,所以call,apply,bing等方...

    小明爱学习
  • JavaScript 初学者必看“箭头函数”

    是不是很酷!虽然是一个极端简洁的例子,但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法:

    Fundebug
  • JavaScript 箭头函数不完全指北

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

    撸码那些事
  • Js的箭头函数

    更简短的函数并且不绑定this。箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函...

    JavaEdge

扫码关注云+社区

领取腾讯云代金券