no-use-before-define

禁止在變數定義之前使用它們

在 JavaScript 中，在 ES6 之前，變數和函式宣告會被提升到範圍的頂端，因此可以在程式碼中正式宣告之前使用識別符號。這可能會讓人感到困惑，有些人認為最好總是在使用變數和函式之前宣告它們。

在 ES6 中，區塊層級繫結（let 和 const）引入了「暫時死區」，任何在宣告之前嘗試存取變數的行為都會拋出 ReferenceError。

規則詳情

此規則會在遇到尚未宣告的識別符號參考時發出警告。

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

/*eslint no-use-before-define: "error"*/

alert(a);
var a = 10;

f();
function f() {}

function g() {
    return b;
}
var b = 1;

{
    alert(c);
    let c = 1;
}

{
    class C extends C {}
}

{
    class C {
        static x = "foo";
        [C.x]() {}
    }
}

{
    const C = class {
        static x = C;
    }
}

{
    const C = class {
        static {
            C.x = "foo";
        }
    }
}

export { foo };
const foo = 1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

此規則的正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: "error"*/

var a;
a = 10;
alert(a);

function f() {}
f(1);

var b = 1;
function g() {
    return b;
}

{
    let c;
    c++;
}

{
    class C {
        static x = C;
    }
}

{
    const C = class C {
        static x = C;
    }
}

{
    const C = class {
        x = C;
    }
}

{
    const C = class C {
        static {
            C.x = "foo";
        }
    }
}

const foo = 1;
export { foo };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

選項

{
    "no-use-before-define": ["error", {
        "functions": true,
        "classes": true,
        "variables": true,
        "allowNamedExports": false
    }]
}
1
2
3
4
5
6
7
8

functions (boolean) - 這個旗標表示此規則是否檢查函式宣告。如果此為 true，此規則會針對函式宣告之前對函式的每個參考發出警告。否則，會忽略這些參考。函式宣告會被提升，因此是安全的。預設值為 true。
classes (boolean) - 這個旗標表示此規則是否檢查上層範圍的類別宣告。如果此為 true，此規則會針對類別宣告之前對類別的每個參考發出警告。否則，如果宣告在上層函式範圍中，則會忽略這些參考。類別宣告不會被提升，因此可能存在危險。預設值為 true。
variables (boolean) - 此旗標決定規則是否檢查上層範圍的變數宣告。如果此為 true，規則會針對變數宣告之前對變數的每個參考發出警告。否則，如果宣告在上層範圍中，規則會忽略參考，但如果參考與宣告位於相同的範圍，則仍會回報參考。預設值為 true。
allowNamedExports (boolean) - 如果此旗標設為 true，規則會永遠允許 export {}; 宣告中的參考。即使變數在程式碼中稍後宣告，這些參考也是安全的。預設值為 false。

此規則接受 "nofunc" 字串作為選項。"nofunc" 等同於 { "functions": false, "classes": true, "variables": true, "allowNamedExports": false }。

函式

{ "functions": false } 選項的正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "functions": false }]*/

f();
function f() {}
1
2
3
4

此選項允許參考函式宣告。對於函式運算式和箭頭函式，請參閱 variables 選項。

類別

{ "classes": false } 選項的不正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "classes": false }]*/

new A();
class A {
}

{
    class C extends C {}
}

{
    class C extends D {}
    class D {}
}

{
    class C {
        static x = "foo";
        [C.x]() {}
    }
}

{
    class C {
        static {
            new D();
        }
    }
    class D {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

{ "classes": false } 選項的正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "classes": false }]*/

function foo() {
    return new A();
}

class A {
}
1
2
3
4
5
6
7
8

變數

{ "variables": false } 選項的不正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "variables": false }]*/

console.log(foo);
var foo = 1;

f();
const f = () => {};

g();
const g = function() {};

{
    const C = class {
        static x = C;
    }
}

{
    const C = class {
        static x = foo;
    }
    const foo = 1;
}

{
    class C {
        static {
            this.x = foo;
        }
    }
    const foo = 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

{ "variables": false } 選項的正確程式碼範例

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "variables": false }]*/

function baz() {
    console.log(foo);
}
var foo = 1;

const a = () => f();
function b() { return f(); }
const c = function() { return f(); }
const f = () => {};

const e = function() { return g(); }
const g = function() {}

{
    const C = class {
        x = foo;
    }
    const foo = 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

allowNamedExports

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

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "allowNamedExports": true }]*/

export { a, b, f, C };

const a = 1;

let b;

function f () {}

class C {}
1
2
3
4
5
6
7
8
9
10
11

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

在遊樂場中開啟

/*eslint no-use-before-define: ["error", { "allowNamedExports": true }]*/

export default a;
const a = 1;

const b = c;
export const c = 1;

export function foo() {
    return d;
}
const d = 1;
1
2
3
4
5
6
7
8
9
10
11
12

版本

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

資源

編輯此頁面