javaScript的函数对象的声明详解


Posted in Javascript onFebruary 06, 2015

写作缘由:

平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到

var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明。

函数声明

 

函数声明示例代码

function fn () {

    console.log('fn 函数执行..');

    // code..

}

这样我们就声明了一个名称为fn的函数,这里出个思考,你认为在这个函数的上面来调用他的话会执行吗?还是会报错?

fn(); // 在之前调用我们声明的fn函数

function fn () {

    console.log('fn 函数执行..');

    // code..

}

控制台输出结果:

javaScript的函数对象的声明详解

是的,此时fn函数是可以被调用到的,这里来总结下原因。

总结:

1:此时fn函数是变量的结果,默认存储在全局上下文的变量中(可用 window.函数名 来验证)

2:此方式为函数声明,在进入全局上下文阶段创建,代码执行阶段,它们已经可用。ps:javaScript在每次进入方法时都会先初始化上下文环境(由全局 → 局部)

3:它可以影响变量对象(仅影响存储在上下文中的变量)

 函数表达式

函数表达式示例代码

var fn = function () {

    console.log('fn 函数【表达式】声明执行..')

    // code..

}

这样我们就声明了一个匿名函数,并且把它的引用指向了变量fn?

再次在该表达式声明的函数上下方各调用一次,来看控制台的输出结果。

// 为了清晰的看到控制台的输出,我们在各自调用前后做个标记,增加可读性。

console.log('之前调用开始..');

fn();

console.log('之前调用结束..');

var fn = function () {

    console.log('fn 函数【表达式】声明执行..')

    // code..

}

console.log('之后调用开始..');

fn();

console.log('之后调用开始..');

控制台打印结果:

javaScript的函数对象的声明详解

可以看到代码在执行到第一次调用fn()函数的时候,提示:fn is not a function (fn 不是一个方法),遇到错误而终止运行。

这说明在第一次调用fn()的同时,var fn 变量没有做为全局对象的一个属性而存在,且 fn 引用的匿名函数上下文也没有被初始化,所以在他之前调用失败。

// 现在先把之前的调用逻辑给注释掉,再看下控制台的输出

//    console.log('之前调用开始..');

//    fn();

//    console.log('之前调用结束..');

    var fn = function () {

        console.log('fn 函数【表达式】声明执行..')

        // code..

    }

    console.log('之后调用开始..');

    fn(); // 在表达式之后调用

    console.log('之后调用开始..');

控制台打印结果:

javaScript的函数对象的声明详解

可以看出,在该表达式函数之后来调用是可以的,来总结下那是为什么呢?

总结:

1:首先变量本身不做为一个函数存在,而是一个匿名函数的引用(值类型的不属于引用)

2:在代码执行阶段,初始化全局上下文时,它没有被做为全局的一个属性而存在,所以不会造成变量对象的污染

3:该类型的声明一般在插件的开发比较常见,也可做为闭包中回调函数的调用

所以 function fn () {}    并不等于    var fn = function () {} ,他们有本质上的区别。

Javascript 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
javascript实用方法总结
Feb 06 #Javascript
javascript实现限制上传文件大小
Feb 06 #Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 #Javascript
javascript去除字符串左右两端的空格
Feb 05 #Javascript
jQuery判断对象是否存在的方法
Feb 05 #Javascript
jquery实现对联广告的方法
Feb 05 #Javascript
jquery实现在光标位置插入内容的方法
Feb 05 #Javascript
You might like
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python文本处理之按行处理大文件的方法
2018/04/09 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python的命名规则知识点总结
2019/10/04 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
借名购房协议书范本
2014/10/06 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
大学学生会竞选稿
2015/11/19 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书