普通函數和箭頭函數

tolerious 發布于2019-08-23 16:50 / 1562人閱讀

摘要：我常常的使用箭頭函數，卻還沒有對箭頭函數有個深入的了解，現在找一下這個函數的不同點箭頭函數本身沒有原型由于箭頭函數沒有原型，因此箭頭函數本身沒有箭頭函數的指向在定義的時候繼承自外層第一個普通函數的的指向的指向的指向的指向從上面例子中可以得出

我常常的使用箭頭函數，卻還沒有對箭頭函數有個深入的了解，現在找一下這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點：

箭頭函數的this指向定義時所在的外層第一個普通函數，跟使用位置沒有沒有關系

被繼承的普通函數的this指向改變，箭頭函數的this也會跟著改變。

不能直接修改箭頭函數的this

可以通過修改被繼承的普通函數的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點

箭頭函數指向window時，arguments會報未定義的錯誤

如果不是window,那么就是外層第一個普通函數的arguments

4. 箭頭函數不可以使用new

無論箭頭函數的this指向哪里，使用new調用箭頭函數都會報錯，箭頭函數沒有構造函數

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

云服務器 GPU云服務器箭頭函數存儲過程和函數的區別 php數組和函數參數 php中函數和參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103377.html

論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
ES6精解：箭頭函數

摘要：基本用法在中允許使用來定義函數，如下就等同于從上面可以看出，在箭頭左側的是代表參數，若參數只有一個，可以省略，箭頭右側的表示函數代碼塊，若代碼塊里面是個返回值，則可以省略不寫無參數情況若箭頭函數不需要參數，則左側用代替，如下無參數情況無參數基本用法在ES6中允許使用 => 來定義函數，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 評論0 收藏0
es6 - 箭頭函數

摘要：也就是說箭頭函數的的值不再根據調用時上下文確定，而是像普通變量那樣根據定義時的作用域鏈進行查找。箭頭函數中的依然要根據定義時的作用域鏈進行查找。知乎這篇文章對箭頭函數的一些不適合的場景進行了總結，可以作為參考。 es6 - 箭頭函數哇，箭頭函數...，聽起來好NB，但是如果你知道它是因為使用了=>這樣類似箭頭的符號，所以才叫箭頭函數。瞬間感覺：呵，這名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 評論0 收藏0
箭頭函數與普通函數的區別及示例

摘要：箭頭函數是前端面試環節的一個高頻考點，一般會問箭頭函數的是指如何用普通函數實現一個箭頭函數箭頭函數有哪些優點帶著這些問題，小編帶各位上路吧箭頭函數與普通函數得區別普通函數函數作為全局函數被調用時，指向全局對象函數作為對象中的方法被調用時，指箭頭函數是前端面試環節的一個高頻考點，一般會問 1、箭頭函數的this是指？2、如何用普通函數實現一個箭頭函數3、箭頭函數有哪些優點帶著這些問題...

Backache 2019-08-26 10:12 評論0 收藏0
ES6 - 箭頭函數、箭頭函數與普通函數的區別總結

摘要：但是因為箭頭函數沒有自己的，它的其實是繼承了外層執行環境中的，且指向永遠不會隨在哪里調用被誰調用而改變，所以箭頭函數不能作為構造函數使用，或者說構造函數不能定義成箭頭函數，否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0