JS基础块作用域

女爷i 2023-10-06 21:36 52阅读 0赞

#### 阅读目录 ####

*  共同点
 *  var
 *  let
 *  const
 *  重复定义
 *  Object.freeze
 *  传值与传址

## 共同点 ##

`var/let/const` 共同点是全局作用域中定义的变量，可以在函数中使用

var hd = 'wgcehn';
    
    function show() {
        
    	return hd;
    }
    console.log(show());

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
函数中声明的变量，只能在函数及其子函数中使用

function hd() {
        
      var web = "wgcehn";
    
      function show() {
        
        console.log(web);
      }
    
      show(); //子函数结果: wgcehn
    
      console.log(web); //函数结果: wgcehn
    }
    
    hd();
    
    console.log(web); //全局访问: hd is not defined

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

函数中声明的变量就像声明了私有领地，外部无法访问

var web = "wgcehn";
    
    function hd() {
        
      var web = "wgcehn.csdn";
      console.log(web); //wgcehn.csdn
    }
    
    hd();
    
    console.log(web); //wgcehn

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## var ##

使用 `var` 声明的变量存在于最近的函数或全局作用域中，没有块级作用域的机制。

没有块作用域很容易污染全局，下面函数中的变量污染了全局环境

function run() {
        
      web = "wgchen";
    }
    run();
    console.log(web); //wgchen

没有块作用作用域时 `var` 也会污染全局

for (var i = 0; i < 10; i++) {
        
      console.log(i);
    }
    console.log(i);

使用 `let` 有块作用域时则不会

let i = 100;
    
    for (let i = 0; i < 6; i++) {
        
      console.log(i);
    }
    
    console.log(i);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
下例中体验到 `var` 没有块作用域概念， `do/while` 定义的变量可以在块外部访问到

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
`var` 全局声明的变量也存在于 `window` 对象中

var hd = "wgchen";
    console.log(window.hd); // wgchen

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
以往没有块任用时，使用立即执行函数模拟块作用域。

(function() {
        
    
      var $ = this.$ = {
        };
      $.web = "willem";
      
    }.bind(window)());
    
    console.log($.web);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
有了块作用域后实现就变得简单多了

{
        
      let $ = (window.$ = {
        });
      $.web = "wgchen";
    }
    console.log($.web);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]

## let ##

与 `var` 声明的区别是`let/const`拥有块作用域，下面代码演示了块外部是无法访问到 `let` 声明的变量。

*  建议将 `let` 在代码块前声明
 *  用逗号分隔定义多个

`let` 存在块作用域特性，变量只在块域中有效

if (true) {
        
        let web = 'willem',name = 'wgcehn';
        console.log(web); //willem
    }
    
    console.log(web); //web is not defined

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
块内部是可以访问到上层作用域的变量

if (true) {
        
    
      let user = "wgcehn";
    
      (function() {
        
        if (true) {
        
          console.log(`这是块内访问：${
          user}`);
        }
      })();
    
    }
    
    console.log(user);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
每一层都是独立作用域，里层作用域可以声明外层作用域同名变量，但不会改变外层变量

function run() {
        
      hd = "wgchen";
    
      if (true) {
        
        let hd = "wgchencms";
        console.log(hd); // wgchencms
      }
    
      console.log(hd); // wgchen
    }
    
    run();

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 10]

## const ##

使用 `const` 用来声明常量，这与其他语言差别不大，比如可以用来声明后台接口的URI地址。

*  常量名建议全部大写
 *  只能声明一次变量
 *  声明时必须同时赋值
 *  不允许再次全新赋值
 *  可以修改引用类型变量的值
 *  拥有块、函数、全局作用域

常量不允许全新赋值举例

try {
        
      const URL = "wgchen.blog.csdn.net";
      URL = "https://wgchen.blog.csdn.net"; //产生错误
    } catch (error) {
        
      throw new Error("错误展示："+error);
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
改变常量的引用类型值

const INFO = {
        
      url: 'https://wgchen.blog.csdn.net',
      port: '8080'
    };
    
    INFO.port = '443';
    
    console.log(INFO);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
下面演示了在不同作用域中可以重名定义常量

const NAME = 'wgcehn';
    
    function show() {
        
      const NAME = 'willem';
      return NAME;
    }
    console.log(show());
    console.log(NAME);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 13]

## 重复定义 ##

使用 `var` 可能造成不小心定义了同名变量

//优惠价
    var price = 90;
    
    //商品价格
    var price = 100;
    
    console.log(`商品优惠价格是:${
          price}`);

使用 `let` 可以避免上面的问题，因为 `let` 声明后的变量不允许在同一作用域中重新声明

let web = 'https://wgchen.blog.csdn.net';
    let web = 'wgcehn'; //Identifier 'web' has already been declared

![在这里插入图片描述][50e36c015be04d42a02672dabf1dd9a7.png]

不同作用域可以重新声明

let web = 'wgchen.blog.csdn.net';
    if (true) {
        
    	let web = 'wgcehn';
    }

但可以改变值这是与 `const` 不同点

let price = 90;
    price = 88;
    console.log(`商品价格是:${
          price}`);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
`let`全局声明的变量不存在于 window对象中，这与var声明不同

let hd = "hdcms";
    console.log(window.hd); //undefined

## Object.freeze ##

如果冻结变量后，变量也不可以修改了，使用严格模式会报出错误。

"use strict"
    const INFO = {
        
      url: 'https://wgchen.blog.csdn.net',
      port: '8080'
    };
    Object.freeze(INFO);
    INFO.port = '443'; //Cannot assign to read only property
    console.log(INFO);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 15]

## 传值与传址 ##

基本数据类型指数值、字符串等简单数据类型，引用类型指对象数据类型。

基本类型复制是值的复制，互相不受影响。下例中将 `a` 变量的值赋值给 `b` 变量后，因为基本类型变量是独立的所以 `a` 的改变不会影响 `b` 变量的值。

let a = 100;
    let b = a;
    a = 200;
    console.log(b);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]  
对于引用类型来讲，变量保存的是引用对象的指针。  
变量间赋值时其实赋值是变量的指针，这样多个变量就引用的是同一个对象。

let a = {
        
      web: "wgchen"
    };
    let b = a;
    a.web = "willem";
    console.log(b);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/03aec95d98cc48578186fe6ebe899cec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7d8e8e1a59744df8a12ee324dc6f9a13.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/67492ee8541244ce836681b7882707e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/1ae88ed2f4824ab58a732357b16dd150.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d3e1bd414184471896e3ebff07aef0a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/25c5aaf48a614466b5e0bc2e1c762bf6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/ab90e5a9573c40b893820af4c10af327.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/e2d012d1214b43f9a7eab6364739772a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/787603360c6a48bea297bc18a17c2377.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/8c66a296aaf14c30a69e368e15b6673e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/3833360cce74413abae7fda17407f947.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/38fc3d4328ba47c5be172e5d3f0647ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/3e33f15d518943c4a27f188a69398f74.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/eb308a840da04103aab0f1de212484e2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[50e36c015be04d42a02672dabf1dd9a7.png]: https://img-blog.csdnimg.cn/50e36c015be04d42a02672dabf1dd9a7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/30b87f23f2e84850be93159eb3afdd55.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/dbf970910a3548bfa18d9df4802a6d29.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e73b77d5c73d46cba3a3bde35587b398.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/926239efd67d4d1dac9e92c4b93968e2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16