标签：console name JavaScript say log allow 变量

变量， 是编程语言的核心，也是编程语言的灵魂。那么JavaScript中的变量是怎么回事？

1 写在开始的废话

之前我写过一篇JavaScript中的四兄弟，介绍了JavaScript中声明变量的四种方式var,function,let和const。我就知道那个时候我就挖了一个坑，这篇文章我们详细一些。

2 导言

JavaScript中的变量可以在两个维度进行分类，①域， ②可变性

2.1 域（作用域）

什么是域？ 可访问、操作一个变量的区域（范围）。有顶层域，也叫全局域，也有局部域，局部域可在函数和{}内产生。在全局域内创建的变量就是全局变量，以此类推，在局部域内创建的变量

作用域是在定义的时候产生的

 var name = 'jianyanzhi';

 function say() {
    var name = 'jianyanzhi-say';
    console.log(name);
    name = 'say-end-name';
    console.log('say-end-name:', name);
 }
 say();
 console.log(name);

上面这段代码哪些是全局变量哪些是局部变量呢？我们来分析一下。

图中，红框的部分就是全局域，在全局域中，我们创建了name和say两个变量。再缩小范围，绿框的部分就是由函数say创建的局部域，在say中只创建了name这个变量，所以绿色下划线的name变量就是局部变量。而函数say中第三行又把name这个变量重新赋值，此时操作的是局部变量。

 var allowVar = 'jianyanzhi', allow = true;
 if (allow) {
     function allowFunction () {
         console.log('allow-say')
     }
     let allowLet = 'allowLet';
     const allowConst = 'allowConst';
     var allowVar = 'allowVar';
     console.log('allow', allowFunction);
     console.log('allow', allowLet);
     console.log('allow', allowConst);
     console.log('allow', allowVar);
 }
console.log('global', allowFunction);
console.log('global', allowVar);
console.log('global', allowLet);
console.log('global', allowConst);

同样的问题，哪些是局部变量，哪些又是全局变量？我们来分析下；

代码执行的结果是什么？

allow "function allowFunction () {console.log('allow-say')}"
allow "allowLet"
allow "allowConst"
allow "allowVar"
global "function allowFunction () {console.log('allow-say')}"
global "allowVar"
ReferenceError allowConst is not defined // global "allowConst"
ReferenceError allowLet is not defined //  global "allowLet"

为什么会产生这样的结果？

1. if条件语句中由var和function创建的变量，会自动归到if语句所属的域中 因此我们看到global的输出中，var和function的输出和allow的输出是一致的。不只是if语句，还有单纯的{}也是,比如{ var a = 1; function aFn() {} };
2. var和function创建局部变量的时候，只能在function中创建有效，var是无法在{}块级作用域中创建局部变量的;
3. let和const创建的变量则属于声明时所在的域,包括函数和{}。

全局变量和局部变量的使用

1. 全局变量作为持久性变量使用，全程有效，而不是拿来存储某个临时的值，谨慎修改

2. 全局变量和局部变量存在同名的情况下，根据就近原则，优先使用局部变量，要防止污染全局变量

2.2 可变性

根据值的可变性来分类，可变的是变量，不可变的是常量。变量可后续随意更改，值是动态的，而常量一旦确定则无法修改，值是恒定、静态的。

var date = '2022-01-01';
const codeLang = 'JavaScript';
const articleData = { title: 'JavaScript中的变量', author: '简言之' };

date = '2022-04-04'; // success

codeLang = 'Java'; // TypeError: Assignment to constant variable

articleData = { title: 'haha', author: '简言之' } // TypeError: Assignment to constant variable
articleData['title'] = 'haha';  // success

创建了两个常量和一个变量。变量date后续可以随意更改，更改有效。
常量就无法更改了，codeLang和articleData在修改的时候抛出了类型错误。表示它们都是常量，无法更改。可为什么后面把title改为haha的时候就更改成功了？因为常量保存的是变量的值，这个值可以是一个普通值也可以是一个内存地址值，只要确保这个值是恒定的，其他由你使劲造。

变量与常量的使用

1. 根据编码逻辑来适当使用常量，虽然变量可满足所有要求，但是合适使用常量可以增强代码的语义性

2. 上述案例中的articleData通过访问属性并修改值这种方式谨慎使用，修改的属性过多时，还是键值对合并之后保存到一个新常量中较为妥当

标签：console,name,JavaScript,say,log,allow,变量
来源： https://www.cnblogs.com/cyancoco/p/16098955.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。