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

本文详细讲述了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程序设计的有一定的借鉴价值。

赞 (0)

相关推荐

  • js函数调用常用方法详解

    来源 javascript语言精粹.这不是书上的源代码. js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方法调用模式 函数调用模式 构造器调用模式 apply调用模式 下面我们来看看一些实例更好理解. 1:方法调用模式 请注意this此时指向myobject. 复制代码 代码如下: /*方法调用模式*/ var myobject={ value:

  • JavaScript子窗口调用父窗口变量和函数的方法

    本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法.分享给大家供大家参考.具体如下: 示例1:子窗口是新打开的窗口 父窗口: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.

  • javascript定义函数的方法

    JavaScript 使用关键字 function 定义函数. 函数可以通过声明定义,也可以是一个表达式. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. 实例 function myFunction(a, b) { return a * b; } 函数表达式 JavaScript 函数可以通过一个表达式定义. 函数表达式可以存储在变量中: 实例

  • 用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    JSON可谓是JavaScript的亮点,它能用优雅简练的代码实现Object和Array的初始化.同样是基于文本的数据定义,它比符号分隔更有语义,比XML更简洁.因此越来越多的JS开发中,使用它作为数据的传输和储存. JS数组内置了不少有用的方法,方便我们对数据的查询和筛选.例如我们有一堆数据: 复制代码 代码如下: var heros = [        // 名============攻=====防=======力量====敏捷=====智力====        {name:'冰室女巫

  • js 把字符串当函数执行的方法

    并且用js去执行: function test(str){ alert(str); } window['test']('aaaaaaaaaaaaaaaaaaaaa'); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] ------------------------------- 方法一... function test(str){ alert(str); } eval('test("aaaaaaaaaaaaaaaaaaa")'); [Ctrl+A 全选 注:如需引入外部J

  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测,发现登陆成功后执行页面跳转函数这段JavaScript(JS)代码特效在IE和谷歌浏览器Chrome下都可以很好地执行,兼容性还不错.结果到了火狐(FireFox)浏览器下setTimeout这个JS内置函数不执行了,无效了,也没报错!打开FireBUG指望它能检测出JS的错误,结果没用...Javascript(JS)脚本代码在各浏览器下的兼容是一个很头疼的问题,经过一番调试和搜索,终于解决了setTimeout这个JS代码在火

  • JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造器形式.以及apply形式.这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式. 本文主要内容: 1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数 一.函数调用形式 函数调用形式是最常见的形式,也是最

  • 一个非常全面的javascript URL解析函数和分段URL解析方法

    一.URL解析函数 复制代码 代码如下: <script>  /** *@param {string} url 完整的URL地址 *@returns {object} 自定义的对象 *@description 用法示例:var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); myURL.file='index.html' myURL.hash= 'top' myURL.host= 'a

  • javascript中使用replaceAll()函数实现字符替换的方法

    而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argument (a regular expression) with the text of the second argument (a string). If the g (glob

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • JS中获取函数调用链所有参数的方法

    function getCallerArgument(){ var result = []; var slice = Array.prototype.slice; var caller = arguments.callee.caller; while(caller){ result = result.concat(slice.call(caller.arguments, 0)); caller = caller.arguments.callee.caller; } return result;

  • 日常收集整理的JavaScript常用函数方法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用. 提示:JavaScript 对大小写敏感.关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数. 字符串长度截取 functiocutstr(strlen{ vatemp, i

  • javascript trim函数在IE下不能用的解决方法

    javascript 的trim 函数在firefox 下面使用没有问题 <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题, 但是在IE下就报错 那么我们可以修改一下 String.prototype.trim=function(){return thi

  • Javascript 判断是否存在函数的方法

    复制代码 代码如下: window.onload=function(){ try{ if(test&&typeof(test)=="function"){ test(); }else{ alert("不存在的函数"); } }catch(e){ } } function test(){ alert("函数执行--"); } 如果不存在,会抛出异常,所以要加try--catch.

  • jquery与js函数冲突的两种解决方法

    如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法 其一: 复制代码 代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$

  • PHP使用json_encode函数时不转义中文的解决方法

    本文实例讲述了PHP使用json_encode函数时不转义中文的解决方法.分享给大家供大家参考.具体方法如下: json_encode函数对于gbk中的中文字符是不会转换的或直接转换成空格了,本文就来给各位整理一个关于json不转义中文问题处理技巧,相信对大家有所帮助. 如果你调用 PHP 自带的 json_encode() 函数, 碰到中文时, 中文会被转义掉. 例如: 复制代码 代码如下: echo json_encode(array('你好')); // 输出: ["\u4f60\u597

  • 多种方法实现当jsp页面完全加载完成后执行一个js函数

    方法1:如下程序,当页面完全加载后执行openTheIndexPage()方法 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Telecommunications Data Collection System</title> <script t

  • js使用split函数按照多个字符对字符串进行分割的方法

    本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法.分享给大家供大家参考.具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以胜任呢,答案是肯定的,js的split()函数可以通过正则表达式实现多分隔符的字符串分割,调用也很简单,下面是详细范例. 下面的代码可以通过js split方法对字符串按照逗号分割 var mystring = "a,b,c,d,e"; var my

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

随机推荐