普通函數和箭頭函數

我經常的使用箭頭函數，卻尚未對箭頭函數有個深刻的瞭解，如今找一下這2個函數的不一樣點

1. 箭頭函數自己沒有prototype(原型)

因爲箭頭函數沒有原型，所以箭頭函數自己沒有this

let a = () => {}
console.log(a.prototype) // undefined
let b = function () {}
console.log(b.prototype) // Object

2. 箭頭函數的this指向在定義的時候繼承自外層第一個普通函數的this

let a;
let barObj = {
    msg: 'bar的this指向'
}
let fooObj = {
    msg: 'foo的this指向'
}
bar.call(barObj)
foo.call(fooObj) // { msg: 'bar的this指向'  }
bar.call(fooObj)
a() // { msg: 'foo的this指向' }

function foo() {
    a()
}
function bar () {
    a = () => {
        console.log(this)
    }
}

從上面例子中能夠得出2點：

1. 箭頭函數的this指向定義時所在的外層第一個普通函數，跟使用位置沒有沒有關係
2. 被繼承的普通函數的this指向改變，箭頭函數的this也會跟着改變。
3. 不能直接修改箭頭函數的this
4. 能夠經過修改被繼承的普通函數的this指向，而後箭頭函數的this也會跟着改變

3. 箭頭函數使用arguments

let b = () => {
        console.log(arguments);
    }
    b(1,2,3,4) // arguments is not defined

    function bar () {
        console.log(arguments);  // 完成第二個普通函數
        bb('完成第一個普通函數')
        function bb() {
            console.log(arguments); // 完成第一個普通函數
            let a = () => {
                console.log(arguments); // 完成第一個普通函數
            }
            a('箭頭函數')
        }
    }
    bar('完成第二個普通函數')

從上面能夠得出如下2點

1. 箭頭函數指向window時，arguments會報未定義的錯誤
2. 若是不是window,那麼就是外層第一個普通函數的arguments

4. 箭頭函數不能夠使用new

不管箭頭函數的this指向哪裏，使用new調用箭頭函數都會報錯，箭頭函數沒有構造函數

let a = () => {}
    let b = new a() // a is not a constructor