浅析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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
JS倒计时代码汇总
Nov 25 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
微信小程序实现授权登录
May 15 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
咖啡知识大全
2021/03/03 新手入门
php去除重复字的实现代码
2011/09/16 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
元旦晚会邀请函
2014/01/27 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2014年财政工作总结
2014/12/10 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers