浅析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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JavaScript中的new的使用方法与注意事项
May 16 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
微信小程序反编译的实现
Dec 10 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
详解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面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
node.js require() 源码解读
2015/12/13 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
python实现rest请求api示例
2014/04/22 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
现金会计岗位职责
2013/12/05 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
企业安全生产检查制度
2015/08/06 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
python实现自动化群控的步骤
2021/04/11 Python
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
python实现商品进销存管理系统
2022/05/30 Python