關於箭頭函式的思考

2021-09-13 01:10:06 字數 1975 閱讀 5269

自從有了es6箭頭函式這個靈活的功能,現在寫函式都習慣寫成箭頭函式格式

() => {}
然而如果不理解箭頭函式的原理,濫用它也會造成很大的影響。

思考下面這個問題

let func = value => console.log(value)

let func = function(value)

我們到平台上測試一下, 顯然兩者不等。

let func = value => console.log(value)

// 等同於

"use strict";

var func = function func(value) ;

console.log()方法返回undefined

return undefined與沒有返回值一樣。所以效果上問題中兩種寫法沒有差異。

let func = value => value

// 等同於

let func = value =>

// 等同於

var func = function func(value) ;

如果箭頭函式的**塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。

var sum = (num1, num2) =>
那如果我使用了箭頭,使用了大括號,沒使用return呢?

var sum = (num1, num2) => 

'use strict';

var sum = function sum(num1, num2) ;

由於大括號被解釋為**塊,所以如果箭頭函式直接返回乙個物件,必須在物件外面加上括號

let getinfo = name => ();
使用箭頭函式必須要有返回值嗎?

// 如果箭頭函式只有一行語句,且不需要返回值

let fn = () => void doesnotreturn(); // void

箭頭函式表示式:沒有自己的 this arguments super new.target, 不能用作建構函式,沒有prototype屬性,不能用作生成器

箭頭函式不會建立自己的 this, 它只會從自己作用域鏈的上一層繼承this這點很重要。如下面示例,箭頭函式內的this的作用域上一層即person函式內的this

function person(), 1000);

}var p = new person();

var adder = ,

addthrucall: function(a) ;

return f.call(b, a);

},addtest: function(a) ;

return f.call(b, 23, a);

}};console.log(adder.add(1)); // 輸出 2

console.log(adder.addthrucall(1)); // 仍然輸出 2

console.log(adder.addthrucall('a')); // 輸出 24 (23+1)

很明顯了,第乙個引數會被忽略是忽略call方法裡的第乙個引數(好像是我在思考的時候想多了,這很明顯呀)

參考資源

關於箭頭函式

一 為什麼存在 const person 1000 person.sayhello 因為setinterval執行的時候,是在全域性作用域下的,所有this指向的是全域性window,而window上沒有name和age,所以輸出的是undefined。通常的寫法是快取this,然後在setinte...

關於JavaScript的箭頭函式

箭頭函式是乙個簡寫形式的函式表示式,並且它擁有詞法形式的this值 基本用法 var f v v 這個函式等同於 var f function v var sum num1,num2 num1 num2 等同於 var sum function num1,num2 first last 等同於 fu...

關於箭頭函式的理解摘記

參考 1.箭頭函式 arrow function 是 規格裡面的用語。事實上,整個規格裡面一次也沒有提到lambda。2.箭頭函式 的this,總是指向定義時所在的物件,而不是執行時所在的物件 這句話是對的,並沒有寫錯 3.function foo 100 foo call 請問,上面 的,到底是箭...