详细分析JavaScript函数定义


Posted in Javascript onJuly 16, 2015

函数

几个要点:

                a).函数是javascript中的一等公民 (重要性)
                b).函数是一个对象
                c).函数定义了一个独立的变量作用域

定义方式

a)命名函数:

          除非在另一个函数内部定义,否则,命名函数是全局的。 

// 全局的命名函数
  function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200));  //300

b)匿名函数:   

            匿名函数通常赋值给一个变量,再通过变量调用。

var func = function (x, y) {
      return x + y;
    }
    console.info(func(5, 2)); //7

            匿名函数适用于以下这种 “立即执行的匿名函数” 的情况:

console.info(
      function (x, y) {
            return x + y;
          }(100, 200)  //立即调用
        );

C)定义方式影响代码执行效果

                命名函数可以先使用,再定义

console.info(sum(10, 10));
    function sum(num1, num2) {
      return num1 + num2;
    }

              匿名函数必须先定义,再使用

//console.info(sumFunc(10, 10));  //Uncaught TypeError: Property 'sumFunc' of object [object Object] is not a function 
    var sumFunc = function (num1, num2) {
      return num1 + num2;
    };
    console.info(sumFunc(10, 10));

函数返回值:

                 用return 生成返回值.如没有return ,则函数返回undefined

function func() {
 }
 console.info(func()); //undefined
 function func2() {
   return; //空的返回语句
 }
 console.info(func2()); //undefined

return里藏着的坑:

var func = function (x, y) {
   var sum = x + y;
   return {
     value : sum
   }
 }

                   这么写没有问题:   调用 func(5,5)    返回的是 Object {value: 10}

                   然而: 

var func = function (x, y) {
    var sum = x + y;
    return
    {
      value: sum
    };
  }
  console.info(func(5,5)); //undefined

                   return 后面跟着个回车换行的话,
                   调用 func(5,5)    显示的是 undefined
                   编辑器帮我们在return后加了个分号;   然而在这情况下并没有什么卵用。

函数即对象:

function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200)); //300
  var other = add; //other和add引用同一函数对象
  console.info(other(300, 400)); //700
  console.info(typeof other);  //function
  console.info(add === other); //true

嵌套定义的函数:

                  在函数内部,可以定义另一个函数。

function outerFunc(a, b) {
    function innerFunc(x) {
      return x * x;
    }
    return Math.sqrt(innerFunc(a) + innerFunc(b));
  }
  console.info(outerFunc(3, 4)); //5

访问外部变量:

             内部函数可以访问外部的变量与参数。

var globalStr = 'globalStr';
 function outerFunc2(argu) {
   var localVar = 100;
   function innerFunc2() {
     localVar++;
     console.info(argu + ":" + localVar + ":" + globalStr);
   }
   innerFunc2(); //hello:101:globalStr
 }
 outerFunc2("hello");

返回函数的函数:

               因为函数是对象,所以可以作为返回值。

function outerFunc(x) {
    var y = 100;
    return function innerFunc() {
      console.info(x + y);
    }
  }
  outerFunc(10)(); //110

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
使用Vue生成动态表单
Nov 26 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
jQuery时间轴插件使用详解
Jul 16 #Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 #Javascript
Javascript函数的参数
Jul 16 #Javascript
Javascript简单改变表单元素背景的方法
Jul 15 #Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 #Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 #Javascript
jQuery简单实现验证邮箱格式
Jul 15 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP中::、->、self、$this几种操作符的区别介绍
2013/04/24 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
python连接池实现示例程序
2013/11/26 Python
Python创建系统目录的方法
2015/03/11 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
机械工程师的岗位职责
2013/11/17 职场文书
出生医学证明样本
2014/01/17 职场文书
留学推荐信怎么写
2014/01/25 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
党员反邪教心得体会
2016/01/15 职场文书