1、箭头函数简写：

• 箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return都可以省略

var fn = () => console.log("123");//去掉了{} 和 return
fn(); //'123'

2、this指向：

• 普通函数中this指向的是调用它的对象，如果作为构造函数，它指向创建的对象实例
• 箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

普通函数中this指向的9大场景：

9大场景对应的案例代码，太多放不下，需要粉丝群获取。

箭头函数中this指向

箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

<div id="box"></div>
<script>
   var fn = () => console.log(this); //window
   //var fn=function(){console.log(this);} // <div id="box"></div>
   document.getElementById("box").onclick = fn;
</script>

如果fn是普通函数,则this指向的是#box,如果是箭头函数，则this指向的是window

3、改变this指向

• 普通函数通过调用call()、apply()、bind()可以改变this指向。
• 箭头函数无法通过调用call()、apply()、bind()改变this指向。

普通函数

<script>
   const obj = {};
   function fn() {
       console.log(this);
  }
   fn(); //window
   fn.apply(obj); //obj  
   fn.call(obj); //obj
   fn.bind(obj)(); //obj
</script>

箭头函数

<script>
   const obj = {};
   const fn = () => console.log(this);
   fn(); //window
   fn.apply(obj); //window
   fn.call(obj); //window
   fn.bind(obj)(); //window
</script>

4、构造函数

• 普通函数可以作为构造函数来创建对象实例
• 箭头函数不能作为构造函数来使用，因为箭头函数没有自己的this

普通函数-用作构造函数

<script>
   function Person(name) {
       this.name = name;
  }
   const p = new Person("张三");
   console.log(p); //{name: '张三'}
</script>

箭头函数-用作构造函数会报错

<script>
   const fn = (a) => {
       console.log(a);
  };
   fn(1); //1
   console.log(new fn(1)); //Uncaught TypeError: fn is not a constructor
</script>

5、arguments与...args

• 每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
• 箭头函数中访问arguments如果存在，则是来自于他的外层普通函数的arguments
• 箭头函数没有自己的arguments对象，取而代之用rest（剩余）参数...args解决

普通函数中arguments

function sum(a) {
   console.log(arguments);
   console.log(arguments[0]);
}
sum(1, 2, 3);
//Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]
//1  

箭头函数没有arguments对象

const sum = () => console.log(arguments);//arguments未定义
sum(); //Uncaught ReferenceError: arguments is not defined

• 箭头函数中访问arguments如果存在，则是来自于他的外层普通函数的arguments

function a() {
   var b = () => console.log(arguments);//arguments是a函数中的
   b();
}
a(1, 2, 3); //Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]

箭头函数中 ...args剩余参数

const sum = (a, ...args) => console.log(args);
sum(1, "a", "b", 3); // ['a', 'b', 3]

arguments包含实际传递的所有参数，...args是剩余参数，只能放在所有参数后，并且不包含剩余参数前的参数。以下是错误写法

const sum = (a, ...args,b) => console.log(args);

6、prototype原型

• 普通函数具有prototype原型属性
• 箭头函数没有prototype原型属性

<script>
   //箭头函数
   var a = () => 1;
   //普通函数
   function b() {
       return 2;
  }
   console.log(a.prototype); // undefined
   console.log(b.prototype); // {constructor: ?}
</script>

学习更多的JavaScript

如果你正在学习JS或者已经在我们的三十天计划中完成了4个综合项目实战，那不妨可以听下这个课程体系，三十天计划群里还提供了算法、数组等知识体系！

前端工程师成长方法

更多完整JavaScript课程体系在我们的系统班你有完整的呈现，包含了JavaScript基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

如果需要深度学习的同学可以练习助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；
• 
  

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自公众号！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程