JS全局变量-CSDN博客

一、js全局变量的声明 (前端)

在全局作用域(window)在下用var/function声明的变量
在函数内不使用var声明的变量(作用域链的问题)
在函数内用var连续声明多个变量，后面的变量是全局变量(预解释问题)
在全局作用域下和私有作用域下直接给全局对象曾加的属性 window.$ = jQuery
在全局作用域下用let、const(常量)、class(类)、import(模块)定义的变量

后端: Node里面

1)node里面的玩的是模块，没有全局变量，你在模块里面用let, const都是模块里面的变量, 看是全局变量，其实模块内部都是用一个闭包包起来的，形参了一个新的私有作用域，用exports和moduole.exports导出,放到他们里面，他们是全局的 (JS是函数式编程 <箭头函数>)

  ;((require, exports, module) =>{
      module.exports = {};
      exports.a = 1;
      exports.b = 2;
  }());
复制代码

node里面定义全局变量，给Global上面加属性和方法

    a.js模块里面
    Global.a = 1;
    Global.getA = () => {
        return Global.a;
    }
复制代码

Node里面的this Node里面没有this，因为没有上下作用域
Global和window区别
- global在node最顶层, window是在浏览器里面，所以node里面没有DOM,BOM这些

我们以后再定义变量可以使用let和const了，无需再使用val了

注意:
##### ==>>ES6加入的四个let、const(常量)、class(类)、import
 - 1)没有预解释 (必须先声明后使用， 暂时性死区问题)
 
 - 2)不能重复声明, 可以重复赋值 (前提是同一个作用域里面) (函数的形参，不能在进行重复声明了)
 
 - 3)没有挂到window对象上，不污染全局变量
 
 - 4)有块级作用域{} for/while/if问题，变量不暴漏  (for父级作用域，里面子级作用域)  var循环的问题， << 闭包印出 >>
 
 - 5)有常量const <基本数据类型不能改值，引用数据类型不能修改引用地址>   ***声明 + 赋值必须都完成 (选项卡特效问题，闭包解决，ES6的let解决)


> myglobal = "hello"; // 不推荐写法
> console.log(myglobal); // "hello"
> console.log(window.myglobal); // "hello"
> console.log(window["myglobal"]); // "hello"
> console.log(this.myglobal); // "hello" //==>> 全局作用域下this是window  非严格模式下，严格模式下是undefined
复制代码

eg1:

  function fn(val) {
      x = 1;  //==>> 隐式存在作用域链的问题
      return val;
  }
  fn();
  console.log(window.x);
复制代码

eg2

function fn() {
    var a = b = c = d =1;   //===>> var a = (b = c = d =  0) 
}
fn();
console.log(window.b);
console.log(window.c);
cosole.log(window['d']);

复制代码

eg3

function jQuery() {
    var jQuery = funciton(){};
    window.$ = window.jQuery = jQuyer;
}
jQuery();
$();
复制代码

二、忘记var的副作用

隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。

通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
无var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。
标准方式var声明的全局变量，是不可以删除的(deltete)

这表明，在技术上，隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的：

// 定义三个全局变量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());
function global_novar4() {
    
}

// 试图删除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true
delete global_novar4; //false

// 测试该删除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"
typeof global_novar4; // "function"
复制代码

三: 全局变量的问题

全局变量的问题在于，你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量，他们住在同一个全局命名空间，所以当程序的两个不同部分定义同名但不同作用的全局变量的时候，命名冲突在所难免。

 function sum(x, y) {
     result = x + y; //==>> 不推存写法
     return result;
 }
 sum(1, 2);
 console.log(result); //==>> 3
复制代码

四: 解决全局变量的问题

命令空间(单例模式)
面向对象封装(class)

eg1:命名空间进行管理

var tools = {
    checkName() {
        ...
        return this;
    },
    checkEmail() {
        ...
        return this; //==>>链式调用
    }
};
tools.totas = {};
tools.ajax = {};
全局唯一一个对象，tools,便于管理，维护，不冲突和其他类库
复制代码

eg2: class进行管理

class Card {
    constuctor(name = '一级卡片', id, level = 1) {
        this.name = name;
        this.id = id;
        this.level = level;
    }
    
    updateCard(id) {
        ajax...
    }
    
    deleteCard(id) {
        ajax...
    }
    
    static typeChane(val) {
        ...
    }
}
复制代码

eg3.块级作用域

    块级作用域: {}包起来的， let/const 让JS有了块级作用域
    1.
        console.log(x);   // ==>> undefined
        if(true) {
            var x = 1;
        }
        console.log(x);  // ==>> 1
        window.x;
        window['x'];
        
    2.
    
    for(var i=0; i< 10;i++) {
        
    }
    console.log(i); //===>> 10
    window.i;
    window['i']
    
  3.
  
  if (true) {
      let a = 1;
  }
  window.a;     //==>> undefined
  window['a']; //==> undefined
复制代码

预解释问题:

1.全局作用域预解释
2.只对等号前面进行预解释
3.函数return的代码不执行，但是还要进行预解释
4.不管条件是否成立，都要进行预解释


  function fn() {
      fn1();
      return;
  
      function fn1() {
          alert('ok')
      }
  }
  fn();
  
  
  
  
  function fn() {
      console.log(a++); //==> NaN
      return;
      var a = 1;
  }
  fn();
复制代码