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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
react中的ajax封装实例详解
2017/10/17 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
应聘美工求职信
2013/11/07 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
培训班主持词
2014/03/28 职场文书
医德考评自我评价
2014/09/14 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
四年级作文之植物
2019/09/20 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS