javascript变量浅析
变量声明
javascript 使用var + 变量名 声明变量,因为javascript是弱类型语言,
所有我们可以随意更改已有变量的类型。
var b=1;
b='2',
另外不同于c#中的var隐式类型推断必须在声明变量式指定变量值,
编译器会根据值类型推导出变量类型。
而在javascript中我们可以只声明变量而暂不赋值,对于未赋值的变量,其类型和值都是undefined
var a;
console.log(a);//output:undefined
typeof a //output :undefined;
作用域与变量提升
javascript中不存在块级作用域,只存在所谓块
通常指一对花括号中的语句,
常见的 有if--else try --catch for循环等
例如在c#中
for(var i=0;i<10;i++)
{
}
Console.WriteLine(i)//error: The name 'a' does not exist in the current context
而在javascript因为没有块级作用域,只有全局作用域和函数作用域,在块中声明的变量等同在当前变量作用域中(全局或者函数作用域)
直接声明
for(var i=0;i<10;i++){
}
console.log(i);//output: 10;
当我们使用到一个变量时,会现在当前作用域内查找,那如果找不到怎么办?理论上函数应该能访问一个更高一层上下文的变量对象。
实际上它正是这样,这种机制是通过函数内部的[[scope]]
属性来实现的。
[[scope]]
是所有父变量对象的层级链,处于当前函数上下文之上,在函数创建时存于其中。
简单来说,[[scope]]保存了当前上下文所有的变量对象,指定了变量的搜索范围。
需要强调的是 函数的作用域链在创建时就作为一个属性存在,是静态不变的,不受调用上下文影响。
var a=0,c=3;
function test(){
var a=10;
var b=1;
/*创建时[[scope]]属性保存调用上下文的变量对象,包含test函数作用域变量{a,b},以及全局作用域{a,c}*/
function fun1(){
console.log(a);
console.log(c);
}
fun1();//调用时,先查找自身作用域范围内是否有a,c 变量,如果没有,则在[[scope]]中根据上下文逐层查找。 output:10,3;
fun2();//调用时,同样先查找活动变量,然后在[[scope]]中的查找,即在全局变量中搜索。 output:0,ReferenceError: b is not defined;
}
//创建时,其上下文为全局对象,故其[[scope]]属性包含全局变量{a,c}
function fun2(){
console.log(a);
console.log(b);
}
javascript编程范式通常建议我们在将可能用到的变量都声明到代码的顶部,这样做不仅更直观还能避免一些因为变量提升引发的异常
所谓变量提升是指:JavaScript 会提升变量声明。这意味着 var 表达式和 function 声明都将会被提升到当前作用域的顶部。
var myvar = 'my value';
(function() {
console.log(myvar); //output: undefined
var myvar = 'local value';
})();
由于没有块级作用域,for循环中的变量声明会被提升到当前作用域的顶部
var a=10;
for(var i =0;i<10;i++){
var x =i;
}
该代码等同于
var a,i, x;
a=10;
for(i =0;i<10;i++){
x =i;
}
另外虽然var 和function 都会提升到变量的顶部,但如果存在同名函数声明,函数声明会覆盖掉变量声明
console.log(a);// output: function a(){};
var a =1;
console.log(a);//output: 1;
a=2;
function a(){};
console.log(a); //output:2;
如果未用var 声明一个变量,而直接赋值,会使得其成为全局对象的一个属性。
var c,b;a;//错误的分号导致a没有被正常声明
console.log(a);//output:ReferenceError: a is not defined; 没有变量提升
a=2;
window.a //output: 2 浏览器中全局对象对实现为window
变量类型与参数传递
- 变量类型与赋值
javascript中的类型分为值类型和引用类型,值类型的值保存在栈中,它们的值直接存储在变量访问的位置。
引用类型存储在堆中,变量保存的是对象的引用,指向存储对象的内存处,一般我们可以简单理解为
变量存储对象的指针,但该引用不等同与指针,不能进行指针的相关操作(p++).
javascript中值类型即原始类型 Undefined、Null、Boolean、Number 和 String,虽然在一些语言如c#中string被实现为引用类型,
但在javascript中string为值类型。其余的对象均为引用类型, 我们可以 typeof value ===object 判断,但是需要排除null,这通常被认为javascript实现上的一个错误
关于引用类型变量重要的一点是,但如果我们将一个新对象赋值给已有变量,改变量保存的引用地址会发生改变,但如果我们更新了一个对象的属性,该对象的内存地址并不会改变,
改变的只有内存对象的值。下面的代码将说明这个问题。
var a ={m:1}; //假设{m:1}的内存地址为0x001 则a保存的地址变量为 0x001
var b=a; // b同时指向0x001
a.x = a ={n:2}; //变量的赋值是同时进行的,也就是 a.x={n:2}和a={n=2}是没有先后顺序的.
// 假设{n:2} 地址为0x002 则 变量a 的地址被重新指向到 0x002, 同时原地址 0x001对象增加一个x属性指向0x002;
//现有0x001地址对象为{m:1,x:{n:2}};
console.log(a.x); //因为a的指向0x002 即{n:2},所以输出 undefined;
console.log(b.x); //因为b指向 0x001 即{m:1,x:{n:2}},所以输出 {n:2};
- 参数传递
首先明确一点,如果变量是值类型,即javascript中的原始类型,是按值拷贝传递的,如果是引用类型,传递的是地址引用,虽然也有叫法说javascript对引用对象是按引用传递,然而这并不准确
真正的引用传递是
class PassingRefByRef
{
static void Change(ref int[] pArray)
{
pArray[0] = 888;
pArray = new int[5] {-3, -1, -2, -3, -4};
System.Console.WriteLine("Inside the method, the first element is: {0}", pArray[0]);
}
static void Main()
{
int[] arr = {1, 4, 5};
System.Console.WriteLine("Inside Main, before calling the method, the first element is: {0}", arr[0]);
Change(ref arr);
System.Console.WriteLine("Inside Main, after calling the method, the first element is: {0}", arr[0]);
}
}
/* Output:
Inside Main, before calling the method, the first element is: 1
Inside the method, the first element is: -3
Inside Main, after calling the method, the first element is: -3
*/
所以javascript的参数传递是按值传递,不过对于引用对象,传递的值是参数的引用地址,同样的,当我们为参数重新赋值时,实际上改变了参数指向的地址。
var a = {};
var b={};
(function test(a,b){
a.x=1; // 对a指向地址的变量修改,方法外a 同时被修改
b={x:1}; // 变量被指向新地址,方法外 b 不变
})(a,b);
es6下的变量
- Let,const
ES6新增了let命令,用来声明变量。作用同var一致,但具有块级作用域。
const用来声明常量,const的作用域与let命令相同:只在声明所在的块级作用域内有效。
let和const目前只能在严格模式下使用,并且不具备变量提升
'use strict'
console.log(a); //ReferenceError: a is not defined; 没有变量提升
let a =1;
window.a;//不同与var 声明的全局变量不会成为全局对象的属性
if(true){
const PI= 3.14;
PI= 3.1415926; //默默的失败
console.log(PI);//output: 3.14
}
console.log(PI);//output:ReferenceError: PI is not defined,仅在块中有效
- 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
以前我们可以这样
var a=1,b=2,c=3;
现在我们可以这样:
var [a,b,c]=[1,2,3]; //数组顺序很重要
a;//1
b;//2
c;//3
var { bar, foo } = { foo: "aaa", bar: "bbb" }; //属性名要匹配
foo // "aaa"
bar // "bbb"