欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS全局变量

程序员文章站 2024-01-26 22:06:53
...

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

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

后端: Node里面

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

  ;((require, exports, module) =>{
      module.exports = {};
      exports.a = 1;
      exports.b = 2;
  }());
复制代码
  1. node里面定义全局变量,给Global上面加属性和方法
    a.js模块里面
    Global.a = 1;
    Global.getA = () => {
        return Global.a;
    }
复制代码
  1. Node里面的this Node里面没有this,因为没有上下作用域

  2. 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();
复制代码