×

前端开发:引用函数与调用函数的区别

作者:andy0012020.05.14来源:Web前端之家浏览:7330评论:0

在前端开发项目中,引用函数与调用函数二者有什么区别呢?

引用函数与调用函数的差别与函数名称后是否附有括号()有关。函数引用只会单独出现,但函数调用则必定后随括号,很多时候还附有自变量。

DEMO

// 函数引用 代码一
function f(){
    var x = 5;
    return x;
}
var a = f;
var b = f;

console.log(a===b); // true
// 函数调用 代码二
function f2() {
    var x = 5;
    return x;
}
var a2 = f2();
var b2 = f2();
console.log(a2 === b2);

// 函数调用 代码三
function f3(){
    var x = 5;
    return function(){
        return x;
    }
}
var a3 = f3();
var b3 = f3();
console.log(a3 === b3); // false

如上的代码:代码一和代码二分部是函数引用和函数调用的列子,返回都为true,代码三也是函数调用的列子,返回且为false

我们现在来理解下函数引用和函数调用的本质区别:当引用函数时候,多个变量内存存储的是函数的相同的入口指针,因此对于同一个函数来讲,无论多少个变量引用,他们都是相等的,因为对于引用类型(对象,数组,函数等)都是比较的是内存地址,如果他们内存地址一样的话,说明是相同的;但是对于函数调用来讲,比如代码三;每次调用的时候,都被分配一个新的内存地址,所以他们的内存地址不相同,因此他们会返回false,但是对于代码二来讲,我们看到他们没有返回函数,只是返回数值,他们比较的不是内存地址,而是比较值,所以他们的值相等,因此他们也返回true,我们也可以看看如下实列化一个对象的列子,他们也被分配到不同的内存地址,因此他们也是返回false的;

如下代码测试:

function F(){
    this.x = 5;
}
var a = new F();
var b = new F();
console.log(a === b); // false

函数与一般变量的差异,在于如何使用数据。与函数相关的数据(或代码)可被执行。想执行函数时,就在函数名称后加上括号(),如果函数需要自变量,也要记得附加上。

函数变量的值不是代码本身,而是指向存储代码的存储器位置的引用。

回调函数。 简单理解就是:函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script language="javascript" type="text/javascript">
    function a(callback)
    {
        alert("我是parent函数a!");
        alert("调用回调函数");
        callback();
    }
    function b(){
        alert("我是回调函数b");

    }
    function c(){
        alert("我是回调函数c");

    }

    function test()
    {
        a(b);
        a(c);
    }

</script>
<body>
<h1>学习js回调函数</h1>
<button onClick=test()>click me</button>
<p>应该能看到调用了两个回调函数</p>
</body>
</html>

试试吧!!!

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js2020051401.html

网友评论文明上网理性发言 已有0人参与

发表评论: