JavaScript的各种常见函数定义方法


Posted in Javascript onSeptember 16, 2014

本文详细讲述了JavaScript的各种常见函数定义方法,分享给大家供大家参考。具体分析如下:

首先看一下JavaScript最常见的四种函数定义:

用Function构造函数定义的函数,代码如下:

var multiply = new Function('x', 'y', 'return x * y;');

函数声明,这种方式也是最为常见的一种:

function multiply(x, y) {
  return x * y;
}

函数表达式,声明为匿名函数然后赋值给一变量,很常见的方式:

var multiply = function(x, y) {
  return x * y;
}

函数表达式,但是函数声明为命名函数再赋值给一变量,长得跟上一种方式真像:

var multiply = function multi(x, y) {
  return x * y;
}

首先比较一下函数名,以及将函数赋值给的那个函数变量直接的关系,真绕……直观一点儿,从刚刚的例4说吧,就是multiply这个函数变量与multi这个函数名的关系:

函数名是不能够被修改的,相反的,函数变量是可以重新被赋值的。函数变量可以被重新赋值应该很好理解,我们第4个例子刚刚定义的multiply这个变量,看它不顺眼,重新赋值为:

multiply = function(x, y) {
  return x + y;
}

立马摇身一变,从乘法变成加法了。但是multi这个函数变量想变就是不可能的了,函数定义已经在那儿了,只要还保留这它的引用,它就是不会变的,可能这里不大好理解,先这样想着,往下看,慢慢就应该能理解了。

函数名同时是无法在函数外部使用的,它只在函数体内部可见,一个很简单的例子:

var foo = function bar() {
  alert('hello');
}
foo(); // 提示“hello”字符串
bar(); // 执行报错,bar未定义

和明显,这里的bar确实是一个函数名,但是它确实不能在外部调用。这时候肯定会有童鞋问干嘛这个例子还是长得那么乖,和例4一个样,怎么不用例2的方式呢?问得好,且听我慢慢分解。

继续说例4,我们可以看见函数名(multi)和函数变量(multiply),本不相同,其实两者根本就没有任何关系,因此没有保持一致的必要。说到这儿,我想上面4个例子应该可以精简到3个,例2和例4本质应该是一致的。什么,不信?嘻嘻,我还得继续卖关子哈~继续读下去~~

我们发现例2和例4相比,只不过少了var的函数变量,而例3与例4相比,只不过少了那个函数名,这里从现象上看,例2和例4的本质是相同的,铁证如下:

function foo() {}
alert(foo); // 提示包含“foo”的函数名
var bar = foo;
alert(bar); // 提示依然只包含“foo”的函数名,和bar半毛钱关系都没有

的确是铁证吧?上面的类似例2的代码结合起来写是不是就成例4的方式了?正确,这就是我刚刚所说的两者本质应该相同,只是用例2方式定义函数的时候,JS引擎帮我们做了一些事情,比如声明了函数名为multiply的函数,同时还悄悄定义了一个也叫multiply的变量,然后赋值给这个变量,两个完全一样的名字,我们自以为在使用函数名multiply的时候,实际是在用multiply这个函数变量,晕了吧~说实话,我也晕了~~总之我们调用的时候,实在用函数变量调用,而函数名是无法在外部调用函数的,因此有了我上述的推断。

但是这里要提到的一个小小的差别,函数声明方式定义的函数,与构造函数声明的或者函数表达式声明的不同之处在于,函数声明方式的函数可以在函数定义之前就调用……不说了,还是看代码:

foo(); // 提示Foo
function foo() {
  alert('Foo');
}
bar(); // 哥们,和上面确实不一样,就不要逞能,这不报错了?提示bar未定义
var bar = function() {
  alert('Bar');
}

再说说构造函数声明的函数,这样声明的函数是不会继承当前声明位置的作用域,它默认只会拥有全局作用域,然而这个是其他几种函数声明方式也一样有的,如下:

function foo() {
  var hi = 'hello';
  //return function() {
  //  alert(hi);
  //};
  return Function('return hi;');
}
foo()(); // 执行效果大家自己跑一下看看

可以想见,用构造函数声明返回的这个函数执行必然报错,因为其作用域(即全局作用域)中没有hi这个变量。

还有一点,就是往往大家要说构造函数方式声明的函数效率要低,这是为什么呢?今天从文档是得知是因为另外3种方式申明的函数只会被解析一次,其实他们存在于闭包中,但是那也只与作用域链有关,函数体是只会被解析一次的。但是构造函数方式呢,每次执行函数的时候,其函数体都会被解析一次,我们可以想想这样声明的函数是一个对象,其中存放了参数以及函数体,每次执行的时候都要先解析一次,参数和函数体,才会执行,这样必然效率低下。具体实验不知道如何做?

最后说一个大家都不怎么注意的地方,什么时候看似函数声明方式的方式却不是函数生命方式(还是这么绕~简单点儿说,就是例2的方式什么时候在不经意间就成其他方式了):

当成为表达式的一部分,就如同例3和例4。
不再是脚本本身或者函数的“源元素”(source element)。什么是源元素呢?即在脚本中的非嵌套语句或者函数体(A "source element" is a non-nested statement in the script or a function body),例如:

var x = 0;        // source element 
if (x == 0) {      // source element 
  x = 10;        // not a source element, 因为嵌套在了if语句里
  function boo() {}   // not a source element, 因为嵌套在了if语句里
} 
function foo() {     // source element 
  var y = 20;      // source element 
  function bar() {}   // source element 
  while (y == 10) {   // source element 
   function blah() {} // not a source element, 因为嵌套在了while语句里
   y++;        // not a source element, 因为嵌套在了while语句里
  } 
}

源元素的概念大概有了理解,继续刚刚说的函数声明,请看:

// 函数声明
function foo() {} 
  
// 函数表达式
(function bar() {}) 
  
// 函数表达式
x = function hello() {} 
 
if (x) { 
  // 函数表达式
  function world() {} 
}
 
// function statement 
function a() { 
  // function statement 
  function b() {} 
  if (0) { 
   // 函数表达式
   function c() {} 
  } 
}

最后这里说一下我自己的理解,之所以要区分函数声明与非函数声明,因为在我看了,函数声明方式的函数定义,在JS解析引擎执行的时候会将其提前声明,也就是像我们刚刚上面说的那样,可以在函数定义之前使用,实际上是解析引擎在我们使用前已经将其解析了,但是非函数声明式,就像表达式函数声明,JS解析引擎只会把var声明的变量提前定义,此时变量值为undefined,而真正对这个变量的赋值是在代码实际所在位置,因此上述提到报错都是undefined,实际变量已经定义了,只是还没有赋值,JS解析引擎不知道它为函数。

相信本文所述对大家javascript WEB程序设计的有一定的借鉴价值。

Javascript 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
JavaScript中合并数组的N种方法
Sep 16 #Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 #Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 #Javascript
JavaScript的arguments对象应用示例
Sep 15 #Javascript
avascript中的自执行匿名函数应用示例
Sep 15 #Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 #Javascript
css与javascript跨浏览器兼容性总结
Sep 15 #Javascript
You might like
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python 发送get请求接口详解
2020/11/17 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
地理教师岗位职责
2014/03/16 职场文书
平安工地汇报材料
2014/08/19 职场文书
党委工作总结2015
2015/04/27 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript