浅析javascript函数表达式


Posted in Javascript onFebruary 10, 2016

开始学习javascript函数表达式,仔细阅读下文。

1、一般形式的创建函数,在执行代码之前会先读取函数声明,所以可以把函数声明写在函数调用的下面:

sayHi();
 function sayHi(){
     alert("Hi!");
}

2、使用函数表达式创建函数,调用前必须先赋值:

sayHi(); //错误!!函数不存在
 var sayHi=function(){
     alert("Hi!");
}

3、递归

一般递归

function factorial(num){
        if (num <= 1){
          return 1;
        } else {
          return num * factorial(num-1);
        }
      }

arguments.callee指向正在执行的函数的指针,可以用它来实现递归:

function factorial(num){
        if (num <= 1){
          return 1;
        } else {
          return num * arguments.callee(num-1);
        }
      }

4、闭包(闭包指一个函数,这个函数可以访问另一个作用域里的变量)。
创建闭包的常见方式:在一个函数内部创建另一个函数。当函数执行时,会创建一个执行环境和相应的作用域链。闭包只能取得包含函数中任何变量的最后一个值:

function createFunctions(){
        var result = new Array();
        
        for (var i=0; i < 10; i++){
          result[i] = function(){
            return i;
          };
        }
        
        return result;
      }
      
      var funcs = createFunctions();
      
      //every function outputs 10
      for (var i=0; i < funcs.length; i++){
        document.write(funcs[i]() + "<br />");
      }

上面代码输出的全部是10。这是因为:每个funcs函数都保存着createFunctions()这个活动对象(这是一个函数,也是一个对象,也是一个引用类型Function类型),而createFunctions()这个活动对象有一个变量i,所以,每个funcs都将拥有这个变量i,而createFunctions()这个函数在返回结果时,i已经变成10了。所以funcs数组的每个值都是10.

可以像下面这样改造:

function createFunctions(){
        var result = new Array();
        
        for (var i=0; i < 10; i++){
          result[i] = function(num){
            return function(){
              return num;
            };
          }(i);
        }
        
        return result;
      }

在调用每个匿名函数时,将i的当前值给了num,而在匿名函数内部,创建并返回num的闭包。这样,返回数组的每个函数都有自己num变量的一个副本。(这段没有说清,读者自己再揣摩,如果有更好的描述方法,请评论在文章下面,谢谢)

5、this对象

  • 全局函数中,this就相当于window。
  • 函数被作为某个方法调用时,this相当于那个对象。
  • 每个函数在被调用时,这个函数都会自动获取两个特殊变量:this、arguments。内部函数在搜索这两个变量时,只搜索到活动对象为止。

6、模仿块级作用域(私有作用域)
如下:

function outputNumbers(count){
        for (var i=0; i < count; i++){
          alert(i);
        }
      
        alert(i);  //count
      }

      outputNumbers(5);

在Java等语言中,for里面的变量i用完就销毁了。而在javascript中,outputNumbers调用时生成活动对象,而这个i是属于这个活动对象的,因此从它被定义开始,就可以在函数内部随处访问它,它在该活动对象内部是共有的。

匿名函数的语法(创建私有作用域):

(function(){
 //这里是块级作用域
})();

函数声明放在圆括号中,表示它是一个表达式,而后面再加个括号就可以立即调用它。

如果临时需要一些变量,那么就可以使用私有作用域:

function outputNumbers(count){
      
        (function () {
          for (var i=0; i < count; i++){
            alert(i);
          }
        })();
        
        alert(i);  //causes an error
      }

上面代码中,i就被私有了,在匿名函数(私有域)外部访问i时就会报错,尽管alert依然在活动对象内。

7、私有变量
函数的参数、局部变量以及函数内部定义的其他函数都属于该函数的私有变量。比如:

function add(num1,num2){
  var sum = num1 + num2;
  return sum; 
}

有3个私有变量:num1,num2,sum。函数内部可以访问它们,外部就不行了。

特权方法可以访问私有变量:简单说,使用表达式方式给它一个闭包,在闭包内部访问其他函数:

function Person(name){

        var a=0;
      
        this.getName = function(){
          return name + a;
        };
      
        this.setName = function (value) {
          name = value;
        };
      }

this.getName、this.setName就是表达式方式,在创建Person实例后,只能通过getName或者setName来访问name、a属性。

以上就是本文的全部内容,希望对大家学习的学习有所帮助。

Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
详解AngularJS中的http拦截
Feb 09 #Javascript
详解Javacript和AngularJS中的Promises
Feb 09 #Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 #Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 #Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 #Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 #Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 #Javascript
You might like
php学习笔记之面向对象编程
2012/12/29 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP之header函数详解
2021/03/02 PHP
Eval and new funciton not the same thing
2012/12/27 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue中 v-for循环的用法详解
2020/02/19 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python爬取音频下载的示例代码
2020/10/19 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
初中差生评语
2014/12/29 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
小学四年级作文之写景
2019/08/23 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python