详解Javascript函数声明与递归调用


Posted in Javascript onOctober 22, 2016

Javascript的函数的声明方式和调用方式已经是令人厌倦的老生常谈了,但有些东西就是这样的,你来说一遍然后我再说一遍。每次看到书上或博客里写的Javascript函数有四种调用方式,我就会想起孔乙己:茴字有四种写法,你造吗?

尽管缺陷有一堆,但Javascript还是令人着迷的。Javascript众多优美的特性的核心,是作为顶级对象(first-class objects)的函数。函数就像其他普通对象一样被创建、被分配给变量、作为参数被传递、作为返回值以及持有属性和方法。函数作为顶级对象,赋予了Javascript强大的函数式编程能力,也带来了不太容易控制的灵活性。

1、函数声明

变量式声明先创建一个匿名函数,然后把它赋值给一个指定的变量:

var f = function () { // function body };

通常我们不必关心等号右边表达式的作用域是全局还是某个闭包内,因为它只能通过等号左边的变量f来引用,应该关注的是变量f的作用域。如果f指向函数的引用被破坏(f = null),且函数没有被赋值给任何其它变量或对象属性,匿名函数会因为失去所有引用而被垃圾回收机制销毁。

也可以使用函数表达式创建函数:

function f() { // function body }

与变量式不同的是,这种声明方式会为函数的一个内置属性name赋值。同时把函数赋值给当前作用域的一个同名变量。(函数的name属性,configurable、enumerable和writable均为false)

function f() { // function body } 
console.log(f.name); // "f" 
console.log(f); // f()

Javascript变量有一个的特别之处,就是会把变量的声明提前,表达式式的函数声明,也会把整个函数的定义前置,因此你可以在函数定义之前使用它:

console.log(f.name); // "f" 
console.log(f); // f() 
function f() { // function body }

函数表达式的声明会被提升到作用域顶层,试试下面的代码,它们不是本文的重点:

var a = 0; 
console.log(a); // 0 or a()? 
function a () {}

Crockford建议永远使用第一种方式声明函数,他认为第二种方式放宽了函数必须先声明后使用的要求从而会导致混乱。(Crockford是一个类似于罗素口中用来比喻维特根斯坦的"有良心的艺术家"那样的"有良心的程序员",这句话很拗口吧)

函数式声明

function f() {}

看起来是

var f = function f(){};

的简写。而

var a = function b(){};

的表达式,创建一个函数并把内置的name属性赋值为"b",然后把这个函数赋值给变量a,你可以在外部使用a()来调用它,但却不能使用b(),因为函数已被赋值给a,所以不会再自动创建一个变量b,除非你使用var b = a声明一个变量b。当然这个函数的name是"b"而不是"a"。

使用Function构造函数也可用来创建函数:

var f = new Function("a,b,c","return a+b+c;");

这种方式其实是在全局作用域内生成一个匿名函数,并把它赋值给变量f。

2、递归调用

递归被用来简化许多问题,这需要在一个函数体中调用它自己:

// 一个简单的阶乘函数 
var f = function (x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
};

Javascript中函数的巨大灵活性,导致在递归时使用函数名遇到困难,对于上面的变量式声明,f是一个变量,所以它的值很容易被替换:

var fn = f; 
f = function () {};

函数是个值,它被赋给fn,我们期待使用fn(5)可以计算出一个数值,但是由于函数内部依然引用的是变量f,于是它不能正常工作了。

函数式的声明看起来好些,但很可惜:

function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
} 
var fn = f; 
f = function () {}; // may been warning by browser 
fn(5); // NaN

看起来,一旦我们定义了一个递归函数,便须注意不要轻易改变变量的名字。

上面谈论的都是函数式调用,函数还有其它调用方式,比如当作对象方法调用。

我们常常这样声明对象:

var obj1 = { 
  num : 5, 
  fac : function (x) { 
    // function body 
  } 
};

声明一个匿名函数并把它赋值给对象的属性(fac)。

如果我们想要在这里写一个递归,就要引用属性本身:

var obj1 = { 
  num : 5, 
  fac : function (x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * obj1.fac(x - 1); 
    } 
  } 
};

当然,它也会遭遇和函数调用方式一样的问题:

var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // Sadness

方法被赋值给obj2的fac属性后,内部依然要引用obj1.fac,于是…失败了。

换一种方式会有所改进:

var obj1 = { 
   num : 5, 
   fac : function (x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * this.fac(x - 1); 
    } 
  } 
}; 
var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // ok

通过this关键字获取函数执行时的context中的属性,这样执行obj2.fac时,函数内部便会引用obj2的fac属性。

可是函数还可以被任意修改context来调用,那就是万能的call和apply:

obj3 = {}; 
obj1.fac.call(obj3, 5); // dead again

于是递归函数又不能正常工作了。

我们应该试着解决这种问题,还记得前面提到的一种函数声明的方式吗?

var a = function b(){};

这种声明方式叫做内联函数(inline function),虽然在函数外没有声明变量b,但是在函数内部,是可以使用b()来调用自己的,于是

var fn = function f(x) { 
  // try if you write "var f = 0;" here 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
}; 
var fn2 = fn; 
fn = null; 
fn2(5); // OK
// here show the difference between "var f = function f() {}" and "function f() {}" 
var f = function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
}; 
var fn2 = f; 
f = null; 
fn2(5); // OK
var obj1 = { 
  num : 5, 
  fac : function f(x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * f(x - 1); 
    } 
  } 
}; 
var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // ok 
 
var obj3 = {}; 
obj1.fac.call(obj3, 5); // ok

就这样,我们有了一个可以在内部使用的名字,而不用担心递归函数被赋值给谁以及以何种方式被调用。

Javascript函数内部的arguments对象,有一个callee属性,指向的是函数本身。因此也可以使用arguments.callee在内部调用函数:

function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * arguments.callee(x - 1); 
  } 
}

但arguments.callee是一个已经准备被弃用的属性,很可能会在未来的ECMAscript版本中消失,在ECMAscript 5中"use strict"时,不能使用arguments.callee。

最后一个建议是:如果要声明一个递归函数,请慎用new Function这种方式,Function构造函数创建的函数在每次被调用时,都会重新编译出一个函数,递归调用会引发性能问题——你会发现你的内存很快就被耗光了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
js中利用cookie实现记住密码功能
Aug 20 #Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 #Javascript
微信开发 消息推送实现代码
Oct 21 #Javascript
微信和qq时间格式模板实例详解
Oct 21 #Javascript
微信开发 微信授权详解
Oct 21 #Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 #Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 #Javascript
You might like
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vue按需加载实例详解
2019/09/06 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python requests 使用快速入门
2017/08/31 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
简单了解python的一些位运算技巧
2019/07/13 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
北大研究生linux应用求职信
2013/10/29 职场文书
腾讯广告词
2014/03/19 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
如何写新闻稿
2015/07/18 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Redis 异步机制
2022/05/15 Redis