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天挑戰學習計劃，來自公衆號！老師會邀請你進入學習，並給你發放相關資料。