JavaScript变量@慕课网原创_慕课网

以下内容不涉及严格模式，因为当你使用webpack等打包工具会自动转为严格模式，假如你用来写常规的js文件，没必要使用严格模式。

关于严格模式相关，后续有机会单独写，现在急着了解可以自行查阅，关键词：use strict

本人不喜欢冒号，如果有感觉不适的，请坚持下去。。。

JS怎么用

相关CSS类比见文章：CSS入门之引用

内部标签

与CSS的使用类似，CSS使用的内部标签是<style></style>，JS的标签为<script></script>。

不同点在于，CSS的标签建议在head里面，而JS的标签建议使用在body的最后，相关优化不在此说明。

如下：
```
<body>

    
    <script>
        console.log('我是JS')
    </script>
</body>
```
引用

与CSS的引用类似，CSS使用的引用标签是<link>，而JS还是<script>，而且现代浏览器不需要script标签申明属性type，已经默认使用JS了。
```
<body>

    
    <script src='链接地址/any.js'></script>
</body>
```
any.js内容：

console.log('我是引用的JS')

内部标签与引用当然可以混写，因为是标签，所以理论上可以写在任何html内，head内也可以写，混写在其他标签内也可以，这里是推荐写在body后面，主流也是写在body后面，写在head等地方，唯独的可能性需求就是优化，这些不在此列。希望各位上手过程中，知道写在body的最后就行。

变量知识体系

动态类型

所谓动态类型是相对于静态类型而言，形如C家族系列语言可视为静态类型代表，如：

C家族
```
// C
int a = 1
char b = '字符串'

// C++
// 与C 类似

// Object-C
// 向下兼容C
NSInteger a = 1
NSString *b = @'字符串'
```
声明定义一个新的变量时候，需要指明变量的数据类型，如上述的int与NSInteger代表对应整型，char与NSString代表对应字符串。

优点：代码在编译期就已经知道有没有问题，在能运行时更加保证准确性，减少运行报错。

缺点：声明麻烦；后续使用如果需要用到相同的变量但数据类型不同，也很麻烦。
JS
```
var a = 1
var b = '字符串'
```
声明定义一个新的变量时候，不需要指明变量的数据类型，在执行的时候回自动匹配数据类型。

优点：不用麻烦动脑前期设置类型，用到时候直接声明使用即可；后续也可以直接重新赋值为另一种数据类型。

缺点：编译期没有检查类型什么的，只在运行的时候才知道真正的类型，从而识别错误等等；如果存在不同数据类型赋值给同一个变量并操作，那么会极大的耗费性能。

var

不再推荐

作用域

作用域可以简单理解成被{}所包裹着的内容，但不包含对象与单纯的{}封起来，如下内容不包含：
```
// 对象
{
    a: 1,
    b: 2
}

// 纯大括号
// 现代浏览器都直接忽略（提升）这种大括号，所以大括号内部内容与没有大括号效果一样，这样写徒增消耗。
{
    var x = 'x'
}
// 相当于
var x = 'x'
```
类比作用域理解成地球，地球就是一个全局作用域，每个国家是不同的子作用域，每个省又是国家的子作用域。不同子作用域内规则不同，互不干扰，但都可以利用（遵守）父级作用域的资源（如省可以使用国家与地球，国家可以使用地球）。

即，全局作用域包含着所有子作用域（局部作用域），每个子作用域又包含自己的子作用域，子级可以使用父级或更高级的作用域资源，但是高级作用域不可以使用子级资源（如浙江省部分法律必须依照宪法制定，而宪法判断的时候不可能依照浙江省某法律）。

因为子作用域互不干扰，所以很多人喜欢使用!function(){}这种形式来开头，书写js文件，就是人为的产生子作用域，然后与其他人的js文件使用过程中不至于命名冲突。

作用域提升

如果声明没有使用var，则将变量提升到上一级作用域，如果还没有，则继续上一级作用域，直到全局都没有，则生成一个全局变量，如：

var a = 1
b = 2

// 下面function请理解成子作用域
function defCD() {
    c= 3 // 这里接是变量提升了，提升到了上级即全局作用域
    var d = 4
    // 下面是子作用域内打印
    // 因为子作用域可以获取全局资源，所以可以将全部正常打印出来
    console.log(a, b, c, d) // 1, 2, 3, 4
}
defCD() // 运行这个函数，从而使c, d的声明生效
// 下面为全局调用打印
console.log(a, b, c) // 1, 2, 3
// 由于全局不会考虑子作用域资源，所以d打印无效
console.log(d) // d is not defined

小优化

var变量声明提升，所有的var声明都会提升到当前作用域的顶端，我们可以手动提升。

var a = 1
// 被解释成
var a
a = 1

// 优化示例
var b = 2
var c = 3
// var b
// b = 2
// var c
// c = 4

// 优化成
var b, c
b = 2
c = 3

稍微超纲一下，如果是函数，一样：

function f() {}

// 优化为
var f
f = function() {}

let

ES6 强烈推荐，尽量完全替代var

let基本与var相同，唯一也是最大的区别就是，let锁定作用域，会被代码块（if, for等的大括号）作用，如：

if(1) {
    var a = 1
}

if(1) {
    let b = 2
}

console.log(a)
console.log(b)

作用域提升属于奇淫巧技，在你非常熟练的情况下，可以带来一点点的优势，但是一旦牵扯到合作等非单人项目，会坑死队友，所以强烈推荐let，不要使用var，除非你非要去弄什么ie，然后还不webpack工具打包处理。。。

const

常量，不要滥用，明确使用场景是重要的。

按说常量不算是变量体系内容，但是JS的这个常量比较特别，具体如下：

const a = 1
// 报错，因为是常量，不能修改。
a = 2 // Assignment to constant variable.

const b = {
    b1: 1
}
b = 2 // 报错没问题
b.b1 = 2 // 正确

没错，JS的常量就是说这个首次赋值后，不能对变量本身再赋值，但是可以对变量的属性赋值。。。

小坑

const不能光声明不赋值，必须声明同时赋值，如下：

const c // Missing initializer in const declaration，报错

文章如果能给你带来一点帮助，我就很开心了。
我是风蓝小栖，喜欢我的文章，请随手关注一下，定期更新，慢慢干货。

JavaScript变量原创

动态类型

var

let

const