javascript 两种声明函数的方式的分析

javascript 声明函数

JavaScript有两种声明函数的方式，一个是函数表达式定义函数，也就是我们说的匿名函数方式，一个是函数语句定义函数，下面看代码：

/*方式一*/
var FUNCTION_NAME = function() { /* FUNCTION_BODY */};
/*方式二*/
function FUNCTION_NAME () { /* FUNCTION_BODY */};

区别一

方式一的声明方式是先声明后使用

方式二的声明方式可以先调用，后声明

/*方式一:
 *先声明后使用
 */

//f1();这里调用就会出错
var f1 = function () {
     alert("var方式");
}
f1();//这里使用才正确

/*方式二:
 *可以先使用后声明
 */

f2(); //这里调用可以正常执行
function f2 () {
     alert("function方式");
}
f2();//这里调用可以正常执行

区别二

//方式一
var FUNCTION_NAME = function() { /* FUNCTION_BODY */};
/*
这种方式,编译后变量声明 FUNCTION_NAME 会“被提前”了，但是他的赋值（也就是FUNCTION_BODY）并不会被提前。匿名函数只有在被调用时才被初始化。
*/
//方式二
function FUNCTION_NAME () { /* FUNCTION_BODY */};
/*
这种方式， 编译后 函数声明 和 赋值 都会被提前。
即函数声明过程在整个程序执行之前的预处理就完成了，所以只要处于同一个作用域，就可以访问到，即使在定义之前调用它也可以。
*/

下面看一个例子：

function f() {
 alert('1');
}

f(); // 弹窗内容是：2

function f() {
 alert ('2');
}

运行时 f() 执行的是alert (‘2');主要原因是JavaScript 函数声明的“提前”行为，简而言之，就是Javascript允许我们在变量和函数被声明之前使用它们，而第二个定义覆盖了第一种定义。换句话说，上述代码编译之后相当于：

function f() {
 alert('1');
}

function f() {
 alert ('2');//申明前置了，但因为这里的申明和赋值在一起，所以一起前置
}

f(); // 弹窗内容是：2

下面再看一个例子：

var f= function() {
 alert('1');
}

f(); // 弹窗内容是：1

function f() {
 alert ('2');
}

这里就是我们期待的behavior，这段程序编译之后相当于：

var f; //申明前置了
function f() {
 alert('1');
}

f(); // 弹窗内容是：1

function f() {
 alert ('2');
}

最后再看一个例子：

f(); //第一次调用函数 弹窗内容是：2

var f= function() {
 alert('1');
}

f(); //第二次调用函数 弹窗内容是：1

function f() {
 alert ('2');
}
f(); //第三次调用函数 弹窗内容是：1

看到结果大家应该都明白了吧。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 深入理解JavaScript中的尾调用(Tail Call)

    什么是尾调用? 尾调用是函数式编程里比较重要的一个概念,尾调用的概念非常简单,一句话就能说清楚,它的意思是在函数的执行过程中,如果最后一个动作是一个函数的调用,即这个调用的返回值被当前函数直接返回,则称为尾调用,如下所示: function f(x) { return g(x) } 在 f 函数中,最后一步操作是调用 g 函数,并且调用 g 函数的返回值被 f 函数直接返回,这就是尾调用. 而下面两种情况就不是尾调用: // 情况一 function f(x){ let y = g(x); re

  • 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • Javascript中的神器——Promise

    Promise in js 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力.而 Promise 很好地解决了这一切. 2015 年 6 月,ECMAScript 6 的正式版 终于发布了. ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 概念 ES6 原生提供了 Promise 对

  • vue.js实现请求数据的方法示例

    vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function() { this.$nextTick(function () { this.$http.jsonp('http://***.com').then(function(res) { console.log(res.data) this.gridData = res.data; }) }) }, })

  • 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

    1.准备一张二维码图片,大小.图片自己定义我这里用的宽度和高度都是253,名称weixin.jpg <!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.org/1999/xhtml"&g

  • javascript表达式和运算符详解

    一.js表达式 定义:表达式是指能计算出值得任何可用程序单元.  --wiki 表达式是js一种短语,可是js解释器用来产生一个值.  --js<权威指南> 1.原始表达式. 常量/直接量: 3.14/ "test" 等 关键字: null,this,true,false 等 变量: i,k,j 等 复合表达式:原始表达式和原始表达式之间用运算符连接可以组成一个复合表达式. 例如: 10 * 20 这就是一个复合表达式 2.(数组.对象的)初始化表达式. 例如: [1,2]

  • 基于JavaScript实现下拉列表左右移动代码

    基于JavaScript实现下拉列表左右移动代码

    废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码. 效果图如下所示: 代码如下所示: <!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.org/1999/xhtml"

  • Avalonjs 实现简单购物车功能(实例代码)

     先给大家简单介绍下avalon概念 avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前就预言,MVVM是前端的终极解决方案.我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的.因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器. 因为最近有在做购物车,然后我们是用avalon来实现一

  • 用move.js库实现百叶窗特效

    用move.js库实现百叶窗特效

    今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧.demo做的有点low,不过效果都在了 这是html和css代码:思路就是,每一个li里面div,放几个p,通过调节translatY,来控制. <style> *{ padding: 0; margin: 0; list-style: none; } #bai{ width: 400px; height: auto; float: left; margin-left:20px auto; } li{ text-align:

随机推荐