详细分析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 相关文章推荐
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
微信小程序 教程之事件
Oct 18 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
react-router实现按需加载
May 09 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 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
全文搜索和替换
2006/10/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python实现手绘图效果实例分享
2020/07/22 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
成功的酒店创业计划书
2013/12/27 职场文书
高一家长会邀请函
2014/01/12 职场文书
自我推荐信范文
2014/05/09 职场文书
司机工作自我鉴定
2014/09/19 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
零基础学java之循环语句的使用
2022/04/10 Java/Android