JS两种定义方式的区别、内部原理

相信两种方式大家都用过，但未必所有人都知道其 区别，内部原理。


代码如下:

// 方式1
function func1(x,y){
// your code
}
// 方式2
var func2 = function(x,y){
// your code
}

方式1 是典型的函数声明(Function declarations)。
方式2 是函数表达式(Function expressions)，将一个匿名函数赋值给一个变量。或者说方式2中创建了一个具有形参为x,y的匿名函数，然后把该匿名函数赋值给变量func2。

其主要区别在于：
1， 函数声明需显示的指定函数名，这里是func1；函数表达式则使用匿名函数
2， 方式1在代码执行之前(解释期)被加载到作用域中，方式2则需在代码执行时(运行期)加载

一个简单示例就明白了它们在使用上的区别


代码如下:

alert(func1); // --> func1源码
alert(func2); // --> undefined
// 方式1
function func1(x,y){
// your code
}
// 方式2
var func2 = function(x,y){
// your code
}

可以看到，第一次弹出的是func1的源码，第二次却是undefined。即采用方式1(函数声明)定义函数，可以在该函数代码之上使用它，采用方式2(函数表达式)定义函数则不能在其定义前使用，只能在其定义后使用。

其内部涉及到 执行上下文(Execution context)及 激活对象(Activation object)。想更深了解的请阅读EcmaScript 5文档。

最近发现越来越多的人喜欢使用方式2定义函数，尤其在嵌套函数中。如单纯的定义一个函数个人还是习惯方式1。

赞 (0)

相关推荐

  • JS函数的几种定义方式分析

    本文实例讲述了JS函数的几种定义方式.分享给大家供大家参考,具体如下: JS函数的定义方式比较灵活,它不同于其他的语言,每个函数都是作为一个对象被维护和运行的. 先看几种常用的定义方式: function func1([参数]){/*函数体*/} var func2=function([参数]){/*函数体*/}; var func3=function func4([参数]){/*函数体*/}; var func5=new Function(); 上述第一种方式是最常用的方式,不用多说. 第二种

  • JavaScript定义类或函数的几种方式小结

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细.我们看看JavaScript中定义类的各种方法. 1．工厂方式 javaScript中创建自己的类和对象,我们应该是必须掌握的,我们都知道javaScript中对象的属性可以在对象创建后动态定义,比如下面的代码: 复制代码 代码如下: <scr

  • 浅谈JS函数定义方式的区别

    关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行以前被加载到作用域中,而例二则是在代码执行到那一行的时候才会有定 义: 区别二:函数声明会给函数指定一个名字,而函数表达式则是创建一个匿名函数,然后将这个

  • JS中创建函数的三种方式及区别

    1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2; }; 两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问:而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行. 自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,

  • JS两种定义方式的区别、内部原理

    相信两种方式大家都用过,但未必所有人都知道其 区别,内部原理. 复制代码 代码如下: // 方式1 function func1(x,y){ // your code } // 方式2 var func2 = function(x,y){ // your code } 方式1 是典型的函数声明(Function declarations). 方式2 是函数表达式(Function expressions),将一个匿名函数赋值给一个变量.或者说方式2中创建了一个具有形参为x,y的匿名函数,然后把该

  • 浅谈java中String的两种赋值方式的区别

    浅谈java中String的两种赋值方式的区别

    类似普通对象,通过new创建字符串对象.String str = new String("Hello"); 内存图如下图所示,系统会先创建一个匿名对象"Hello"存入堆内存(我们暂且叫它A),然后new关键字会在堆内存中又开辟一块新的空间,然后把"Hello"存进去,并且把地址返回给栈内存中的str, 此时A对象成为了一个垃圾对象,因为它没有被任何栈中的变量指向,会被GC自动回收. 直接赋值.如String str = "Hello&

  • JavaScript中的函数的两种定义方式和函数变量赋值

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========

  • C语言中字符串的两种定义方式详解

    C语言中字符串的两种定义方式详解

    目录 方式1 方式2 总结 我们知道C语言中是没有字符串这种数据类型的,我们只能依靠数组进行存储,即字符数组,而我们定义并且初始化数组有两种方式.下面将给大家介绍这两种方式并且介绍这两种方式的区别: 方式1 前两种是正确的定义方式,第一种之所以没有指定字符数组长度的原因是编译器能够自己推断出其长度,无需程序员自己设定,这也是我们比较推荐的一种定义方式,但注意内存长度编译器一经判定就无法再次更改,接下来我们分析一下第三种编译器为什么会出现乱码. 相信大家都知道,字符串是以'\0'字符为结束标志的,

  • C++中两种字符串定义方式和区别介绍

    C++中两种字符串定义方式和区别介绍

    目录 前言 概念 定义方式 计算机的存储方式 总结 前言 在学习字符串这方面的内容时,发现字符串定义的两种方式虽然内容相同但还是有细微的区别 概念 字符串就是一串用双引号连接起来的字符串字面值,简称为字符串 定义方式 上代码 char acter1[]="Hello world";//第一种定义方式 char acter2[]={'H','e','l','l','o','w','o','r','l','d'}; 第二种定义方式 此时并不能看出这两种定义方式的区别,拿到VS调试器看看 很

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • JS函数定义方式的区别介绍

    关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行以前被加载到作用域中,而例二则是在代码执行到那一行的时候才会有定 义: 区别二:函数声明会给函数指定一个名字,而函数表达式则是创建一个匿名函数,然后将这个

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

随机推荐