浅析函数声明和函数表达式——函数声明的声明提前


Posted in Javascript onMay 03, 2016

前两天班级聚会,除了吃喝玩乐就是睡觉扯淡,甚是喜悦,真是独乐乐不如众乐乐啊。

PS:毕业的或即将毕业的有时间能聚就聚吧,毕了业以后属于自己的时间能聚到一块儿可就少太多了。

现在有点时间来看点东西总结些东西了,又因为前段时间片片断断地看了看JavaScript的函数部分,所以抽时间总结下函数的相关部分,当然,里面有些部分都是自己的理解,如果有理解的不对的地方还请小伙伴们不吝指出。

这一节我结合自己的理解和小伙伴们聊一下函数声明的声明提前。

注:有的地方也叫函数声明提升。翻译的不一样,意思一样,大家理解就行。理解万岁!

在聊函数声明的声明提前之前,有必要介绍下函数定义的几种方法,大部分小伙伴们应该都不陌生。了解的或者不想了解的就痛快地一滚轮滚下去吧,不熟悉的或者想再熟悉一下的就放慢脚步起步走。

定义函数的方法

定义函数的方法主要有三种:

1.函数声明(Function Declaration)
2.函数表达式Function Expression)
3.new Function构造函数
其中,经常使用的是函数声明和函数表达式的函数定义方法,这两种方法有着很微妙的区别和联系,而且这两种方法的使用也容易混淆,所以这篇文章主要总结下这两种函数定义方法的相关知识点,当然本文的主题依然是关于函数提前的。

函数声明的典型格式:

function functionName(arg1, arg2, ...){
  <!-- function body -->
}

函数表达式

•函数表达式的典型格式:

var variable=function(arg1, arg2, ...){
      <!-- function body -->
}

包含名称(括弧,函数名)的函数表达式:

var variable=function functionName(arg1, arg2, ...){
    <!-- function body -->
}

像上面的带有名称的函数表达式可以用来递归:

var variable=function functionName(x){
    if(x<=1)
      return 1;
    else
      return x*functionName(x);
}

声明提前

var声明提前

小伙伴们应该都听说过声明提前的说法,我想在此再次重申一遍,因为声明提前是函数声明和函数表达式的一个重要区别,对于我们进一步理解这两种函数定义方法有着重要的意义。

但是再说函数声明提前之前呢,有必要说一下var声明提前。

先给出var声明提前的结论:

变量在声明它们的脚本或函数中都是有定义的,变量声明语句会被提前到脚本或函数的顶部。但是,变量初始化的操作还是在原来var语句的位置执行,在声明语句之前变量的值是undefined。

上面的结论中可以总结出三个简单的点:

1.变量声明会提前到函数的顶部;
2.只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化;
3.在声明之前变量的值是undefined。

还是来例子实在:

var handsome='handsome';
function handsomeToUgly(){
  alert(handsome);
  var handsome='ugly';
  alert(handsome);
}
handsomeToUgly();

正确的输出结果是:
先输出undefined,然后输出ugly。

错误的输出结果是:
先输出handsome,然后输出ugly。

这里正是变量声明提前起到的作用。该handsome局部变量在整个函数体内都是有定义的,在函数体内的handsome变量压住了,哦不对,是覆盖住了同名的handsome全局变量,因为变量声明提前,即var handsome被提前至函数的顶部,就是这个样子:

var handsome='handsome';
function handsomeToUgly(){
  var handsome;
  alert(handsome);
  var handsome='ugly';
  alert(handsome);
}
handsomeToUgly();

所以说在alert(handsome)之前,已经有了var handsome声明,由上面提到的

在声明之前变量的值是undefined
所以第一个输出undefined。

又因为上面提到的:

只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化
所以第二个输出ugly。

函数声明提前
接下俩我们结合var声明提前开始聊函数声明的声明提前。

函数声明的声明提前小伙伴们应该很熟悉,举个再熟悉不过的例子。

sayTruth();<!-- 函数声明 -->
function sayTruth(){
  alert('myvin is handsome.');
}

sayTruth();<!-- 函数表达式 -->
var sayTruth=function(){
  alert('myvin is handsome.');
}

小伙伴们都知道,对于函数声明的函数定义方法,即上面的第一种函数调用方法是正确的,可以输出myvin is handsome.的真理,因为函数调用语句可以放在函数声明之后。而对于函数表达式的函数定义方法,即上面的第二种函数调用的方法是不能输出myvin is handsome.的正确结果的。

结合上面的myvin is handsome.例子,函数声明提前的结论似乎很好理解,不就是在使用函数声明的函数定义方法的时候,函数调用可以放在任意位置嘛。对啊,你说的很对啊,小伙伴,我都不知道怎么反驳你了。那就容我再扯几句。

从小伙伴所说的

不就是在使用函数声明的函数定义方法的时候,函数调用可以放在任意位置嘛
可以引出一点:

函数声明提前的时候,函数声明和函数体均提前了。

而且:

函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行(人家都执行过了自然就不再执行了)。

上面是一点。

函数表达式为什么不能声明提前
我们再说一点:为什么函数表达式不能像函数声明那样进行函数声明提前呢?

辛亏我知道一点儿,否则真不知道我该怎么回答呢?

咳咳,按照我的理解给小伙伴们解释一下下:

我们上面说了var的声明提前,注意我上面提过的:

只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化

Ok,我们把函数表达式摆在这看看:

var variable=function(arg1, arg2, ...){
          <!-- function body -->
}

函数表达式就是把函数定义的方式写成表达式的方式(貌似是白说,但是这对于解释和理解为毛函数表达式不能函数声明提前具有良好的疗效),就是把一个函数对象赋值给一个变量,所以我们把函数表达式写成这个样子:

var varible=5看到这,也许小伙伴们会明白了,一个是把一个值赋值给一个变量,一个是把函数对象赋值给一个变量,所以对于函数表达式,变量赋值是不会提前的,即function(arg1, arg2, ...){<!-- function body -->}是不会提前的,所以函数定义并没有被执行,所以函数表达式不能像函数声明那样进行函数声明提前。

函数声明提前的实例分析

还是那句话,还是例子来的实在:

sayTruth();
if(1){
  function sayTruth(){alert('myvin is handsome')};
}
else{
  function sayTruth(){alert('myvin is ugly')};
}

在浏览器不抛出错误的情况下(请自行测试相应的浏览器是否有抛出错误的情况,为啥我不测试?我能说我懒么。。。),浏览器的输出结果是输出myvin is ugly(我不愿承认,但是事实就是这样啊啊啊啊,难道道出了人丑就该多读书??????)。

为什么呢?当然是声明提前了。因为函数声明提前,所以函数声明会在代码执行前进行解析,执行顺序是这样的,先解析function sayTruth(){alert('myvin is handsome')},在解析function sayTruth(){alert('myvin is ugly')},覆盖了前面的函数声明,当我们调用sayTruth()函数的时候,也就是到了代码执行期间,声明会被忽略,所以自然会输出myvin is ugly(好残酷的现实。。。)。忘了的可以看上面说过的:

函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行了(人家都执行过了自然就不再执行了)。

小了个结

关于函数声明的函数提前(提升)就聊到这里先,希望我的理解和扯淡能够对有需要的小伙伴有所帮助。

当然,实践出真知。对事物的了解、认知和运用还是在于多看多用多总结,记得有句名言,是讲声明和实践的:“动起来,为新的声明喝彩。”。

以上这篇浅析函数声明和函数表达式——函数声明的声明提前就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
浅谈JavaScript作用域
Dec 06 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 #Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 #Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 #Javascript
聊一聊JavaScript作用域和作用域链
May 03 #Javascript
小白谈谈对JS原型链的理解
May 03 #Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 #Javascript
JQuery的Pager分页器实现代码
May 03 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP与已存在的Java应用程序集成
2006/10/09 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python发展史及网络爬虫
2019/06/19 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
委托证明的格式
2014/01/10 职场文书
课外科技活动总结
2014/08/27 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
在职证明范本
2015/06/15 职场文书