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

弱类型

在JS中变量类型由所引用的值决定

1var web = "helloWorld";
2console.log(typeof web); //string
3web = 99;
4console.log(typeof web); //number
5web = {};
6console.log(typeof web); //object

变量提升

解析器会先解析代码，然后把声明的变量的声明提升到最前，这就叫做变量提升。
使用 var 声明代码会被提升到前面，赋值还在原位置

1console.log(a); //undefined
2var a = 1;
3console.log(a);  //1
4
5//以上代码解析器执行过程如下
6var a;
7console.log(a); //1
8a = 1;
9console.log(a); //1

1var web = "helloworld";
2function hd() {
3  if (false) {
4    var web = "你好，世界";
5  }
6  console.log(web);
7}
8hd();

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

TDZ(暂时性死区)

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

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

但是以下可以

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

块作用域

var、let、const共同点----

全局作用域中定义的变量，可以在函数中使用
函数中声明的变量，只能在函数及其子函数中使用;函数中声明的变量就像声明了私有领地，外部无法访问

1var hw =22;
2function hello(){
3  return hw +=11;
4}
5console.log(hello());    // 33

1function hw() {
2  var web = "你好，世界";
3
4  function show() {
5    console.log(web);
6  }
7  show(); //子函数结果: 你好，世界
8  console.log(web); //函数结果: 你好，世界
9}
10hw();
11console.log(web); //全局访问: hw is not defined

var 使用 var 声明的变量存在于最近的函数或全局作用域中，没有块级作用域的机制。没有块作用作用域时var也会污染全局，使用let有块作用域时则不会。 var 全局声明的变量也存在于 window对象中

1 //没有块任用时使用立即执行函数模拟块作用域
2  (function() {
3   var $ = this.$ = {};
4    $.web = "后盾人";
5   }.bind(window)());
6   console.log($.web);
7   //有了块作用域后
8    {
9 let $ = (window.$ = {});
10  $.web = "你好，世界;
11 }
12  console.log($.web);

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

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

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

1    if (true) {
2    let web = 'hdcms',url = 'houdunren.com';
3    console.log(web); //hdcms
4    }
5     console.log(web); //web is not defined

块内部都是可以访问到上层作用域的变量

1   if (true) {
2   let user = "linmeng";
3   (function() {
4      if (true) {
5         console.log(`这是块内访问：${user}`);
6        }
7      })();
8   }
9  console.log(user);

每一层都是独立作用域，里层作用域可以声明外层作用域同名变量，但不会改变外层变量

1function run() {
2  hw = "helloworld";
3  if (true) {
4    let hw = "hwoo";
5    console.log(hw); //hwoo
6  }
7  console.log(hw); //helloworld
8}
9run();

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

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

重复定义

使用var 可能会造成同名变量
使用let的话会避免上述情况，在同一作用域，let若定义相同的变量，会报错（Identifier 'web' has already been declared）；在不同作用域则可以。但可以改变值这点是与const不同的地方；let全局声明的变量异于var,不存在window对象中，

Object.freeze

冻结变量后，不可修改，在严格模式下会报错

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

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

弱类型

变量提升

TDZ(暂时性死区)

块作用域

重复定义

Object.freeze

评论区

相关推荐