箭頭函數
🙊前言：箭頭函數相信大家都使用過，會用的人屢試不爽，怕用錯的可能選擇不用，多碼幾行字的事。但是用過的人說真的爽。那么本文就來搞明白箭頭函數的玩法。
箭頭函數使用
下面就根據普通函數和箭頭函數的對比使用來更加深入的了解使用箭頭函數吧
1.語法格式上
我們普通函數語法格式上是這樣的
function(){函數體內容}
然而我們的箭頭函數是這樣的，是不是很簡潔
(參數)=>{函數體內容}
🏀例如： 我們遍歷數組，並修改數組
var hobby=["吃飯","睡覺","打球"]
var arr = hobby.map(function(item){ //普通函數實現
return "張三喜歡"+item;
})
var brr =hobby.map((item)=>{return "李四喜歡"+item}); //箭頭函數實現
console.log(arr)
console.log(brr)
🏀如果你要返回一個對象，要改變寫法，錯誤的寫法會被以為是函數體內容
var obj1 = ()=>{name:"浪漫主義碼農";age:20} //錯誤寫法
var obj = ()=>({name:"浪漫主義碼農",age:20}) //正確寫法
console.log(obj1(),"錯誤寫法")
console.log(obj(),"正確寫法")
小結一下：
- 如果只有一個參數，就可以省略（），函數體只有一條語句就可以省略{}和return，上面的例子就可以省略為
var brr =hobby.map(item=>"李四喜歡"+item); - 箭頭函數作為匿名函數，是不可以命名的
2.this的指向
箭頭函數並沒有他們自己的執行上下文。所以就沒有this,arguments，
箭頭函數的this指向是它所在的對象的父級
🏀來個例子
var a = {
name: "願你歷經千帆",
init: function () {
console.log(this)
console.log(this.name)
}
}
var b = {
name: "終能得償所願",
init: ()=> {
console.log(this)
console.log(this.name)
}
}
a.init()
b.init()
可以看出普通函數this指向了本身對象，而箭頭函數this往外層找指向了window，因為window沒有name字段所以沒有輸出。
箭頭函數使this從“動態”變成“靜態”，實質是內部沒有this指向，繼承上級對象this指向
箭頭函數的this指向定義時外部作用域內的this指向，普通函數的this指向調用時根據上下文取確認.
3.無法作為構造函數
箭頭函數作為匿名函數，沒有prototype，沒有自己的this指向，因此不能使用new構造函數
來個例子：
function mao(name,age){ //普通函數
this.name=name,
this.age=age
}
var fn = (name,age) => ({ //箭頭函數
name:name,
age:age
})
var b = new mao("浪漫主義碼農",100) //普通函數
console.log(b)
var a = new fn("張三",200) // 箭頭函數
console.log(a)
分析：
💠首先我們要知道構造函數new的過程是怎么樣的
- 創建一個空對象 {};
- 將要實例化對象的原形鏈指向該對象原形。
- 綁定該對象為this的指向
- 返回該對象。
由於箭頭函數沒有prototype 沒有自己的this指向，不可以使用arguments。
🏀這里貼一個手寫new構造函數吧，以后再出一篇深度探究構造函數的吧
function mao(name,age){
this.name=name;
this.age=age;
}
//手寫new
function _new(fn, ...args){ // ...args為ES6展開符,也可以使用arguments
//先用Object創建一個空的對象
let obj=new Object();
//新對象會被執行prototype連接
obj.__proto__=fn.prototype;
//新對象和函數調用的this綁定起來
let res=fn.call(obj,...args);
//判斷函數返回值如果是null或者undefined則返回obj,否則就返回res
return res instanceof Object?res:obj;
}
var a= _new(mao,"浪漫至死不渝",20)
console.log(a)
💠寫在最后
🙊如果上面有誤，歡迎大佬指出，不勝感激。
💌 願你歷經千帆，終能得償所願 💌
一個心懷浪漫宇宙，也珍惜人間日常的碼農
