[[436011]]

Eslint 有很多內置的 rule，其中有一個 rule 叫 no-func-assign，是指不能給函數賦值，目的是避免函數被重新賦值導致調用時出錯。

這個 rule 的實現有兩種思路，我們分別用 Babel 插件和 Eslint 插件來實現一遍。

思路分析

目標是檢查出對聲明的函數的重新賦值，有兩種思路：

第一種思路是找到作用域中所有的函數聲明，分析引用它的地方，如果是賦值語句，就報錯。

第二種思路是反過來，找到所有賦值語句，如果左邊的變量在作用域中的聲明是一個函數，就報錯。

Eslint 的這個 rule 的源碼是用第一種思路實現的，我們用 Babel 插件實現下第二種思路。

Babel 插件實現 lint

按照第二種思路來實現，要先找到所有的賦值語句：

const noFuncAssignLint = (api, options) => { 
 
    return { 
        visitor: { 
            AssignmentExpression(path, state) { 
            } 
        } 
    } 
}; 
 
module.exports = noFuncAssignLint; 

然后使用 path.scope 的作用域相關 api 來找到左邊部分在作用域中的聲明，也就是 binding，之后判斷下聲明的類型是否是一個函數，如果是，就報錯。

const noFuncAssignLint = (api, options) => { 
 
    return { 
        visitor: { 
            AssignmentExpression(path, state) { 
                const assignTarget = path.get('left').toString(); 
                const binding = path.scope.getBinding(assignTarget); 
 
                if (binding) { 
                    if (binding.path.isFunctionDeclaration() || binding.path.isFunctionExpression()) { 
                        // 報錯 .. 
                    } 
                } 
            } 
        } 
    } 
}; 
 
module.exports = noFuncAssignLint; 

Babel 插件可以聲明處理的 AST 類型的 visitor，在遍歷的時候會被調用，其中可以對 AST 做分析和轉換。提供了 path 的 api 用于 AST 的增刪改，path.scope 的 api 用于作用域分析。基于 path 和 path.scope 的 api 就可以完成各種分析和轉換功能。

Eslint 插件實現 lint

這個 rule 本來就是 eslint 實現的，它是基于第一種思路。也就是找到所有的函數聲明，然后分析引用，如果是賦值就報錯。

eslint 的 rule 包括兩部分：

• meta 部分是原信息，包括文檔、報錯信息等
• create 部分是 lint 功能的實現

module.exports = { 
    meta: { 
        type: "problem", 
 
        docs: { 
            description: "disallow reassigning `function` declarations", 
            recommended: true, 
            url: "https://eslint.org/docs/rules/no-func-assign" 
        }, 
 
        schema: [], 
 
        messages: { 
            isAFunction: "'{{name}}' is a function." 
        } 
    }, 
 
    create(context) { 
 
        function checkForFunction(node) {} 
 
        return { 
            FunctionDeclaration: checkForFunction, 
            FunctionExpression: checkForFunction 
        }; 
    } 
}; 

我們聲明對函數聲明 FunctionDeclaration 和函數表達式 FunctionExpression 的處理，也就是通過 context 的 api 拿到作用域中的聲明，然后判斷引用，如果引用是賦值語句，就報錯。

function checkForFunction(node) { 
    context.getDeclapanredVariables(node).forEach(checkVariable); 
} 
 
function checkVariable(variable) { 
    if (variable.defs[0].type === "FunctionName") { 
        checkReference(variable.references); 
    } 
} 
 
function checkReference(references) { 
    // 如果是賦值語句這種 
    astUtils.getModifyingReferences(references).forEach(reference => { 
        context.report({ 
            node: reference.identifier, 
            messageId: "isAFunction", 
            data: { 
                name: reference.identifier.name 
            } 
        }); 
    }); 
} 

Eslint 插件可以聲明處理的 AST 類型的 listener，在遍歷的時候會被調用， 可以對 AST 進行各種分析，然后報錯。提供了 context 的 api 用于分析 ast，比如作用域分析，還提供了 context.report 用于報錯。

Babel 插件和 Eslint 插件的區別

Babel 和 Eslint 都會把源碼 parse 成 AST，然后遍歷 AST 進行處理。

Babel 中 AST 的處理函數叫 visitor，可以用于分析和修改 AST，Eslint 中叫 listenter，因為只能分析 AST，不能修改。

Babel 插件提供了 path 的 api，用于增刪改 AST，path.scope 的 api 用于分析作用域，包括聲明和引用。Eslint 插件提供了 context 的 api，用于分析作用域等。

Eslint 的 AST 中包含了 token 的信息，可以做格式的檢查，比如空格、換行這種，而 Babel 的 AST 中沒有，所以格式檢查只能用 Eslint 實現。

Eslint 插件支持 fix 來修改代碼，但它不是通過修改 AST 實現的，而是指定某段 range 如何做修改，通過字符串替換實現的。

總結

我們圍繞著 no-func-assign 這個 Eslint 內置的 rule，分析了兩種思路，分別用 Babel 插件和 Eslint 插件做了實現。其實主要是作用域的分析，這個功能在 Eslint 插件和 Babel 插件中都支持。

Eslint 和 Babel 插件的功能都是基于 AST，只不過 Babel 是做 AST 的分析和轉換，而 Eslint 只做 AST 分析(包括格式的檢查)。

要注意的是，Eslint 的fix 功能不是修改 AST 實現的，而是簡單的字符串替換。

Eslint 插件、Babel 插件等都是基于 AST 實現的，它們有很多同質化的部分，可以對比著來學習。