小课堂【JS变量的作用域及类型】

1.背景介绍

Javascript和Java、C这些语言不同，它是一种无类型、弱检测的语言。它对变量的定义并不需要声明变量类型，我们只要通过赋值的形式，可以将各种类型的数据赋值给同一个变量。

i=100;//Number类型

i="variable";//String类型

i={x:4};//Object类型

i=[1,2,3];//Array类型

2.知识剖析

变量的声明

JS中变量申明分显式申明和隐式申明。

var i=100;//显式申明

i=100;//隐式申明

在函数中使用var关键字进行显式申明的变量是做为局部变量;而没有用var关键字，使用直接赋值方式声明的是全局变量。

当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量，这一点一定要注意。

全局变量和局部变量

当JS解析器执行时，首先就会在执行环境里构建一个全局对象，我们定义的全局属性就是做为该对象的属性读取，在顶层代码中我们使用this关键字和window对象都可以访问到它。

而函数体中的局部变量只在函数执行时生成的调用对象中存在，函数执行完毕时局部变量即刻销毁。

因此在程序设计中我们需要考虑如何合理声明变量，这样既减小了不必要的内存开销，同时能很大程度地避免变量重复定义而覆盖先前定义的变量所造成的Debug麻烦。 　

变量的作用域

任何程序语言中变量的作用域都是一个很关键的细节。JS中变量的作用域相对与JAVA、C这类语言显得更自由，一个很大的特征就是JS变量没有块级作用域，函数中的变量在整个函数都中有效。

JS变量的两种类型

基本类型值：指的是保存在栈内存中的简单数据段；

引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象；

JS变量的两种访问方式

基本类型值：按值访问，操作的是他们实际保存的值；

引用类型值：按引用访问，当查询时，我们需要先从栈中读取内存地址，然后再顺藤摸瓜地找到保存在堆内存中的值。

3.常见问题

函数中变量的隐式声明和显示声明有什么区别呢？

4.解决方案

//定义一个输出函数
function outPut(s){
document.writeln(s)
}
//全局变量
var i=0;
//定义外部函数
function outer(){
//访问全局变量
outPut(i);
//定义一个类部函数
function inner(){
//定义局部变量
var i = 1;// i=1; 如果用隐式申明　那么就覆盖了全局变量i
outPut(i);
}
inner();
outPut(i);
}
outer();

//定义一个输出函数
function outPut(s){
document.writeln(s)
}
//全局变量
var i=0;
//定义外部函数
function outer(){
//访问全局变量
outPut(i);
//定义一个内部函数
function inner(){
outPut(i);
var i=1;
outPut(i);
}
inner();
outPut(i);
}
outer();

JS函数体中声明的本地变量在整个函数中都有效，因此在上面代码中var　i = 1 ;在inner函数中都有效，实际上显式声明的变量i是在预编译时就已经编译到调用对象中了。

不同于隐式声明变量在解释时才被定义为全局变量，只是在调用outPut(i)时，还没有将它初始化变量，此时的本地变量i是未赋值变量，而不是未定义变量，因此输出了undefined。

相当于：

function inner(){
var i; //定义但不赋值
outPut(i);
i=1;
outPut(i);
}

5.编码实战

6.扩展思考

基本类型和引用类型在赋值上的区别是什么？

//定义一个输出函数
function outPut(s){
document.writeln(s)
}
var a = 3;
var b = a;
outPut(b);
a = 4;
outPut(a);
outPut(b);

//定义一个输出函数
function outPut(s){
document.writeln(s)
}
var a_array = [1,2,3];
var b_array = a_array;
outPut(b_array);
a_array[3] = 4;
outPut(b_array);

7.参考文献

参考一：JS变量以及其作用域详解

参考二：JS的基础类型与引用类型

8.更多讨论

函数中参数是怎么赋值的？

function setName(obj) {
                obj.name = "Nicholas";
                obj = new Object();
                obj.name = "Greg";
                }
                var person = new Object();
                setName(person);
                document.write(person.name);

PPT链接：https://ptteng.github.io/PPT/PPT/JS-75-The%20scope%20and%20type%20of%20JS%20variable.html#/

视频链接：https://v.qq.com/x/page/f0391jlhdhg.html