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

LinMeng 等级 721 0 0
弱类型
  • 在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);



































































收藏
评论区

相关推荐

采用SHA256,AES加密
采用SHA256,AES加密 // import引用AES源码js import CryptoJS from "cryptojs/cryptojs"; import md5 from 'jsmd5'; console.log(process.env); var lightKey; if (process.env.NODE_ENV "pr
《javascript高级程序设计》核心知识总结
此文是对js高级程序设计一书难点的总结,也是笔者在看了3遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解。 摘要 js基本的数据类型和关键点 变量,作用域和内存问题 垃圾回收机制 面向对象的程序设计 实现类与继承的经典方式 BOM和DOM对象 DOM扩展与高级API介绍 高级编程技巧 跨文档消息传递和aja
《前端实战总结》之变量提升,函数声明提升及变量作用域详解
之所以会写这篇文章,主要源于笔者在重构老项目的时候发现了一个bug,导致某个插件不生效了,在review加search code加断点调试之后,发现了原因:一个同名的变量将插件方法给覆盖了,ohmyGad。 正文 1.变量是如何被覆盖的 在一般情况下,js代码都是自上而下执行的,对于同一个变量,我们可以通过如下方式来修改: js var a 1;
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型 在JS中变量类型由所引用的值决定 var web "helloWorld"; console.log(typeof web); //string web 99; console.log(typeof web); //number web {}; console.log(typeof web); //object 变量提升
JS - 作用域
一、作用域 作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合 换句话说,作用域决定了代码区块中变量和其他资源的可见性 举个例子 function myFunction() {     let inVariable  "函数内部变量"; } myFunction();//要先执行这个函数,否则根本不知
彻底理解js的执行上下文,以及变量对象
在js中,执行上下文(Execution Context)是非常重要的一种对象,它保存着函数执行所需的重要信息,其中有三个属性:变量对象(variable object),作用域链(scope chain),this指针(this value),它们影响着变量的解析,变量作用域和函数this的指向。 上下文栈(Execution Context S
彻底理解js的作用域链
在之前的文章(https://www.helloworld.net/p/G4dFV7tALU4J)中我已经介绍了执行上下文的变量对象。在这一篇文章我要介绍执行上下文的作用域链了。 执行上下文.作用域链(scope chain) 作用域链与变量对象有着密不可分的关系,因为作用域链就是变量对象的数组!其中第
js 理解模块化
经常在面试或者其他文章看到关于模块化的问题,之前也只是寥寥看了几次,对于 CommonJS,AMD,ES6也说不出个所以然,于是今天抽空好好看了 红宝书第4版关于模块化的介绍,这里记录一下。 理解模块模式 初衷在开发中肯定有设计大量三方库或者业务逻辑代码,较好的方式是将其分割为多个小模块,最后以一定的方式连接起来
JS核心原理理解闭包
前置概念在正式看闭包之前,我们先来学习一下前置知识,那就是JS中的作用域,我们知道,在ES5之中,作用域分为两种:全局作用域和函数作用域,随着ES6的到来,新增了块级作用域,想更好的理解闭包,那么搞清楚作用域是首要条件全局作用域我们知道,对于变量而言,我们一般会分成两类:全局变量和局部变量,一般定义在最外围环境的为全局变量,定义在函数当中的为局部变量,在we
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内
秒懂js作用域与作用域链
JavaScript 中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获!好了下面开始我们的正文作用域常见的解释(什么是作用域)1. 一段程序代码中所用到的名字并不总是有效,而限定它的可用性的范围就是这个名字的作用域;2. 作用域规定了
Cocos Creator3.x中使用AES加密解密
Cocos Creator升级3x版本之后就不再支持js了,直接装包cryptojs会报错,require 函数在ts里面 根本就不能识别,但是我们项目中需要用到js的包来实现AES加密解密,尝试了多种方法终于修成正果 使用方法import CryptoJS from "cryptojs.min.js";const aseKey "12345678"
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n