码迷,mamicode.com
首页 > 编程语言 > 详细

【javascript基础】3、变量和作用域

时间:2014-06-11 08:01:39      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

原文:【javascript基础】3、变量和作用域

前言

这篇和大家说一下javascript中的变量和作用域,由于是将基础嘛,主要给大家捋一下知识,不想翻开书复习的道友可以看一下,打算刚开始学习javascript的同学可以扫一眼。

PS:jQuery源码交流群( 239147101)等你来,群里高手云集,让我受益匪浅,尽量少灌水。

变量

javascript中有两种变量,分别是基本类型和引用类型,基本类型是Null,Undefined,String,Boolean,Number这五种,前面简单的介绍了。引用类型是指Object,Array,Date,RegExp,Function这些。创建这两种变量是类似的,都是创建一个变量然后给它赋值。不同的原因主要是在内存中位置和操作不同。

基本类型

基本类型比较简单,基本类型的值保存在栈中。看例子

var v = 1;

基本类型变量在内存中的表示,没有涉及堆

bubuko.com,布布扣

看看复制变量之后在内存中的表示,执行的代码如下

var v = 1;
var n = v;

bubuko.com,布布扣

解释一下,如果一个变量把基本类型的值复制给另一个变量时,会创建一个新的相同的值,把这个新的值赋值给新的变量,这样,内存中就有两个一样的值了,分别是新的变量和就的变量指向的值,虽然值是一样的。

引用类型

应用类型的变量创建和基本类型的创建是一样的,主要看在内存中的存储方式,代码

var obj = new Object();

bubuko.com,布布扣

可以看到,变量obj存储的是一个地址(个人的理解),其实obj的值是一个指针,指向了堆中的对象,可以找到堆中的new出来的对象。再看看复制一个变量时的情况

var obj = new Object();
var o = obj;

bubuko.com,布布扣

解释一下,这和基本类型的复制是不同的,我们可以看出,当一个变量向另一个变量复制引用类型的值时,也会将存储在变量对象中的值复制一个给新的变量。复制的这个值实际上就是一个指针,指向堆中的一个对象,由于指针是相同的,所以知指向的对象就是同一个对象,此时无论你该哪一个变量,都会影响另一个变量,因为指向的对象是用一个嘛,例如

var obj = new Object();
var o = obj;
o.name = "hainan";
console.log(obj.name);//"hainan"

而基本类型则不会,看例子

var v = 1;
var n = v;
v = 100;
console.log(n);//1
console.log(v);//100

这个比较简单,不懂的话看上面的那个内存的图就懂了。

区别

上面说了复制的那个区别,还有一个就是基本类型不能添加属性和方法,而引用类型则可以添加,看例子吧,很简单

bubuko.com,布布扣
//基本类型
var peo = "hainan";
peo .age = 25;
console.log(peo.age);//undefined,但是不报错
//引用类型
var people = new Object();
people.age = 25;
console.log(people.age);//25
bubuko.com,布布扣

函数传参

javascript中函数参数都是按值传递的,也就是把函数外部的值复制给函数内部的参数,和复制变量一样,无论传递的是什么类型,都和复制变量一样。首先看一下传递基本类型的例子

bubuko.com,布布扣
function test(n){
  return n = n+100;  
}
var num = 10;
var result = test(num);
console.log(num);//10 没有发生变化
console.log(result);//110
bubuko.com,布布扣

简单解释一下,调用函数时,传递一个基本类型的参数num给函数,此时,复制值给内部的参数n,这样num和n变量都有了相同的值,但是,这两个之间没有任何的关系,只是值相同而已,想想前面的图就清楚了,内部的变量也就是参数n改变了之后,num的值并没有发生改变。

接下来看看传递引用类型的例子

function test(obj){
  obj.name = "hainan";  
}
var people = new Object();
test(people);
console.log(people.name);//"hainan"

解释一下,其实这个也和复制引用类型变量是一样的,传递一个引用类型给函数参数时,把外部的值复制给内部的函数参数,由于是引用类型这个值是一个指针,所以外部的引用类型变量和内部的参数此时会指向同一个对象,回想上面复制的图,当内部的参数指向的对象改变时,外部的变量指向的对象一定会改变,是同一个对象嘛。

所以,现在你只需知道,传递参数和复制变量是同一回事,不会的时候回想内存中的存储方式就明白了,管它是按值还是按引用传递呢,只是一个说法罢了,呵呵,但是面试的时候可能会问,记住javascript是值传递就行了。

作用域

执行环境

每个函数都有自己的执行环境(execution context),执行环境定义了变量和函数有权访问的数据,太官方了,就是每一个函数都有自己可以访问的范围,在自己的范围内的数据才可以得到。每一个执行环境中都有一个变量对象,保存着该环境中定义的变量和函数。全局执行环境是最外面的一个执行环境,就是window对象,所有的全局变量和函数就是它的属性。每一个执行环境执行完之后,这个环境就会被销毁,里面的变量对象也就没有了,当然变量对象中的变量和函数也就销毁了。

作用域

javascript的作用域是指变量和函数可以访问的范围,分为局部作用域和全局作用域,这个和C语言是类似的,但是不同点是javascript的作用域没有块级作用域,不像C语言的{}可以表示一个块级的作用域,javascript只有函数作用域,在函数内部声明的变量只能在函数体和子函数可以访问,这个函数的外部不能访问。看例子

bubuko.com,布布扣
//没有块级作用域
if(true){
  var n = 1;  
}
console.log(n);//1

//注意
for(var i=0;i<10;++i){
    
}
console.log(i);//10
bubuko.com,布布扣

上面的例子要是在C语言或者java中n和i会在{}语言执行完之后销毁,在javascript中可以看到,它们并没有销毁,说明并没有块级作用域。

function test(a,b){
  var sum = a + b;  
  return sum;
}
test(1,2);//3
console.log(sum);//sum is not defined

可以看出sum是在函数的外部访问不到的,因为sum函数是在函数的局部作用域中定义的,在函数执行结束时,内部的变量就会销毁,所以外部的作用域访问不到它,这就是函数的作用域。

作用域链

作用域链(scope chain)是保证在执行环境中有序的访问变量和函数,我们可以这样想,每个函数都有一个自己的执行环境,这个执行环境的嵌套就像套娃是一样的,大的套小的,内部的执行环境的变量有权访问外部的执行环境的数据,而外部的不可以反问内部的,所以当内外的执行环境中都有一个相同的变量或函数时,你是先访问哪一个呢?所以就有了作用域链这个概念。这个作用域链的每一个节点是一个变量对象,函数中有一个活动变量对象的概念,刚开始时只有函数的arguments对象,之后会把当前的变量对象中的变量和函数复制到活动对象中。作用域链的第一个变量对象是活动对象,之后就是下一个包含环境,之后是包含环境的包含环境......直到全局执行环境的变量对象。 看例子可能大家会明白

function test(a,b){
  var  sum = a + b;
  return sum; 
}
var s = test(1,2);

分析上面的这段代码,在未调用test()函数之前,看看作用域链情况

bubuko.com,布布扣

在未执行函数的时候,可以看到函数的作用域链只用一个全局的变量对象,里面有window和test函数等,在执行var s = test(1,2);语句的时候,作用域链会发生变化,会增加一个函数的活动对象到作用域链的前面,这个活动对象的初始值只有函数的arguments对象,之后会把函数的内部变量等复制到这个活动对象中,请看下面的图

bubuko.com,布布扣

这就是函数的作用域链,以后要访问某个变量的时候,会沿着这个作用域链进行查找,即沿着活动对象->外部函数的活动对象->外部函数的外部函数的活动对象->......->终点的全局执行环境,在这期间在某个活动对象中内部有这个值就会返回这个值,这个过程就会停止,不在进入另一个执行环境中,看个例子

bubuko.com,布布扣
//全局变量
var color = "red";
function getColor(){
    //内部变量
    var color = "blue";
    return color;
}
console.log(getColor());//blue
bubuko.com,布布扣

看到这里大家会明白了。

PS:其实javascript的闭包和作用域链有很大的联系,这里咱不讨论,闭包会单独讨论。

小结

这就是javascript的作用域了,主要大家还是好好看看变量内存那块,分析几个就会了。注意一下javascript没有块级作用域这一说法,这点大家要小心了。最近几天天天在群里看大家的聊天记录,论文也不想写了,哎,坐等回家吃猪肉了,希望老师别鄙视我。

 

 

 

 

 

 

 

【javascript基础】3、变量和作用域,布布扣,bubuko.com

【javascript基础】3、变量和作用域

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/lonelyxmas/p/3773261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!