资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/简单说 JavaScript的箭头函数

简单说 JavaScript的箭头函数

Caizhenhao / 487人阅读

摘要：说明箭头函数本质还是函数，我们来看看他与中普通函数的区别，先看看写法上的区别。箭头函数会捕获其所在上下文的值，作为自己的值。箭头函数不可变。这些方法也无法改变箭头函数的指向。箭头函数不能用关键字来实例化对象，不然会报错。

说明

箭头函数本质还是函数，我们来看看他与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/questio...
所以这也解释了为什么会出现下面代码中的情况

// 不报错
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 有一定认识的，朋友们继续努力吧！

云服务器 GPU云服务器 简单的javascript 箭头函数 javascript的函数 javascript中的函数

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

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

相关文章

  • ES6—箭头函数（5）

    摘要：因为它不产生属于它自己上下文的箭头函数的另一个用处是简化回调函数。箭头函数使用场景箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在的回调函数定义中，另外目前等库，都大量使用箭头函数，直接定义的情况已经很少了。 0.为什么会出现箭头函数？ 1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少...

    yanwei 评论0 收藏0

  • JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？

    摘要：箭头函数没有自己的值，箭头函数中所使用的来自于函数作用域链。使用箭头函数打印对于内层函数，它本身并没有值，其使用的来自作用域链，来自更高层函数的作用域。 《JavaScript 深入浅出》系列： JavaScript 深入浅出第 1 课：箭头函数中的 this 究竟是什么鬼？ JavaScript 深入浅出第 2 课：函数是一等公民是什么意思呢？ 普通函数与箭头函数 普通函数指的是...

    MRZYD 评论0 收藏0

  • 从-1开始的ES6探索之旅01：颜文字成精的箭头函数 上篇 - 大哥，你指哪呢？

    摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。 温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？ 之前在某些大神的代码中出现一串神秘符号类似于num =>...

    Snailclimb 评论0 收藏0

  • JavaScript 的 this 指向问题深度解析

    摘要：而改变了这种状态，虽然定义的类用运算符得到的仍然是，但它不能像普通函数一样直接调用同时，中定义的方法函数，也不能当作构造函数用来调用。而在中，用调用一个构造函数，会创建一个新对象，而其中的就指向这个新对象。 JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 ...

    liuchengxu 评论0 收藏0

  • 什么是 JAVASCRIPT？

    摘要：，微软发布，同时发布了，该语言模仿同年发布的。，公司在浏览器对抗中没落，将提交给国际标准化组织，希望能够成为国际标准，以此抵抗微软。同时将标准的设想定名为和两类。，尤雨溪发布项目。，正式发布，并且更名为。，发布，模块系统得到广泛的使用。 前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how 每篇文章试图解释清楚一个问题。 这次的 why w...

    ephererid 评论0 收藏0

发表评论

登陆后可评论

0条评论

Caizhenhao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<