js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()

LinMeng
• 阅读 1206
弱类型
  • 在JS中变量类型由所引用的值决定
    var web = "helloWorld";
    console.log(typeof web); //string
    web = 99;
    console.log(typeof web); //number
    web = {};
    console.log(typeof web); //object
    变量提升
  • 解析器会先解析代码,然后把声明的变量的声明提升到最前,这就叫做变量提升。
  • 使用 var 声明代码会被提升到前面,赋值还在原位置
    console.log(a); //undefined
    var a = 1;
    console.log(a);  //1
    

//以上代码解析器执行过程如下 var a; console.log(a); //1 a = 1; console.log(a); //1

var web = "helloworld"; function hd() { if (false) { var web = "你好,世界"; } console.log(web); } hd();

- 以上if循环中var定义的变量也会发生变量提升,但是不会提升至函数顶端,因为if是具有单独的作用域的。

##### TDZ(暂时性死区)
- 指的是变量在作用域内已经存在,但必须在let/const声明后才可以使用(否则会报错),TDZ可以让我们保持先声明后使用的习惯,让程序更加健壮。
一般我们建议:变量要先声明后使用,尽量用let/const代替var.
- 下面代码中的b没有声明赋值不允许使用

unction hw(a = b, b = 3) {} hw(); //Cannot access 'b' before initialization

- 但是以下可以

function hw(a = 2, b = a) {} hw();

##### 块作用域
1. var、let、const共同点----
- 全局作用域中定义的变量,可以在函数中使用
- 函数中声明的变量,只能在函数及其子函数中使用;函数中声明的变量就像声明了私有领地,外部无法访问

var hw =22; function hello(){ return hw +=11; } console.log(hello()); // 33

function hw() { var web = "你好,世界";

function show() { console.log(web); } show(); //子函数结果: 你好,世界 console.log(web); //函数结果: 你好,世界 } hw(); console.log(web); //全局访问: hw is not defined

- var 
   使用 var 声明的变量存在于最近的函数或全局作用域中,没有块级作用域的机制。没有块作用作用域时var也会污染全局,使用let有块作用域时则不会。
   var 全局声明的变量也存在于 window对象中
//没有块任用时使用立即执行函数模拟块作用域
 (function() {
  var $ = this.$ = {};
   $.web = "后盾人";
  }.bind(window)());
  console.log($.web);
  //有了块作用域后
   {
let $ = (window.$ = {});
 $.web = "你好,世界;
}
 console.log($.web);
- let
与 var 声明的区别是 let/const 拥有块作用域,下面代码演示了块外部是无法访问到let声明的变量。
1. 建议将let在代码块前声明
2. 用逗号分隔定义多个

   **let存在块级作用域特性,变量只在块域中才有效**
if (true) {
let web = 'hdcms',url = 'houdunren.com';
console.log(web); //hdcms
}
 console.log(web); //web is not defined
**块内部都是可以访问到上层作用域的变量**
  if (true) {
  let user = "linmeng";
  (function() {
     if (true) {
        console.log(`这是块内访问:${user}`);
       }
     })();
  }
 console.log(user);
**每一层都是独立作用域,里层作用域可以声明外层作用域同名变量,但不会改变外层变量**

function run() { hw = "helloworld"; if (true) { let hw = "hwoo"; console.log(hw); //hwoo } console.log(hw); //helloworld } run();

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

//可以修改引用类型的值 const INFO = { url: 'https://www.houdunren.com', port: '8080' }; INFO.port = '443'; console.log(INFO);

##### 重复定义
- 使用var 可能会造成同名变量
- 使用let的话会避免上述情况,在同一作用域,let若定义相同的变量,会报错(Identifier 'web' has already been declared);在不同作用域则可以。但可以改变值这点是与const不同的地方;let全局声明的变量异于var,不存在window对象中,
##### Object.freeze
冻结变量后,不可修改,在严格模式下会报错

"use strict" const HW= { url: 'https://www.helloworld.com', port: '8080' }; Object.freeze(HW); HW.port = '443'; //Cannot assign to read only property console.log(HW);



































































点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
5个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
5个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
5个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
5个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
5个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
小森森 小森森
5个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
5个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue