Function类型与变量 作用域及内存

本文详细介绍了ECMAScript中的函数类型、函数作为值的使用、函数内部属性及方法等内容,并探讨了变量作用域、内存管理以及如何检测类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



                       Function类型


ECMAScript中,Function(函数)类型实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。


  1. 函数的声明方式


1.普通的函数声明


function box(num1, num2) {


       return num1+num2;


}


 


2.使用变量初始化函数


var box= function(num1, num2) {


       return num1 +num2;


};


 


3.使用Function构造函数


var box= new Function('num1', 'num2' ,'return num1 +num2');


 



二.作为值的函数


ECMAScript中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。


function box(sumFunction, num) {


       returnsumFunction(num);                          //someFunction


}


 


function sum(num) {


       returnnum + 10;


}


 


var result = box(sum, 10);                                 //传递函数到另一个函数里


 


  1. 函数内部属性

    在函数内部,有两个特殊的对象:argumentsthisarguments是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。

    function box(num) {

           if(num <= 1) {

                  return 1;

           }else {

                  return num * box(num-1);                   //一个简单的的递归

           }

    }

     

    对于阶乘函数一般要用到递归算法,所以函数内部一定会调用自身;如果函数名不改变是没有问题的,但一旦改变函数名,内部的自身调用需要逐一修改。为了解决这个问题,我们可以使用arguments.callee来代替。

    function box(num) {

           if(num <= 1) {

                  return 1;

           }else {

                  return num * arguments.callee(num-1);//使用callee来执行自身

           }

    }

     

    函数内部另一个特殊对象是this,其行为与JavaC#中的this大致相似。换句话说,this引用的是函数据以执行操作的对象,或者说函数调用语句所处的那个作用域。PS:当在全局作用域中调用函数时,this对象引用的就是window

    //便于理解的改写例子

    window.color = '红色的';                                  //全局的,或者var color = '红色的';也行

    alert(this.color);                                               //打印全局的color

     

    var box = {

           color: '蓝色的',                                        //局部的color

           sayColor: function () {

                  alert(this.color);                                 //此时的this只能box里的color

           }

    };

     

    box.sayColor();                                                //打印局部的color

    alert(this.color);                                               //还是全局的

     

    //引用教材的原版例子

    window.color = '红色的';                                  //或者var color = '红色的';也行

     

    var box = {

           color: '蓝色的'

    };

     

    function sayColor() {

           alert(this.color);                                        //这里第一次在外面,第二次在box里面

    }

     

    getColor();

     

    box.sayColor = sayColor;                                  //把函数复制到box对象里,成为了方法

    box.sayColor();

     

  2. 函数属性和方法

    ECMAScript中的函数是对象,因此函数也有属性和方法。每个函数都包含两个属性:lengthprototype。其中,length属性表示函数希望接收的命名参数的个数。

    function box(name, age) {

           alert(name+ age);

    }

    alert(box.length);                                             //2  

     

    PS:对于prototype属性,它是保存所有实例方法的真正所在,也就是原型。这个属性,我们将在面向对象一章详细介绍。而prototype下有两个方法:apply()call(),每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

    function box(num1, num2) {

           returnnum1 + num2;                                 //原函数

    }

     

    function sayBox(num1, num2) {

           returnbox.apply(this, [num1, num2]);         //this表示作用域,这里是window

    }                                                                    //[]表示box所需要的参数

     

    function sayBox2(num1, num2) {

           returnbox.apply(this, arguments);               //arguments对象表示box所需要的参数

    }

     

    alert(sayBox(10,10));                                        //20

    alert(sayBox2(10,10));                                      //20

     

     

     

    call()方法于apply()方法相同,他们的区别仅仅在于接收参数的方式不同。对于call()方法而言,第一个参数是作用域,没有变化,变化只是其余的参数都是直接传递给函数的。

    function box(num1, num2) {

           returnnum1 + num2;

    }

     

    function callBox(num1, num2) {

           returnbox.call(this, num1, num2);                     //apply区别在于后面的传参

    }

     

    alert(callBox(10,10));

     

    事实上,传递参数并不是apply()call()方法真正的用武之地;它们经常使用的地方是能够扩展函数赖以运行的作用域。

    var color = '红色的';                                  //或者window.color = '红色的';也行

     

    var box = {

           color: '蓝色的'

    };

     

    function sayColor() {

           alert(this.color);

    }

     

    sayColor();                                               //作用域在window

     

    sayColor.call(this);                                    //作用域在window

    sayColor.call(window);                              //作用域在window

    sayColor.call(box);                                    //作用域在box,对象冒充

     

    这个例子是之前作用域理解的例子修改而成,我们可以发现当我们使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了。

    使用call()或者apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系(耦合,就是互相关联的意思,扩展和维护会发生连锁反应)。也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如 box.sayColor = sayColor;


                       变量作用域内存                                                   



JavaScript的变量与其他语言的变量有很大区别。JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变。


 


  1. 变量及作用域

    1.基本类型和引用类型的值

    ECMAScript变量可能包含两种不同的数据类型的值:基本类型值和引用类型值。基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。而引用类型值则是指那些保存在堆内存中的对象,意思是变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象。

    将一个值赋给变量时,解析器必须确定这个值是基本类型值,还是引用类型值。基本类型值有以下几种:UndefinedNullBooleanNumberString。这些类型在内存中分别占有固定大小的空间,他们的值保存在栈空间,我们通过按值来访问的。

    PS:在某些语言中,字符串以对象的形式来表示,因此被认为是引用类型。ECMAScript放弃这一传统。

    如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定,因此不能把它们保存到栈内存中。但内存地址大小的固定的,因此可以将内存地址保存在栈内存中。这样,当查询引用类型的变量时,先从栈中读取内存地址,然后再通过地址找到堆中的值。对于这种,我们把它叫做按引用访问。

     

    2.动态属性

    定义基本类型值和引用类型值的方式是相似的:创建一个变量并为该变量赋值。但是,当这个值保存到变量中以后,对不同类型值可以执行的操作则大相径庭。

    var box = new Object();                                    //创建引用类型

    box.name = 'Lee';                                             //新增一个属性

    alert(box.name);                                               //输出

     

    如果是基本类型的值添加属性的话,就会出现问题了。

    var box = 'Lee';                                                //创建一个基本类型

    box.age = 27;                                                   //给基本类型添加属性

    alert(box.age);                                                        //undefined    

     

    3.复制变量值

    在变量复制方面,基本类型和引用类型也有所不同。基本类型复制的是值本身,而引用类型复制的是地址。

    var box = 'Lee';                                                //在栈内存生成一个box 'Lee'

    var box2 = box;                                               //在栈内存再生成一个box2 'Lee'

    box2是虽然是box1的一个副本,但从图示可以看出,它是完全独立的。也就是说,两个变量分别操作时互不影响。

    var box = new Object();                                    //创建一个引用类型

    box.name = 'Lee';                                             //新增一个属性

    var box2 = box;                                               //把引用地址赋值给box2

     

    在引用类型中,box2其实就是box,因为他们指向的是同一个对象。如果这个对象中的name属性被修改了,box2.namebox.name输出的值都会被相应修改掉了。

     


  1. 传递参数

    ECMAScript中所有函数的参数都是按值传递的,言下之意就是说,参数不会按引用传递,虽然变量有基本类型和引用类型之分。

    function box(num) {                                         //按值传递,传递的参数是基本类型

           num+= 10;                                              //这里的num是局部变量,全局无效

           returnnum;

    }

    var num = 50;

    var result = box(num);

    alert(result);                                                     //60

    alert(num);                                                      //50

     

    PS:以上的代码中,传递的参数是一个基本类型的值。而函数里的num是一个局部变量,和外面的num没有任何联系。

     

    下面给出一个参数作为引用类型的例子。

    function box(obj) {                                                 //按值传递,传递的参数是引用类型 

           obj.name= 'Lee';

    }

     

    var p = new Object();

    box(p);

    alert(p.name);

     

    PS:如果存在按引用传递的话,那么函数里的那个变量将会是全局变量,在外部也可以访问。比如PHP中,必须在参数前面加上&符号表示按引用传递。而ECMAScript没有这些,只能是局部变量。

    PS:所以按引用传递和传递引用类型是两个不同的概念。

     

    function box(obj) {

           obj.name= 'Lee';

           varobj = new Object();                              //函数内部又创建了一个对象

           obj.name= 'Mr.';                                       //并没有替换掉原来的obj

    }

     

    最后得出结论,ECMAScript函数的参数都将是局部变量,也就是说,没有按引用传递。

     

  2. 检测类型

    要检测一个变量的类型,我们可以通过typeof运算符来判别。诸如:

    var box = 'Lee';

    alert(typeof box);                                             //string

     

    虽然typeof运算符在检查基本数据类型的时候非常好用,但检测引用类型的时候,它就不是那么好用了。通常,我们并不想知道它是不是对象,而是想知道它到底是什么类型的对象。因为数组也是objectnull也是Object等等。

    这时我们应该采用instanceof运算符来查看。

    var box = [1,2,3];

    alert(box instanceof Array);                               //是否是数组

    var box2 = {};

    alert(box2 instanceof Object);                                   //是否是对象

    var box3 = /g/;

    alert(box3 instanceof RegExp);                          //是否是正则表达式

    var box4 = new String('Lee');

    alert(box4 instanceof String);                                   //是否是字符串对象

     

    PS:当使用instanceof检查基本类型的值时,它会返回false

     


  1. 执行环境及作用域

    执行环境是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。

    全局执行环境是最外围的执行环境。在Web浏览器中,全局执行环境被认为是window对象。因此所有的全局变量和函数都是作为window对象的属性和方法创建的。

    var box = 'blue';                                               //声明一个全局变量

    function setBox() {

           alert(box);                                                //全局变量可以在函数里访问

    }

    setBox();                                                         //执行函数

     

    全局的变量和函数,都是window对象的属性和方法。

    var box = 'blue';

    function setBox() {

           alert(window.box);                                    //全局变量即window的属性

    }

    window.setBox();                                             //全局函数即window的方法

     

    PS:当执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。如果是全局环境下,需要程序执行完毕,或者网页被关闭才会销毁。

    PS:每个执行环境都有一个与之关联的变量对象,就好比全局的window可以调用变量和属性一样。局部的环境也有一个类似window 的变量对象,环境中定义的所有变量和函数都保存在这个对象中。(我们无法访问这个变量对象,但解析器会处理数据时后台使用它)

     

    函数里的局部作用域里的变量替换全局变量,但作用域仅限在函数体内这个局部环境。

    var box = 'blue';

    function setBox() {

           varbox = 'red';                                          //这里是局部变量,出来就不认识了

           alert(box);

    }

    setBox();

    alert(box);

     

    通过传参,可以替换函数体内的局部变量,但作用域仅限在函数体内这个局部环境。

    var box = 'blue';

    function setBox(box) {                                     //通过传参,替换了全局变量

           alert(box);

    }

    setBox('red');

    alert(box);

     

    函数体内还包含着函数,只有这个函数才可以访问内一层的函数。

    var box = 'blue';

    function setBox() {

           functionsetColor() {

    var b = 'orange';

                  alert(box);

    alert(b);

           }

           setColor();                                                //setColor()的执行环境在setBox()

    }

    setBox();

     

    PS:每个函数被调用时都会创建自己的执行环境。当执行到这个函数时,函数的环境就会被推到环境栈中去执行,而执行后又在环境栈中弹出(退出),把控制权交给上一级的执行环境。

    PS:当代码在一个环境中执行时,就会形成一种叫做作用域链的东西。它的用途是保证对执行环境中有访问权限的变量和函数进行有序访问。作用域链的前端,就是执行环境的变量对象。

     

  2. 没有块级作用域

    块级作用域表示诸如if语句等有花括号封闭的代码块,所以,支持条件判断来定义变量。

    if (true) {                                                               //if语句代码块没有局部作用域

           varbox = 'Lee';

    }

    alert(box);

     

    for循环语句也是如此

    for (var i = 0; i < 10; i ++) {                             //没有局部作用域

           varbox = 'Lee';

    }

    alert(i);

    alert(box);

     

    var关键字在函数里的区别

    function box(num1, num2) {

           varsum = num1 + num2;                           //如果去掉var就是全局变量了

           returnsum;

    }

    alert(box(10,10));

    alert(sum);                                                       //报错

     

    PS:非常不建议不使用var就初始化变量,因为这种方法会导致各种意外发生。所以初始化变量的时候一定要加上var

     

    一般确定变量都是通过搜索来确定该标识符实际代表什么。

    var box = 'blue';

    function getBox() {

           returnbox;                                               //代表全局box

    }                                                                    //如果加上函数体内加上var box = 'red'

    alert(getBox());                                                //那么最后返回值就是red

     

     

    PS:变量查询中,访问局部变量要比全局变量更快,因为不需要向上搜索作用域链。

     

     

     

     


  1. 内存问题

    JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。其他语言比如CC++,必须手工跟踪内存使用情况,适时的释放,否则会造成很多问题。而JavaScript则不需要这样,它会自行管理内存分配及无用内存的回收。

    JavaScript最常用的垃圾收集方式是标记清除。垃圾收集器会在运行的时候给存储在内存中的变量加上标记。然后,它会去掉环境中正在使用变量的标记,而没有被去掉标记的变量将被视为准备删除的变量。最后,垃圾收集器完成内存清理工作,销毁那些带标记的值并回收他们所占用的内存空间。

    垃圾收集器是周期性运行的,这样会导致整个程序的性能问题。比如IE7以前的版本,它的垃圾收集器是根据内存分配量运行的,比如256个变量就开始运行垃圾收集器,这样,就不得不频繁地运行,从而降低的性能。

    一般来说,确保占用最少的内存可以让页面获得更好的性能。那么优化内存的最佳方案,就是一旦数据不再有用,那么将其设置为null来释放引用,这个做法叫做解除引用。这一做法适用于大多数全局变量和全局对象。

    var o = {

           name: 'Lee'

    };

    o = null;                                                          //解除对象引用,等待垃圾收集器回收



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值