前端系统化学习【JS篇】:（二）Javascript、变量和值的简述

小咪咪 2022-12-12 04:50 97阅读 0赞

**前言**

细阅此文章大概需要 10分钟\\color\{red\}\{10分钟\}10分钟左右  
本篇中简要概述\\color\{red\}\{简要概述\}简要概述了：  
JavaScript语言的三部分构成  
JavaScript中的变量  
变量的多种定义方式以及他们的区别  
值的多重定义方式

如果有任何问题都可以留言给我，我看到了就会回复，如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。  
下一篇会尽快更新，已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。  
如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家

**JavaScript语言的简述**

JavaScript作为客户端语言是由三部分构成的

按照相关的JS语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能

ECMAScript（ES）3/5/6…:  
JS的语法规范（变量，数据类型，操作语句等等），描述了该语言的语法和基本对象

DOM（document object model）：  
文档对象模型（描述处理网页内容的方法和接口），提供一些JS的属性和方法，用来操作页面中的Dom元素

BOM（browser object model）：  
浏览器对象模型（描述与浏览器进行交互的方法与接口），提供一些JS的属性和方法，用来操作浏览器的

**JavaScript中的变量 variable**

变量：可变的量。在编程语言中，变量就是一块内存空间，用来存储和代表不同值的东西。  
是用来存储值的一块内存空间  
若存储的是基本数据类型数据，则值数据本身就存储在该变量的内存空间中 【存的是值】  
若要存储的值为引用数据类型，则该变量中存储的是值的【堆内存地址】 【存的是值的地址】

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，
    不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，
    欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。
    好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
    每天更新最新技术文章干货。

变量的多重定义方式

var /let /const /function /class /import /Symbol

变量多重定义方式的区别

ES3/5中创建变量用var  
ES6中创建变量用let、const（与var的区别在于变量提升）  
let创建的是 变量 ,只不过他的指针指向可以随意的修改。  
const创建的是 看上去像常量的变量 ,只不过他的 【指针指向一旦确定，就不能再修改。】 【看起来像但并不是常量】  
所以const创建的变量值是不允许被修改的 【可参照java中Final修饰的变量理解】

Function 函数【堆内存】  
function创建函数  
函数的三种角色【会在函数章节再来细谈】  
普通函数（作用域和作用域链）  
构造函数（类/实例/原型和原型链）  
（在函数在作为构造函数执行时，会创建一个实例，此时的函数自身相当于一个类）

普通对象（键值对/属性值属性名）

Class 类【堆内存】  
class创建类（ES6中创建自定义类的新语法）  
导入模块  
import导入模块【也可以创建变量】

/* 变量的多重定义方式 */
            //---------------------------------
            //ES3/5
            //1.var
            var a = 12;
            console.log(a);
            a= 13;
            console.log(a);
            //输出的是代表的值，存储的内容
            //----------------------------------
            //ES6
            //2.创建变量用let
    
            let b = 100;
            b = 200;  
            //----------------------------------
            //3.const创建的变量值是不允许被修改的【参照java中Final修饰的变量来理解】
            const c = 1000;
            c = 2000;//此处就会报错，因为不可被修改
            //----------------------------------
            //4.function创建函数
            Function fn1(){ }//函数声明方式
            let fn2 = function fn2(){ };//函数表达式方式（又称函数字面量）
            //两种方式的区别就在于【在词法解析阶段（变量提升中）会不会被提前声明并创建】
            //=>具体会在函数一章中细谈
            //----------------------------------
            //5.class创建类也相当于创建变量
            class A{ }
            //----------------------------------
            //6.ES6的模块导入也可以创建变量
            import B from './B.js';//导入一个模块，创建一个变量B来存储这个模块中的一些信息
            //----------------------------------
            //7.Symbol是创建唯一值
            //唯一值：若给数据赋Symbol属性，则即使数据内容一样，但两个变量并不相等，
            let n = Symbol(100);
            let m = Symbol(100);
            let falg = n==m;//false

值的多重定义方式

字面量方式  
构造函数方式

对于 【引用数据类型】 来说，两种方式都是创建所属类的实例，并且都是对象数据类型的  
而对于 【基本数据类型】 来说，两种方式创建出来的结果是不一样的：  
字面量方式创造的是【基本数据类型值】  
构造函数方式创建的是【引用数据类型值】 以Number类型来举例【两种方式都是创建Number类的实例】【都可以调取Number.prototype原型上的方法】

而当 【基本类型值】 直接调取所属类原型上的方法时，也相当于先用 【new 所属类(该值)】处理一下，然后再去调用所属类原型上的方法 。 【可以参照java中的“包装类”来理解】

Symbol/BigInt不能被new创建值，因为报错他两个并不是构造函数，只能使用字面量来创建。【但是他俩也有所属类，也能使用其中的valueOf方法】

> 作者：Hypnotize 链接：https://juejin.im/post/6867514861455310861 来源：掘金