老生常谈JavaScript 函数表达式_javascript技巧

JavaScript中创建函数主要有两种方法:函数声明和函数表达式。这两种方式都有不同的适用场景。这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景,下面一一描述。

主要特点

•可选的函数名称

函数名称是函数声明的必需组成部分,这个函数名称相当于一个变量,新定义的函数会复制给这个变量,以后函数的调用都需要通过这个变量进行。而对于函数表达式来说,函数的名称是可选的,例如下面的例子:

var sub = function(a1,a2){
  return a1-a2;
}

这个例子中函数表达式没有名称,属于匿名函数表达式。再看下面的例子:

var sub = function f(a1,a2){
  return a1-a2;
}
console.log(f(5,3));  //错误调用方式
console.log(sub(5,3));  //正确调用方式

在这个例子中,函数表达式的名称为f,这个名称f实际上变成了函数内部的一个局部变量,并且指代函数对象本身,在函数递归的时候有很大用处,后面会详细讲到。

•在执行阶段创建(区别于函数声明)

这个特点是函数表达式明显区别于函数声明的地方。

解释器在解析JavaScript代码时对于这两种方式并不是一视同仁的。解释器会首先读取函数声明,并使其在执行任何代码之前可用;而对于函数表达式,则必须等到解释器执行到它所在的代码行,才会被真正解析执行。例如:

console.log(add(1,2));  //"3"
console.log(sub(5,3));  //"unexpected identifier",报错
function add(a1,a2){
  return a1+a2;
}
var sub = function(a1,a2){
  return a1-a2;
}

第一条语句完全可以正常执行。对代码求值时,JavaScript引擎在第一遍就会声明函数并通过一个名为函数声明提升的过程将它们放到源代码树的顶部。也就是说在执行环境的创建阶段(函数被调用但还没有开始执行)就会对函数声明进行"hosting"操作。所以,即使声明函数的代码在调用它的代码后面,JavaScript引擎也会把函数声明提升到顶部。但是如果把函数声明更改为函数表达式,就会在执行期间报错。原因在于在执行到函数所在的语句之前,变量sub中并不会包含对函数的引用。也就是说在代码执行阶段,变量sub才会被赋值。除了以上不同,在其它方面函数声明和函数表达式的语法是等价的。

•不会影响变量对象

var sub = function f(a1,a2){
  console.log(typeof f); //"function"
  return a1-a2;
}
console.log(typeof f);  //"Uncaught ReferenceError: f is not defined(…)"

通过上面的例子可以看到,函数名称f只能在函数对象内部使用,函数表达式的函数名称并不存在于变量对象中。

使用场景

函数表达式的使用场景很多。下面主要描述的是函数递归以及代码模块化方面的应用。

•函数递归

看下面的例子:

function factorial(num){
  if(num <= 1){
     return 1;
  }else{
     return num * factorial(num - 1);
  }
}

这是一个经典的阶乘函数,但是这个例子存在的一个问题是函数名称factorial与函数体紧密耦合在一起,执行下面的语句就会报错:

var anotherFactorial = factorial;
factorial = null;
console.log(anotherFactorial(5));  //"Uncaught TypeError: factorial is not a function"

报错的原因在于在函数体内部会调用factorial函数,而变量factorial对函数的引用已经被解除所以报错。这种情况的解决方法一般可以使用arguments.callee来解决,arguments.callee始终指向当前的函数,例如:

function factorial(num){
  if(num <= 1){
     return 1;
  }else{
     return num * arguments.callee(num - 1);
  }
}

 这样在此执行anotherFactorial函数就可以得到正确结果了。但是在严格模式"strict"下,arguments.callee是不能通过脚本访问的,这是就可以使用函数表达式来解决这个问题了,例如:

var factorial = (function f(num){
  if(num <= 1){
     return 1;
  }else{
     return num * f(num - 1);
  }
});
console.log(factorial(5));  //"120"

 •代码模块化

JavaScript中没有块级作用域,但我们可以使用函数表达式模块化JavaScript代码。模块化代码中可以封装不必让使用者知道的细节,只暴露给使用者相关接口,同时可以避免对全局环境的污染,例如:

var person = (function(){
  var _name = "";
  return{
    getName:function(){
       return _name;
    },
    setName:function(newname){
       _name = newname;
    }
  };
}());
person.setName("John");
person.getName();  //"John"

 这个例子中创建了一个匿名函数表达式,这个函数表达式中包含了模块自身的私有变量和函数;这个函数表达式的执行结果返回一个对象,对象中包含了模块暴露给使用者的公共接口。代码模块化的具体形式还有很多,例如在一些常用的JavaScript库中通常都会使用类似下面例子的立即执行函数:

(function(){
  var _name = "";
  var root = this;
  var person = {
    getName: function(){
      return _name;
    },
    setName: function(newname){
      _name = newname;
    }
  };
  root.person = person;
}.call(this));
person.setName("John");
person.getName();  //"John"

 这种方式直接将包含模块公共接口的对象作为全局对象的一个属性,这样在其它地方直接可以使用全局对象的这个属性来使用这个模块了。

以上这篇老生常谈JavaScript 函数表达式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript函数表达式、javascript正则表达式、javascript 表达式、javascript el表达式、javascript三元表达式,以便于您获取更多的相关知识。

时间: 2024-12-31 14:19:27

老生常谈JavaScript 函数表达式_javascript技巧的相关文章

浅析javascript函数表达式_javascript技巧

开始学习javascript函数表达式,仔细阅读下文. 1.一般形式的创建函数,在执行代码之前会先读取函数声明,所以可以把函数声明写在函数调用的下面: sayHi(); function sayHi(){ alert("Hi!"); } 2.使用函数表达式创建函数,调用前必须先赋值: sayHi(); //错误!!函数不存在 var sayHi=function(){ alert("Hi!"); } 3.递归 一般递归 function factorial(num)

深入理解JavaScript系列(4) 立即调用的函数表达式_javascript技巧

前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为"自执行",但作者后面说了很多,来说服大家称呼为"立即调用的函数表达式". 本文英文原文地址:http://benalman

深入理解JavaScript系列(2) 揭秘命名函数表达式_javascript技巧

前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会发现其实是不切实际的.当然,如果你不关注调试,那就没什么可担心的了,否则,如果你想了解兼容性方面的东西的话,你还是应该继续往下看看. 我们先开始看看,什么叫函数表达式,然后再说一

跟我学习javascript的函数和函数表达式_javascript技巧

1.函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明:function 函数名称 (参数:可选){ 函数体 } 函数表达式:function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

老生常谈JavaScript 正则表达式语法_javascript技巧

JavaScript定义正则表达式有两种方法. 1.RegExp构造函数 var pattern = new RegExp("[bc]at","i"); 它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串. 2.字面量 var pattern = /[bc]at/i; 正则表达式的匹配模式支持三种标志字符串: g:global,全局搜索模式,该模式将被应用于所有字符串,而并非搜索到第一个匹配项就停止搜索: i:ingore case,忽略字母大小写,

老生常谈javascript的类型转换_javascript技巧

目录: 1 : 伪对象  2 : 转换为字符串  3 : 数字转字符串  4 : 转换为数字  5 : 转换为Boolean  6 : Number()和parseInt()的区别  7 : String()和toString()的区别 1 : 伪对象 伪对象:javascript是一门很有意思的语言,即便是基本类型,也是伪对象,所以他们都有属性和方法. 变量a的类型是字符串,通过调用其为伪对象的属性length获取其长度 . <script> var a="hello javasc

详解JavaScript函数对象_javascript技巧

函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. function One(leve , leve){ //code return leve+leve } 注释: 形参不需要加上类型: return语句为可选,没有return语句的函数返回undefined: 局部变量与全局变量 在函数内声明:局部变量 在函数外声明:全局变量 向一个新变量名赋值时并没有使用var:这个变量会变为新的全局变量 函数可以作为值 形式1: function init(){ alert("One&qu

js中函数声明与函数表达式_javascript技巧

目前为止,我们一直没有对函数声明和函数表达式加以区别.而实际上,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问):至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行.如下例子: 复制代码 代码如下: alert(sum(10,10)); function sum(num1,num2) {     return num1+num2; } 以上代码完全可以正确执行,因为在代码开始执行之前,解析

详细分析JavaScript函数定义_javascript技巧

函数 几个要点:                 a).函数是javascript中的一等公民 (重要性)                 b).函数是一个对象                 c).函数定义了一个独立的变量作用域 定义方式 a)命名函数:           除非在另一个函数内部定义,否则,命名函数是全局的.  // 全局的命名函数 function add(x, y) { return x + y; } console.info(add(100, 200)); //300 b