JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已;
由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变;
一 变量及作用域
1.基本类型和引用类型
// JS变量包含两种不同的数据类型的值:基本类型值和引用类型值;
// 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置;
// 基本类型值包含:Undefined|Null|Boolean|Number|String;
// 这些类型在内存中占有固定大小的空间;它们的值保存在栈空间,我们按值来访问;
// 2.引用类型值:保存在堆内存中的对象(可能由多个值构成),即变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象;
// 引用类型的值的大小不固定,因此不能保存在栈内存,必须保存在堆内存中;但可以将引用类型的值的内存地址保存在栈内存中;
// 当查询引用类型的变量时,先从栈内存中读取内存地址,然后通过地址找到堆内存中的值;=>按引用访问;
2.动态属性
// 定义基本类型值和引用类型值的方式相似:创建一个变量并为该变量赋值; // 但当这个值保存到变量中以后,对不同类型值可以执行的操作则不一样; var box = new Object(); // 创建引用类型; box.name = 'lee'; // 新增一个属性; console.log(box.name); // =>lee; var box = 'lee'; // 创建基本类型 box.age = 15; // 给基本类型添加属性; console.log(box.age); // =>undefined;
3.复制变量值
// 在变量复制方面,基本类型和引用类型也有所不同; // 基本类型赋值的是值本身; var box = 'lee'; // 在栈内存中生成一个box'lee'; var box2 = box; // 在栈内存中再生成一个box2'lee'; // box和box2完全独立;两个变量分别操作时互不影响; // 引用类型赋值的是地址; var box = new Object(); // 创建一个引用类型;box在栈内存中;而Object在堆内存中; box.name = 'lee'; // 新增一个属性; var box2 = box; // 把引用地址赋值给box2;box2在栈内存中; // box2=box,因为它们指向的是同一个对象; // 如果这个对象中的name属性被修改了,box.name和box2.name输出的值都会被修改掉;
4.传递参数
// JS中所有函数的参数都是按值传递的,即参数不会按引用传递; function box(num){ // 按值传递,传递的参数是基本类型; num +=10; // 这里的num是局部变量,全局无效; return num; } var num = 50; var result = box(num); console.log(result); // 60; console.log(num); // 50; function box(num){ return num; } console.log(num); // num is not defined; function box(obj){ obj.name = 'lee'; var obj = new Object(); // 函数内部又创建了一个对象,它是局部变量;但在函数结束时被销毁了; obj.name = 'Mr'; // 并没有替换掉原来的obj; } var p = new Object(); box(p); // 变量p被传递到box()函数中之后就被复制给了obj;在函数内部,obj和p访问的是同一个对象; console.log(p.name); // =>lee; // JS函数的参数都将是局部变量;也就是说,没有按引用传递;
5.检测类型
// 要检测一个变量的类型,通过typeof运算符类判断; // 多用来检测基本类型; var box = 'lee'; console.log(typeof box); // =>string; // 要检测变量是什么类型的对象,通过instanceof运算符来查看; var box = [1,2,3]; console.log(box instanceof Array); // =>true; var box2 = {}; console.log(box2 instanceof Object); var box3 = /g/; console.lgo(box3 instanceof RegExp); var box4 = new String('lee'); console.log(box4 instanceof String); // =>true;是否是字符串对象; var box5 = 'string'; console.log(box5 instanceof String); // =>false; // 当使用instanceof检查基本类型的值时,它会返回false;
6.执行环境及作用域
// 执行环境:定义了变量或函数有权访问的其他数据,决定了它们各自的行为; // 在Web浏览器中,全局执行环境=window对象; // 因此所有的全局变量和函数都是作为window对象的属性和方法创建的; var box = 'blue'; // 声明一个全局变量; function setBox(){ console.log(box); // 全局变量可以在函数里访问; } setBox(); // 执行函数; // 全局的变量=window对象的属性; // 全局的函数=window对象的方法; // PS:当执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁; // 如果是在全局环境下,需要程序执行完毕,或者网页被关闭才会销毁; // PS:每个执行环境都有一个与之关联的变量对象,就好比全局的window可以调用全局变量和全局方法一样; // 局部的环境也有一个类似window的变量对象,环境中定义的所有变量和函数都保存在这个对象中; // (我们无法访问这个变量对象,但解析器会处理数据时后台使用它); var box = 'blue'; function setBox(){ var box = 'red'; // 这里是局部变量,在当前函数体内的值是'red';出了函数体就不被认知; console.log(box); } setBox(); console.log(box); // 通过传参可以替换函数体内的局部变量,但作用域仅限在函数体内这个局部环境; var box = 'blue'; function setBox(box){ // 通过传参,将局部变量替换成了全局变量; alert(box); // 此时box的值是外部调用时传入的参数;=>red; } setBox('red'); alert(box); // 如果函数体内还包含着函数,只有这个内函数才可以访问外一层的函数的变量; // 内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数; var box = 'blue'; function setBox(){ function setColor(){ var b = 'orange'; alert(box); alert(b); } setColor(); // setColor()的执行环境在setBox()内; } setBox(); // PS:每个函数被调用时都会创建自己的执行环境;当执行到这个函数时,函数的环境就会被推到环境栈中去执行,而执行后又在环境栈中弹出(退出),把控制权交给上一级的执行环境; // PS:当代码在一个环境中执行时,就会形成一种叫做作用域链的东西;它的用途是保证对执行环境中有访问权限的变量和函数进行有序访问;作用域链的前端,就是执行环境的变量对象;
7.延长作用域链