今天在网上,看到一篇关于js函数难点的文章,js函数的一些难点。在那上面提了一下,关于js函数返回另一个函数的问题,并附上了一道面试题:

  1. var add = function(x){
  2. var sum = 1;
  3. var tmp = function(x){
  4. sum = sum + x;
  5. return tmp;
  6. }
  7. tmp.toString = function(){
  8. return sum;
  9. }
  10. return tmp;
  11. } // alert(add(1)(2)(3)) --> 6

接下来,就来详细的解读返回另一个函数的问题。

其实我是从Java转过来的,一开始看到那篇文章,我对于返回另一个函数并没有什么认识,我之所以写这篇文章是因为,在那里面有一点让我感到奇怪,那就是最后的调用方式

  1. add(1)(2)(3)

由于在java中,我没有见到过这样的函数调用方式,所以引起了我的注意,我决定去研究研究;下面就将我的研究分享出来,当然如果你对此已经有了深刻的认识,你可以选择跳过,或者对于不足的地方,给出指点。好了闲话不多说,进入正题。

我们来看一个最简单的例子:

  1. function create1(pro) {
  2. console.log("pro : " + pro);
  3. return function(obj1, obj2){
  4. console.log(obj1 + " -- " + obj2);
  5. return obj1 + obj2;
  6. }
  7. }

我构建了一个简单的函数create1,并且有一个返回值,返回值是一个内部函数。函数构建完了,接下来进行调用:

  1. var c1 = create1("pro"); // 创建函数

如果按照我之前的理解,当我调用了这个方法后,应该会打印出 pro : pro,接着然后报错的。如果你看完过后,也跟我有一样的想法,那恭喜你想多了或者有了固型思维

。真实的是当我们通过上面的代码调用的时候,日志是打印出了  pro : pro ,但是并没有报错,并且我们反复来回的调用过后,也只是来回的打印相同的日志。这也就说明这个时候,只是进入了create1()方法,并没有进入到该函数的内部函数内。通过面试题的启发,我在试着调用了一次,发现打印出了后续的。

  1. c1(1, 2); // 调用函数

这样就打印出了下面的日志;这说明其实我们一开始调用方法的时候,其实是并没有进入到里层的函数的,只是进入了外层函数体,我们只有再调用才能进入里层函数体,并且这个时候,我们重复上面的调用,他只会是调用里层的函数体,并没有外面的函数体。

类似这种函数返回另一个函数的,我们第一次调用只是构建了一个外层函数体对象,只有有后续的调用,才能调用内层函数体,并且重复调用,只会重复内层函数体。
不要急,还没有完,后面还有……

接下来,我们看一看另一种情况,我们先声明一个函数,用来做加法运算:

  1. function infun(obj1, obj2) {
  2. console.log(obj1 + " -- " + obj2);
  3. return obj1 + obj2;
  4. }

然后再声明一个函数,在该函数中调用上面声明的函数:

  1. function create2(pro) {
  2. console.log("pro = " + pro);
  3. return infun(obj1, obj2); // 这个时候,会报错
  4. }

最后是调用:

  1. var c1 = create2("pro");

查看日志:

pro = pro
‌Uncaught ReferenceError: obj1 is not defined

会发现,打印出了一条日志后,接着抛出了异常。对方法做一下改动,

  1. function create2(pro) {
  2. console.log("pro = " + pro);
  3. var obj1 = 1, obj2 = 2;
  4. return infun(obj1, obj2); // 这个时候,会报错
  5. }

在调用会发现正常运行,并且打印出了两条日志记录。

这说明,类似于这种,在一个函数内返回一个已经声明的函数,其实是调用已经声明的函数,跟上面的情况是不一样的。
好了,现在回过头来,仔细看看开头的面试题,就会发现一切都明了了:

  1. // 声明一个函数表达式
  2. var add = function(x){
  3. var sum = 1;
  4. // 在函数表达式内部有一个求和的内部函数
  5. var tmp = function(x){
  6. sum = sum + x;// 求和
  7. return tmp;
  8. }
  9. // 构建一个函数体的toString()函数
  10. tmp.toString = function(){
  11. return sum;
  12. }
  13. return tmp; // 返回的是一个函数体,如果该函数体有toString()方法,则会调用函数体的toString()方法
  14. }

然后再来看看调用:

  1. alert(add(1)(2)(3))

结果为6,至于原因就跟我们第一种讨论的情况一样,接下来,我们反复调用:

  1. // 以下结果输出为:6
  2. alert(add(10)(2)(3))
  3. alert(add(100)(2)(3))
  4. // 下面的结果输出变了
  5. alert(add(1)(3)(3))
  6. alert(add(1)(2)(5))

js fuction函数内return一个内部函数详解的更多相关文章

  1. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  2. Spark2.1.0——内置Web框架详解

    Spark2.1.0——内置Web框架详解 任何系统都需要提供监控功能,否则在运行期间发生一些异常时,我们将会束手无策.也许有人说,可以增加日志来解决这个问题.日志只能解决你的程序逻辑在运行期的监控, ...

  3. Spark2.1.0——内置RPC框架详解

    Spark2.1.0——内置RPC框架详解 在Spark中很多地方都涉及网络通信,比如Spark各个组件间的消息互通.用户文件与Jar包的上传.节点间的Shuffle过程.Block数据的复制与备份等 ...

  4. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

  7. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  8. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  9. (转载)--SG函数和SG定理【详解】

    在介绍SG函数和SG定理之前我们先介绍介绍必胜点与必败点吧. 必胜点和必败点的概念:        P点:必败点,换而言之,就是谁处于此位置,则在双方操作正确的情况下必败.        N点:必胜点 ...

随机推荐

  1. Delphi 源代码生成器

  2. k8s第一个脚本:hello world

    1.hello-world-pod.yaml 脚本: # cat hello-world-pod.yaml apiVersion: v1 kind: Pod metadata: name: hello ...

  3. squid代理简介

    squid代理 简单介绍一下正向代理和反向代理 标准代理:缓存静态页面,但是要实现这种方式必须在内部主机的浏览器内指明代理服务址和端口. 透明代理:不需要指明代理服务器的IP和端口 二)反向代理 可以 ...

  4. (转) 修改weblogic部署的应用名称

    通过weblogic管理后台console进行发布本地项目的时候,它会默认以WEB-INF的上一级目录作为访问路径, 如,假如你的项目WEB-INF目录的上一层是WebRoot,那么发布后, 访问的路 ...

  5. 【vue2.x基础】用npm起一个完整的项目

    1. 安装vue npm install vue -g 2.  安装vue-cli脚手架 npm install vue-cli -g 3. 安装webpack npm install webpack ...

  6. calculate_gain

    torch.nn.init.calculate_gain(nonlinearity,param=None) 对于给定的非线性函数,返回推荐的增益值.这些值如下所示: relu_gain=nn.init ...

  7. Markdown小结

    Markdown标题 以# (#号加空格)开头的行会被视为标题,根据#的数量分为一到六级标题 # 一级标题 ## 二级标题 … ###### 六级标题 Markdown 水平线 一行由三个以上连续的减 ...

  8. 机器学习降维--SVD奇异值分解

    奇异值分解是有着很明显的物理意义,将一个比较复杂的矩阵用更小更简单的几个子矩阵的相乘来表示,这些小矩阵描述的是矩阵的重要的特性,让机器学会抽取重要的特征,SVD是一个重要的方法. 所以SVD不仅是一个 ...

  9. PHP入门(四)

    1.数组 1. array() 函数用于创建数组 在 PHP 中,有三种类型的数组:数值数组 - 带有数字 ID 键的数组 关联数组 - 带有指定的键的数组,每个键关联一个值 多维数组 - 包含一个或 ...

  10. 8.django单独执行文件

    import os import django # 导入django os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'noju.settings')d ...