JavaScript中的引用函式、呼叫函式和回撥函式
阿新 • • 發佈:2018-12-25
引用函式與呼叫函式的區別
引用函式與呼叫函式的差別與函式名稱後是否附有括號()有關。函式引用只會單獨出現,但函式呼叫則必定後隨括號,很多時候還附有自變數。
舉個例子
// 函式引用 程式碼一
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>