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的loading效果实现代码
Nov 05 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
Vue操作Storage本地化存储
Apr 29 Vue.js
JS开发前端团队展示控制器来为成员引流
Aug 14 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP实现分页的一个示例
2006/10/09 PHP
php中apc缓存使用示例
2013/12/25 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
js实现选项卡效果
2020/03/07 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
js实现查询商品案例
2020/07/22 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
基于python操作ES实例详解
2019/11/16 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
应届生煤化工求职信
2013/10/21 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
工程造价专业求职信
2014/07/17 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书