2018-06-11深入浅出ES6(箭头函数)

学习箭头函数之前,先普及一个小知识点。

function show(a=1){
  let a = 2;
  console.log(a);
}
show();

上面的代码告诉我们函数的参数默认已经被定义了,一经声明,就不能再用let或者const进行声明了,只能用var。下面一起来看箭头函数吧。

//普通函数的写法
function show(){
  return 1;
}
show();
//箭头函数的写法
let show = () =>  1;//箭头的左边是参数右边是返回值
console.log(show());

如果想要在函数里面写语句的时候,写法是这样的:

let show = (a=1,b=2) => {
 console.log(a,b);
}
show();

箭头函数在写法和普通桉树除了写法不用之外。还有三点不同

let json = {
  name: 'Cyril',
  show: function(){
    setTimeout(function(){
        console.log(this.name);//控制台什么都没输出
    },1000);
  }
}
json.show();

这个例子大多是在vue等框架下开发遇到的问题,因为this指向是当前函数,先要让他指向外面的json对象,就还要在外面进行转换,太麻烦,而箭头函数则不同。

let json = {
  name: 'Cyril',
  show: function(){
    setTimeout(() => {
      console.log(this.name); //Cyril
    })
  }
}
json.show();

第一个不同之处就是箭头函数里的this指向的是定义函数所在的对象,而不是运行时所在的对象。

第二个就是箭头函数里面不能使用arguments,用了就是is not defined

解决办法:扩展运算符(本章的第五小节)

let show = (...a) => {
  console.log(a); //[1,2,3,4,5]
}
show(1,2,3,4,5);

第三个事箭头函数不能当作构造函数来用

let Show = () => {
  this.name = 'Cyril';
}
let a = new Show();
console.log(a.name); //Show is not a constrator

GitHub个人主页 :https://github.com/Cyrildog

有些鸟儿天生即使关不住的,他们的羽毛太鲜明,歌声太甜美。也太狂野了,所以你只能放他们走,否则那天你打开笼子喂它们时,他们也会想办法扬长而去。

[图片上传失败...(image-11e537-1528698466423)]

推荐阅读更多精彩内容

  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 2,302评论 0 1
  • ☞☞ 个人主页欢迎访问 ☜☜ 大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了字符串模板...
    苏日俪格阅读 647评论 0 1
  • 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚...
    程序员之路阅读 482评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 9,986评论 1 29
  • 柔软的细雨 无声也无息 滋润着干渴的大地 清凉的微风 倦也不倦 冰如水软如眉 抚慰在每寸肌肤 每道心田深处 舒服温...
    红叶竹马阅读 88评论 1 2
  • Problem More LeetCode DiscussionsA group of two or more p...
    楷书阅读 772评论 0 0
  • 自从那以后呵 我沉稳的脚步 再也不愿停留 金色的世界 金色的思绪掀起了 层层浪朵 我的脑海里很单调 只有挂着帆的一...
    _君凉_阅读 144评论 1 9
  • 坚持记录每天的小成功,日积月累就会成就满满,厚积薄发。也可以为自己没有虚度光阴而骄傲。
    认知成长笔记阅读 158评论 0 0
  • 怨回纥 冬去送春来,鹧鸟慵懒散。未红弃绿寒,莫问春来浅。 复见官人归,羞把青丝绾。相看两不烦,秋波让人乱。
    問天道人阅读 31评论 2 1