no-shadow

禁止變數宣告遮蔽外部範圍中宣告的變數

遮蔽是指區域變數與其包含範圍中的變數共享相同名稱的過程。例如

var a = 3;
function b() {
    var a = 10;
}
1
2
3
4

在這種情況下，b() 內部的變數 a 正在遮蔽全域範圍中的變數 a。這可能會在閱讀程式碼時造成混淆，並且無法存取全域變數。

規則詳情

此規則旨在消除遮蔽的變數宣告。

此規則的不正確程式碼範例

/*eslint no-shadow: "error"*/

var a = 3;
function b() {
    var a = 10;
}

var c = function () {
    var a = 10;
}

function d(a) {
    a = 10;
}
d(a);

if (true) {
    let a = 5;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

選項

此規則接受一個選項，一個具有屬性 "builtinGlobals"、"hoist"、"allow" 和 "ignoreOnInitialization" 的物件。

{
    "no-shadow": ["error", { "builtinGlobals": false, "hoist": "functions", "allow": [], "ignoreOnInitialization": false }]
}
1
2
3

builtinGlobals

builtinGlobals 選項預設為 false。如果為 true，則此規則會阻止遮蔽內建的全域變數：Object、Array、Number 等。

{ "builtinGlobals": true } 選項的不正確程式碼範例

/*eslint no-shadow: ["error", { "builtinGlobals": true }]*/

function foo() {
    var Object = 0;
}
1
2
3
4
5

hoist

hoist 選項有三個設定

• functions（預設）- 回報外部函式定義之前發生的遮蔽。
• all - 回報所有在外部變數/函式定義之前發生的遮蔽。
• never - 永遠不回報在外部變數/函式定義之前發生的遮蔽。

hoist: functions

預設 { "hoist": "functions" } 選項的不正確程式碼範例

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/

if (true) {
    let b = 6;
}

function b() {}
1
2
3
4
5
6
7

雖然 if 陳述式中的 let b 在外部範圍的函式宣告之前，但它是不正確的。

預設 { "hoist": "functions" } 選項的正確程式碼範例

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/

if (true) {
    let a = 3;
}

let a = 5;
1
2
3
4
5
6
7

因為 if 陳述式中的 let a 在外部範圍的變數宣告之前，所以它是正確的。

hoist: all

{ "hoist": "all" } 選項的不正確程式碼範例

/*eslint no-shadow: ["error", { "hoist": "all" }]*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}
1
2
3
4
5
6
7
8
9

hoist: never

{ "hoist": "never" } 選項的正確程式碼範例

/*eslint no-shadow: ["error", { "hoist": "never" }]*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}
1
2
3
4
5
6
7
8
9

因為 if 陳述式中的 let a 和 let b 在外部範圍的宣告之前，所以它們是正確的。

allow

allow 選項是一個允許遮蔽的識別符號名稱陣列。例如，"resolve"、"reject"、"done"、"cb"。

{ "allow": ["done"] } 選項的正確程式碼範例

/*eslint no-shadow: ["error", { "allow": ["done"] }]*/

import async from 'async';

function foo(done) {
  async.map([1, 2], function (e, done) {
    done(null, e * 2)
  }, done);
}

foo(function (err, result) {
  console.log({ err, result });
});
1
2
3
4
5
6
7
8
9
10
11
12
13

ignoreOnInitialization

ignoreOnInitialization 選項預設為 false。如果為 true，則在假設遮蔽的變數仍未初始化的情況下，它會阻止回報在其初始化器中遮蔽變數的情況。

遮蔽的變數必須在左側。遮蔽變數必須在右側，並在回呼函式或 IIFE 中宣告。

{ "ignoreOnInitialization": "true" } 選項的不正確程式碼範例

/*eslint no-shadow: ["error", { "ignoreOnInitialization": true }]*/

var x = x => x;
1
2
3

因為遮蔽變數 x 會遮蔽已初始化的遮蔽變數 x。

{ "ignoreOnInitialization": true } 選項的正確程式碼範例

/*eslint no-shadow: ["error", { "ignoreOnInitialization": true }]*/

var x = foo(x => x)

var y = (y => y)()
1
2
3
4
5

回呼函式的基本原理是假設它們將在初始化期間被呼叫，因此當使用遮蔽變數時，遮蔽的變數尚未初始化。

相關規則

• no-shadow-restricted-names

版本

此規則是在 ESLint v0.0.9 中引入的。

延伸閱讀

變數遮蔽 - 維基百科
en.wikipedia.org

資源

• 規則來源
• 測試來源