国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

函數(shù) 作為 JS 的一等公民，隨處可見它的身影。

我理解的它最主要作用就是用來提取重復(fù)代碼，但凡有 JS 代碼需要復(fù)制粘貼的時(shí)候，那么這時(shí)候就可以考慮使用函數(shù)封裝了。

當(dāng)函數(shù)寫在對(duì)象中的時(shí)候，這時(shí)候它變了一個(gè)名字，稱之為 方法。

function 聲明

在使用 function 關(guān)鍵字聲明函數(shù)時(shí)，需注意聲明提升問題，意思就是 function 聲明的函數(shù)，不存在先后順序，任意位置都可以調(diào)用。

function test() {
  console.log('前端路引');
}
test() // 調(diào)用函數(shù)

test 就是函數(shù)的名字，函數(shù)名的規(guī)則和變量聲明差不多，只要不是數(shù)字和特殊字符開頭，語法規(guī)則都是允許的，包括都可以使用中文定義函數(shù)，雖然不建議這么使用！

function 測(cè)試() {
  console.log('前端路引');
}
測(cè)試() // 調(diào)用函數(shù)

聲明提升

function 定義的函數(shù)會(huì)提升到作用域頂部，所以可以在函數(shù)定義之前調(diào)用，比如：

test() // 此處可以調(diào)用 function 聲明的函數(shù)
const var1 = '前端路引 -- 1'
console.log(var1)
function test() {
  console.log('前端路引 -- 2');
}

輸出：

前端路引 -- 2
前端路引 -- 1

包括寫在 if 判斷中的 function 都會(huì)提升到作用域頂部，比如：

test()
if (false) {
  console.log('前端路引 -- 1'); // 此行代碼不會(huì)執(zhí)行
  function test() {
    console.log('前端路引 --2');
  }
}

輸出：

前端路引 -- 2

所以不建議在條件語句中去使用 function 聲明函數(shù)！

函數(shù)表達(dá)式

函數(shù)表達(dá)式就是使用一個(gè)變量來保存函數(shù)，這種寫法有個(gè)好處是可以控制定義函數(shù)的邏輯。

聲明方式：

const test = function() {
  console.log('前端路引');
}
test()

表達(dá)式聲明的函數(shù)只能在聲明之后調(diào)用，如果在聲明之前調(diào)用，代碼會(huì)報(bào)錯(cuò)：

test() // 報(bào)錯(cuò) ReferenceError: test is not defined
const test = function() {
  console.log('前端路引');
}

使用 var 聲明時(shí)會(huì)報(bào)錯(cuò) TypeError: test is not a function:

test() // 報(bào)錯(cuò) TypeError: test is not a function
var test = function() {
  console.log('前端路引');
}

在 if 中聲明的函數(shù)表達(dá)式，在外部無法調(diào)用：

if (false) {
  const test = function() {
    console.log('前端路引');
  }
}
test() // 報(bào)錯(cuò) ReferenceError: test is not defined

箭頭函數(shù)

箭頭函數(shù)的聲明與函數(shù)表達(dá)式有些相似，都需要通過變量保存。

聲明方式：

const test1 = () => {
  console.log('前端路引');
}
const test2 = (a, b) => a + b; // 單行時(shí)候可以省略花括號(hào)，直接返回值
// 等價(jià)于
// const test2 = (a, b) => {return a + b}
test1() // 輸出：前端路引
console.log(test2(1, 2)) // 輸出：3

箭頭函數(shù)和函數(shù)表達(dá)式的區(qū)別：

• 箭頭函數(shù)自身沒有 this 綁定，繼承外層作用域的 this。

const test1 = function () {
  console.log(this)
}
const test2 = () => {
  console.log(this)
}
test1.bind({a: '123'})() // 獲得對(duì)象 {a: '123'}
test2.bind({a: '123'})() // 獲得全局對(duì)象 window

• 由于沒有 this，所以也無法作為構(gòu)造函數(shù)使用，不能使用 new 實(shí)例化。

const test1 = function () {
  console.log('前端路引')
}
const test2 = () => {
  console.log('前端路引')
}
new test1()
new test2() // 報(bào)錯(cuò) TypeError: test2 is not a constructor

• 箭頭函數(shù)也沒有 arguments 對(duì)象，所以無法通過 arguments 相關(guān)方法，比如 arguments.callee 獲取函數(shù)自身。

const test1 = function () {
  console.log(arguments) // 獲取到參數(shù)對(duì)象
}
const test2 = () => {
  console.log(arguments) // 報(bào)錯(cuò) ReferenceError: arguments is not defined
}
test1('前端路引')
test2('前端路引')

生成器函數(shù)

ES6 新增的聲明方式，常規(guī)的業(yè)務(wù)代碼一般很少使用（也可能是我的段位太低~~）。

function* test() {
  yield 1;
  yield 2;
}
const temp = test()
console.log(temp.next()) // 輸出：{value: 1, done: false}
console.log(temp.next()) // 輸出：{value: 2, done: false}
console.log(temp.next()) // 輸出：{value: undefined, done: true}

這種方式可以使用 yield 暫停函數(shù)執(zhí)行，多用于異步迭代場(chǎng)景。

看一個(gè)異步使用 yield 例子：

function* testAsync() {
  const data = yield new Promise(resolve => {
    setTimeout(() => resolve('Hello World'), 1000); // 模擬異步操作
  });
  console.log(data); // 此處的 data 是 next 傳入數(shù)據(jù)，不是 Promise 返回?cái)?shù)據(jù)
}
 
async function run() {
  const generator = testAsync();
  const result = await generator.next().value; // 等待 Promise
  generator.next(result); // 將結(jié)果傳遞回生成器并繼續(xù)執(zhí)行
}
run()

構(gòu)造函數(shù) Function 聲明

雖然不建議使用這種聲明函數(shù)，咱們學(xué)習(xí)了解一下還是沒問題的。

const test = new Function('a', 'b', 'return a + b');
console.log(test(1, 2))

問題：

1、通過字符串動(dòng)態(tài)生成代碼，存在安全風(fēng)險(xiǎn)，容易出現(xiàn)代碼注入攻擊。
2、每次都會(huì)解析字符串，性能會(huì)比較低。

寫在最后

函數(shù) 作為 JS 語言中的一等公民，幾種聲明方式區(qū)別是面試中的?？停?jīng)常被問及 箭頭函數(shù) 與 function 有哪些區(qū)別。

函數(shù) 是基礎(chǔ)，也是函數(shù)式編程的核心，必須熟練掌握~~

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18922032