浅析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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue实现验证用户名是否可用
Jan 20 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发送post请求函数分享
2014/03/06 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
Prototype Template对象 学习
2009/07/19 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
javaScript之split与join的区别(详解)
2017/11/08 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
详解vue 组件
2020/06/11 Javascript
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
八一演出活动方案
2014/02/03 职场文书
音乐教学随笔感言
2014/02/19 职场文书
企业文化标语口号
2014/06/09 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
夏洛特的网观后感
2015/06/15 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL