javaScript的函数对象的声明详解

前端技术 2023/09/09 JavaScript

写作缘由：　　

　　平时再用js写函数的时候，一般都是以惯例 function fn () {} 的方式来声明一个函数，在阅读一些优秀插件的时候又不免见到 　　　　var fn = function () {} 这种函数的创建，究竟他们用起来有什么区别呢，今天就本着打破砂锅问到底的精神，好好来说说这个让人神魂颠倒的--函数声明。

函数声明

 　　函数声明示例代码

复制代码 代码如下:

function fn () {
    console.log(\'fn 函数执行..\');
    // code..
}

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

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

复制代码 代码如下:

function fn () {
    console.log(\'fn 函数执行..\');
    // code..
}

　　控制台输出结果：

　　是的，此时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(\'之后调用开始..\');

　　控制台打印结果：

　　可以看到代码在执行到第一次调用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(\'之后调用开始..\');

　　控制台打印结果：

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

总结：

　　1：首先变量本身不做为一个函数存在，而是一个匿名函数的引用（值类型的不属于引用）

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

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

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

本文地址：https://www.stayed.cn/item/25375

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案