JS后盾人--再一次的走进JS?

程序跑起来与避免延迟

如果你讲JS,你就不可能只讲JS

后盾人说开发就要用VScode(确实,Windows和Linux都可以跑)

然后就是第一天开发的时候装的那些插件

前端访问流程基本分析

托管到服务器上的东西,谁访问下载到谁的电脑里

就是如此简单。。

体验解析过程与变量提升

解析器在执行之前会先做变量的提升

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function hd() {
            if (false) {
                var web = "houdunren.com"
            }
            console.log(web)
        }
    </script>
</body>

</html>

比如这个代码,虽然web看上去毫无作用,但是你注释掉会报错,这就是因为有变量提升的存在

let&const暂时性死区TDC

如果使用let或者const来声明变量那会产生一个暂时性死区TDC(言下之意就是不能在声明变量之前使用变量),帮助我们让代码更加的合理(对声明的保护)

var-let-const的共同点

主要涉及的就是作用域(变量的作用域,先局部后全局)

可怕的全局污染

有的人不好好声明,可以加上这个让它强制声明:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        "use strict"
        mu = 777
    </script>
</body>
</html>

主要就是不要定义太多的全局变量,容易造成一些污染

块作用域这个先进的特性

这是块作用域的一些应用:

javascript 复制代码
(function(){    //立即执行函数,控制作用域,避免发生污染
    var $ = (window.$ = {})     //开放接口出去
    $.web = "hdcms"
    var url = "hdcms.com"
    $.getUrl = function(){
        return url
    }
}.bind(window)())

使用let或者const就可以有块作用域,优点就是不会影响先前定义的一些变量的值

const常量声明一探究竟

如果仅仅是这样函数是不会报错的,因为受限于作用域

const针对的标量不可以改变,但是引用类型是可以改变的

封装到块里面就又不会报错了

window全局对象污染与重复声明

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let screenLeft = 88 
        console.log(window.screenLeft)      //window对象里面的值没有被改变,如果使用var就会被改变
    </script>
</body>
</html>

这是window的全局对象,window对象保存着窗口的一些信息

针对var的重复声明,系统是不会报错的

Object.freeze冻结变量

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const HOST = {
            url:"baidu.com",
            prot:443
        }
        HOST.prot = 80
        console.log(HOST)
    </script>
</body>
</html>

这种情况变量的值是可以被改变的

我们可以使用Object的静态方法将其冻结,这样它的值就不会改变了

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const HOST = {
            url:"baidu.com",
            prot:443
        }
        Object.freeze(HOST)
        HOST.prot = 80
        console.log(HOST)
    </script>
</body>
</html>

标量与引用类型的传值与传址特性

老生常谈的传值调用和传址调用

null与undefined详解

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //null   undefined
        let config = {}
        let web = ""
        function show(name){
            console.log(name)
        }
        console.log(show())
    </script>
</body>
</html>

use strict严格模式高质量代码守卫

这不就是之前说的那个吗,不说了

使用严格模式就对啦!

相关推荐
VekiSon几秒前
ARM架构——C 语言+SDK+BSP 实现 LED 点灯与蜂鸣器驱动
c语言·开发语言·arm开发·嵌入式硬件
研☆香1 分钟前
JavaScript 历史列表查询的方法
开发语言·javascript·ecmascript
Elnaij2 分钟前
从C++开始的编程生活(18)——二叉搜索树基础
开发语言·c++
Java程序员威哥2 分钟前
【包教包会】SpringBoot依赖Jar指定位置打包:配置+原理+避坑全解析
java·开发语言·spring boot·后端·python·微服务·jar
a程序小傲3 分钟前
中国邮政Java面试被问:边缘计算的数据同步和计算卸载
java·服务器·开发语言·算法·面试·职场和发展·边缘计算
Java程序员威哥3 分钟前
Java微服务可观测性实战:Prometheus+Grafana+SkyWalking全链路监控落地
java·开发语言·python·docker·微服务·grafana·prometheus
钟佩颖6 分钟前
Vue....
前端·javascript·vue.js
漂流瓶jz7 分钟前
Polyfill方式解决前端兼容性问题:core-js包结构与各种配置策略
前端·javascript·webpack·ecmascript·babel·polyfill·core-js
全栈软件开发7 分钟前
PHP实时消息聊天室源码 PHP+WebSocket
开发语言·websocket·php
小尧嵌入式10 分钟前
【Linux开发二】数字反转|除数累加|差分数组|vector插入和访问|小数四舍五入及向上取整|矩阵逆置|基础文件IO|深入文件IO
linux·服务器·开发语言·c++·线性代数·算法·矩阵