当前位置：首页 > 编程语言 > 走进 JAVASCRIPT 黑洞，涵盖 es5 / es6 / es7 / es8 知识点

走进 JAVASCRIPT 黑洞，涵盖 es5 / es6 / es7 / es8 知识点

2021-03-17 12:27

阅读：692

YPE html>

标签：lan   提前   常量   web   apc   模式   str   style   abc   

让程序跑起来与避免延迟：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
head>
body>
  CYY

  
  script src="1.js">script>
body>
html>

 

变量声明基础知识：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
head>
body>
  CYY

  script>
    //   一次定义多个变量
//    var a = 1, b = 2, c = 3;

//    var a = b = c = 4;

//    var name = 99;
//    console.log(name);
   console.log(window.name);

//    var a = 1;
//    console.log(a);
   console.log(window.a);

   console.log(window);

//    弱类型语言
   var web = ‘cyy‘;
   console.log(typeof web);
   web = 99;
   console.log(typeof web);
   web = {};
   console.log(typeof web);
  script>
body>
html>

 

体验解析过程与变量提升：

把变量的声明提前（var）

这是属于js不好的地方，因此我们推荐使用let和const来声明变量

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
head>
body>

  script>
    // 没有打印出a，而是直接报错
    // 说明在执行代码之前，js已经先分析一遍了 
//    var a = 1;
//    console.log(a);
//    var class = 2;
//    console.log(class);

    // 先提升处理 var a;
    // 然后console.log(a);
    // 然后赋值a = 1;
    // console.log(a);
    // var a = 1;

    // function hd(){
    //     if(false){
    //         var a = 1;
    //     }
    //     console.log(a);
    // }
    // hd();
    // 以上代码相当于
    function hd(){
        var a; // 变量提升
        if(false){
            a = 1;
        }
        console.log(a);
    }
    hd();



  script>
body>
html>

 

let&const 暂时性死区TDC：

使用let的话，必须先声明再使用，不存在变量提升；

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
body>
    script>
        // console.log(a);
        // var a = 1;

        // console.log(b);
        // let b = 1;

        // console.log(c);
        // const c = 1;

        // 如果函数内部没有定义a，则会去函数外部找
        // let a = 1;
        // function func(){
        //     console.log(a);
        // }
        // func();

        // let a = 1;
        // function func(){
        //     // 如果函数内部声明了a，则必须先声明，再使用，否则报错
        //     console.log(a);
        //     let a = 2;
        // }
        // func();

        function func2(a=b,b=3){}
        func2();

        function func2(a=3,b=a){}
        func2();
    script>
body>
html>

 

var-let-const的共同点：

函数中可以访问到外部全局的变量

函数内部如果找不到变量，会顺着作用域链向外查找，直到null
DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
body>
    script>
        // 函数内部如果找不到变量，会顺着作用域链向外查找，直到null
        // var a = 1;
        // function func(){
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // let a2 = 1;
        // function func2(){
        //     console.log(a2);
        // }
        // func2();
        // console.log(a2);

        // const a3 = 1;
        // function func3(){
        //     console.log(a3);
        // }
        // func3();
        // console.log(a3);

////////////////////////////////////////////////////////

        // var a = 1;
        // function func(){
        //     var a = 3;
        //     // 此时打印函数内部的变量a，与函数外部的变量a无关
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // var a = 1;
        // function func(){
        //     a = 3;
        //     // 此时修改的是函数外部的变量a，因为函数内部并没有声明变量a
        //     console.log(a);
        // }
        // func();
        // console.log(a);

////////////////////////////////////////////////////////

        // let a = 1;
        // function func(){
        //     let a = 3;
        //     // 此时打印函数内部的变量a，与函数外部的变量a无关
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // let a = 1;
        // function func(){
        //     a = 3;
        //     // 此时修改的是函数外部的变量a，因为函数内部并没有声明变量a
        //     console.log(a);
        // }
        // func();
        // console.log(a);

////////////////////////////////////////////////////////

        const a = 1;
        function func(){
            const a = 3;
            // 此时打印函数内部的变量a，与函数外部的变量a无关
            console.log(a);
        }
        func();
        console.log(a);

        const a = 1;
        function func(){
            a = 3;
            // 此时修改的是函数外部的变量a，因为函数内部并没有声明变量a
            console.log(a);
        }
        func();
        console.log(a);
    script>
body>
html>

 

可怕的全局污染：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
body>
    script>
        // 不使用var声明也可以使用变量
        // web = ‘cyy‘;
        // console.log(web);

        // 污染全局，全局也可以访问到函数内部的变量
        // function func(){
        //     a = 1;
        // }
        // func();
        // console.log(a);

        // 严格模式可以解决不使用var声明造成的全局污染问题
        "use strict";
        function func(){
            a = 1;
        }
        func();
        console.log(a);
    script>
body>
html>

 

块级作用域这个先进的特性：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
body>
    script>
        // var没有块级作用域，直接是全局作用域，因此循环结束后影响到了全局的变量
        // var i = 99;
        // for(var i=0;i
        //     console.log(i);
        // }
        // console.log(i);

        // es6存在块级作用域，使用let不会影响到全局作用域
        // let i = 99;
        // for(let i=0;i
        //     console.log(i);
        // }
        // console.log(i);
    script>
body>
html>

 

避免污染全局的js方法：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
body>
    script>
        var web = 2;
    script>

    script src="script.js">script>

    script>
        // console.log(web);
        // console.log(url);
        console.log($.getUrl());
    script>
body>
html>

script.js

(function(){
    var $ = window.$ = {};
    $.web = 1;
    var url = ‘abc‘;
    $.getUrl = function(){
        return url;
    }
}.bind(window)());

 

使用es6块级作用域避免全局污染：

Document

script.js

// 使用花括号给插件中的变量一个块级作用域
{
    let url = ‘abc‘;
    var url2 = ‘xxx‘;
}

 

const常量声明：


Document

 

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


Document

 

Object.freeze 冻结变量：


Document

 

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


Document

 

null与undefined详解：


Document

 

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


Document

 

 

走进 JAVASCRIPT 黑洞，涵盖 es5 / es6 / es7 / es8 知识点

标签：lan   提前   常量   web   apc   模式   str   style   abc   

原文地址：https://www.cnblogs.com/chenyingying0/p/13970234.html

上一篇：实验3 C语言分支语句和循环语句编程应用

下一篇：Java内存泄漏

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：走进 JAVASCRIPT 黑洞，涵盖 es5 / es6 / es7 / es8 知识点
文章链接：http://soscw.com/index.php/essay/65309.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1