iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰系列 第 21

[21] IDKJS - Closure

Global Variables

JavaScript的function可以存取function內部的變數,
也可以存取function外的變數。

var x = 1;
function foo() {
  var y = 2;
  return x + y + 1;
}
foo(); \\ 4

上面的例子中,
x是global variable,屬於window object,
在整個html page或是window中可以被使用、修改。
y是local variable,
只能在被定義的function中使用。

Life time

Global variable會活得跟window、web page一樣長,
Local variable生命週期很短,function被invoke時會被created,function結束後就被delete。

Counter dilemma

如果要使用counter來計算某些東西,並且讓所有function來使用這個counter,就使用global variable吧!

var count = 0;

function add(x) {
  return count += x;  
}

add(1); // 1
add(2); // 3
add(3); // 6
count = 4 // 這是一段任何的code
console.log(count); // 4

任何的code不用透過invoke add()都能夠改變count,
為了不要讓其他code去改變count,
如果我們把count作為add()的local variable,
來防止add()之外的code來修改count。

function add(x) {
  var count = 0;
  count += x;  
  return count;
}

add(1); // 1
add(2); // 2
add(3); // 3

預設應該是要等於6,
但是每次執行add()時,counter都會被reset一次變為0。

Nested Functions

Function 除了可以使用global variable之外,
由於JavaScript支援 nested(嵌套) function,
Function也能夠從上一層的scope尋找變數並使用。

function add(x) {
  var count = 0;
  function plus() {
   count += x;   
  };  
  return count;
}

如果能從外面直接invokeplus(),就可以解決這個問題了。
但是還是得解決count = 0的問題,希望他能只被執行一次就好。

Closure

可以使用閉包 (closure)來解決這個問題

var add = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

add(); // 1
add(); // 2
add(); // 3 

變數add 被assign一個self-invoking function,
self-invoking function只會執行一次,
並將count設為0,return一個 function expression,
這樣使得add變為function,
也能夠在前一層scope取得count


資料來源:W3school

上一篇
[20] IDKJS - Function call & apply
下一篇
[22] IDKJS - AJAX - 發出 HTTP 請求
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言