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

资源

• 规则源代码
• 测试源代码