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实现的所谓的滑动门
May 23 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
纯js简单日历实现代码
Oct 05 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 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遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript 闭包疑问
2010/12/30 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
教师党性分析材料
2014/02/04 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015新学期开学寄语
2015/02/26 职场文书
讲座通知范文
2015/04/23 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers