写作缘由:  

  平时再用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,函数对象,声明

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“javaScript的函数对象的声明详解”

暂无“javaScript的函数对象的声明详解”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。