8/24 関数 つづき javascript

関数 のつづき

入れ子の関数とクロージャ

の部分でまたクロージャ登場。

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); // このように考えてください : 与えられたものに 3 を加算する関数を代入します
result = fn_inside(5); // 8 を返す

result1 = outside(3)(5); // 8 を返す

やはり(外側の)関数宣言のブロック中で(内側の)関数宣言をして、外側の関数の返り値として内側の関数を返す、という形。これがクロージャなんでしょう。

outside()関数が実行終了しても仮引数xに渡された引数3は消えないので、上記プログラムが正常に動作する、と。

解説文も意味がわからないが、多分、inside関数が自身の中でxを参照しているので、outside関数が実行終了しても変数xは破棄されない。よって上記例ではxに渡された3も保持されたままなので、意図したとおりの結果が出る、と。


というか下の方にもろ「クロージャ」の見出しがある。あるけど、わかりにくい。

クロージャは、内側の関数が何かしらの形で外側の関数のスコープ外のどこかで使用可能になった場合に作られます。

この説明の通り内側の関数が外側の関数のスコープ外で使用できて使用したとき、内側の関数をクロージャーというんでしょう。

var pet = function(name) {          // 外側の関数は変数 "name" を定義
  var getName = function() {
    return name;                // 内側の関数は外側の関数の変数 "name" にアクセス可能
  }
  return getName;               // 内側の関数を返すことで、外側の関数に公開する
}
myPet = pet("Vivie");
    
myPet();  

↑が一番最初に見たクロージャの例。多分myPet変数にはgetName関数(内側の関数)への参照が入っており、そのgetName変数がname変数を参照しているので、pet関数の実行が終了してもname変数は保持されている、と。


アロー関数

var a = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

var a2 = a.map(function(s) { return s.length; });

console.log(a2); // logs [8, 6, 7, 9]

var a3 = a.map(s => s.length);

console.log(a3); // logs [8, 6, 7, 9]

アロー関数もだけど、mapが出てきたのでmapについて。

【JavaScript入門】配列でmapを使う方法(Mapオブジェクトも解説)

配列の各要素に対して適用したい処理を(コールバック関数として)指定できるんですね。

さらにsetIntervalが出てきたのでsetIntervalについて。どんどん飛ぶww

https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>setInterval/clearInterval example</title>

  <script>
    var nIntervId;
 
    function changeColor() {
      nIntervId = setInterval(flashText, 1000);
    }
 
    function flashText() {
      var oElem = document.getElementById('my_box');
      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
    }
 
    function stopTextColor() {
      clearInterval(nIntervId);
    }
  </script>
</head>
 
<body onload="changeColor();">
  <div id="my_box">
    <p>Hello World</p>
  </div>

  <button onclick="stopTextColor();">Stop</button>
</body>
</html>

1秒ごとに文字色を切り替えてる。こんなことができるんですね~ww

oElem.style.coloroElem.style.backgroundColorにすれば背景色が切り替わる、とか。いろいろできる。

コメントを残す

メールアドレスが公開されることはありません。