下面是详细的攻略。

跟我学习JavaScript的全局变量

什么是全局变量

全局变量就是定义在全局作用域内的变量，可以在代码的任何地方被访问到。无论在哪个函数内或者是代码的外部，我们都可以访问及操作它。

在全局作用域内声明变量

在全局作用域内声明变量有两种方式：

1. 使用var关键字

javascript
var globalVar = "This is a global var";

1. 直接声明变量

javascript
globalVar = "This is a global var";

一般来说，使用var关键字会更好一些，因为它可以防止一些不必要的错误。

全局作用域下的变量声明和函数声明的提升

在JavaScript中，变量声明和函数声明都会被提升到全局作用域顶部。因此，我们可以在任何地方访问它们。

如下面的代码所示，即使赋值的代码在函数调用之前，我们仍然可以正常地调用函数。

console.log(globalVar); // Output: undefined

function testFunction() {
  globalVar = "This is a global var";
}

testFunction();

console.log(globalVar); // Output: This is a global var

在调用testFunction()之前，globalVar并没有被定义，因此，第一个console.log输出的是undefined。在调用testFunction()之后，globalVar被赋值为“This is a global var”，因此第二个console.log输出的是This is a global var。

避免使用全局变量

尽管全局变量可以让我们在任何地方都可以访问到它们，但是使用全局变量也有一些缺点。全局变量容易被意外地修改，而且它们会增加代码的复杂度，使代码难以维护。

因此，在实际开发中，我们应该尽量避免使用全局变量。有几种方法可以做到这一点：

1. 使用ES6中的let和const关键字来声明变量，它们的作用域是块级作用域，不会污染全局作用域。

javascript
let myVar = "This is a local var in a block scope";
const PI = 3.1415;

1. 使用模块化系统，使用模块范围内的变量，防止变量污染全局作用域。

```javascript
// module.js
export const myVar = "This is a var in a module";

// main.js
import { myVar } from './module';
console.log(myVar); // Output: This is a var in a module
```

示例一：避免变量污染

function testFunction() {
  var localVar = "This is a local var";

  console.log(localVar); // Output: This is a local var
}

testFunction();

console.log(localVar); // Output: Uncaught ReferenceError: localVar is not defined

在这个例子中，我们在函数内部声明了一个变量localVar，在函数外部无法访问它。

示例二：全局作用域下的变量修改

var globalVar = "This is a global var";

function testFunction() {
  globalVar = "This value is changed inside the function";
}

testFunction();

console.log(globalVar); // Output: This value is changed inside the function

在这个例子中，我们在函数内部修改了全局变量globalVar的值。虽然它的确是很方便的，但是对于代码维护来说可能就是一个噩梦。

因此，在实际开发中，我们应该避免使用全局变量，尽可能地使用块级作用域或者模块化范围内的变量。