【js思考課】梳理一波函數的花式用法

概述

函數的用法眼花繚亂，即使工做了不少年的人，熟悉各類框架的函數用法，可是未必知道爲何要這麼用，爲何換一種用法就不能夠。

這節思考課，就是從最簡單的一個demo開始，逐漸展開思考，一步步嘗試來理解它。

1. 基礎實驗

先上基礎代碼：

var variable
function showText(text) {
    console.log(text);
}

基礎代碼只有一個變量，一個函數。下面依據基礎代碼進行實驗

函數調用與賦值

首先，調用函數並賦值給變量：

var variable
function showText(text) {
    console.log(text);
}
variable = showText('基礎代碼執行')
console.log(variable)

直接運行上面的代碼，結果以下：

說明 showText 方法調用了。

結論一：

• 變量賦值爲一個函數調用時，函數會當即執行
• 函數內沒有return，至關於變量沒有賦值（由於仍是undefind）

稍稍變一下：

var variable
function showText(text) {
    console.log(text);
}
variable = showText
variable('變量賦值後調用')
console.log(variable)

再看運行結果：

結論二：

• 變量賦值爲一個函數名時，變量就指向了這個函數
• 變量調用等於函數調用

變量調用沒這個說法，姑且這麼說是爲了理解，就是變量名加一對括號： variable()

匿名函數調用與賦值

將變量賦值爲一個匿名函數（也就是函數表達式）

var variable
function showText(text) {
    console.log(text);
}
variable = function () {
    showText('函數調用')
}
console.log(variable)
variable()

運行結果：

結論三：

• 變量賦值爲一個匿名函數時，變量就指向了這個函數
• 賦值時匿名函數不會當即調用
• 變量調用等於匿名函數調用

根據這三個結論，咱們能夠發現：

function showText(text) {
    console.log(text);
}
// 基本等同於
var showText = function(text) {
    console.log(text);
}
// 統一調用方式爲：
showText('txt');

瞭解了基礎，下面咱們來看項目實踐

2. react 中的用法

先來一段基礎的 react 代碼

import React from 'react'

const TestPage = (props) => {
    const testFun = ()=> {
        console.log('函數執行')
    }
    return (
        <div onClick={testFun}></div>
    )
}

export default TestPage;

點擊事件等於函數名，函數正常觸發。

應該有人試過寫成這樣：

<div onClick={testFun()}></div>

這樣寫就不行了，函數一開始就觸發了，可是點擊時候沒反應。

可是寫成這樣就又正常了：

<div onClick={()=> testFun()}></div>

爲何會這樣？結合第一節來分析一波。

寫法 1 分析

爲何這樣寫能夠：

<div onClick={testFun}></div>

由於這個寫法就等於：

div.onClick = testFun

把 div.onClick 看作一個變量，再結合 結論二 能夠得知：

div.onClick() == testFun()

因此在 div 執行 onClick() 時就調用了 testFun()；

寫法 2 分析

再看這個寫法：

<div onClick={testFun()}></div>

和上一步同樣的拆解

div.onClick = testFun()

結合 結論一 能夠得知，testFun() 會當即執行，可是 div.onClick 等於 undefined 至關於未賦值，因此點擊沒反應。

寫法 3 分析

<div onClick={()=> testFun()}></div>

拆解後：

div.onClick = ()=> testFun()
// 等於 es5 寫法：
div.onClick = function() {
    testFun()
}

結合 結論三 可知：

匿名函數不會當即執行，onClick() 時觸發 testFun()，因此正常運行

寫法 4 分析

改造一波，給 div 加一段顯示內容

const getName = ()=> {
    return '我是一個div'
}
<div onClick={testFun}>{getName()}</div>

發現了嗎，這裏又不同了。

標籤內 getName() 這麼寫是對的，光寫函數名反而是錯的，這與事件裏使用函數的方法正好相反。

爲什呢？由於標籤內的內容就是要當即觸發函數來獲得的，不須要在指定條件下觸發。