1. ホーム /
  2. 2023年 2月

2023年 2月 の投稿一覧

  • 2023.02.25

【JavaScript】即時関数とthis

IIFEは定義されるとすぐに実行される。
即時関数の中のthisにはグローバルオブジェクトがセットされることに注意する。
次にような挙動になる。
bind、apply、callを使ってthisの値をコントロールする。

続きを読む
  • 2023.02.25

php ファイル名から拡張子を取り除くまたは拡張子を取得する

Javascriptでのファイル名を分割する正規表現を参考にして作った。
basename、pathinfoとの比較はまた今度やる。


$reg="/(.*)(?:\.([^.]+$))/";
$file_name="demon_uploader.jpg";
preg_match($reg,$file_name,$retArr);
echo "$retArr[0]"."\n<br/>";//demon_uploader.jpg
echo "$retArr[1]"."\n<br/>";//demon_uploader
echo "$retArr[2]"."\n<br/>";//jpg
echo "\n<br/>";
$file_name2=".jpg";
preg_match($reg,$file_name2,$retArr2);
echo "$retArr2[0]"."\n<br/>";//.jpg
echo "$retArr2[1]"."\n<br/>";//空文字
echo "$retArr2[2]"."\n<br/>";//jpg
続きを読む
  • 2023.02.25

【JavaScript】クロージャ(closure)はプライベートな変数や関数を作る

クロージャ(closure)についての解説の続き。

前回書いた記事
【JavaScript】クロージャ(closure) (attacktube.com)
【JavaScript】クロージャ(closure)とonclickメソッド (attacktube.com)

クロージャ(closure)はプライベートな変数や関数を作ることに利用できる。
プライベートな変数とメソッドを定義したコードを次に示す。



const myspace = {};

//myspace.sampleは即時関数であり定義して即座に実行される。
//クロージャ(closure)はプライベートな変数や関数を作る。
myspace.sample = (function() {

    //strはmyspace.sampleの中からだけアクセス可能
    const str = "hello world";
    const that = {};
    const my = {};

    //my.Test関数はmyspace.sampleの中からだけアクセス可能
    my.Test = function() {
        console.log(str);
    };

    //that.Init関数はmyspace.sampleの外からアクセス可能
    that.Init = function(num) {
        console.log(num + "年");
        my.Test();
    };

    return that;

});


myspace.sample().Init(2023);
続きを読む
  • 2023.02.24

【JavaScript】function文(The function Statement)とfunction式(The function Expression)

Javascriptにはfunction文(The function Statement)とfunction式(The function Expression)が存在する。
function文とfunction式は別物である。
function文は省略記法であり、functionオブジェクトをvar文で変数に格納することを意味している。


//function文(The function Statement)
function foo() {}

//これは、以下のfunction式(The function Expression)を用いた記述と同じ意味になる。
var foo = function() {};
続きを読む
  • 2023.02.24

【JavaScript】即時関数

即時関数(IIFE)の説明
JavaScriptで即時関数を使う理由 – Qiita ExternalLink

IIFE(Immediately Invoked Function Expression; 即時実行関数式)という。
IIFE (即時実行関数式) | MDN (mozilla.org) ExternalLink

IIFEは定義されるとすぐに実行される。
即時関数の中のthisにはグローバルオブジェクトがセットされることに注意する。

ある文の先頭にfunction文を記述することはできない。なぜなら、公式の文法では、functionとい
う単語から始まる文はfunction文であることになっているからだ。
文の先頭にfunction式を書くには、function式を括弧でくるめばいい。


(function() {

	//この中の変数はグローバル変数でなくローカル変数である。
	var hidden_variable;

})();
続きを読む
  • 2023.02.23

【JavaScript】クロージャ(closure)とonclickメソッド

クロージャ(closure)についての解説の続き。

前回の記事
【JavaScript】クロージャ(closure) (attacktube.com)

クロージャの挙動について理解を深めていく。
次にように関数オブジェクトadd_the_handlersの内部に関数オブジェクトnodes[i].onclickを定義してクロージャを作った。
これは、liタグの春をクリックすると0、liタグの夏をクリックすると1、liタグの秋をクリックすると2、liタグの冬をクリックすると3とalertするプログラムを作成した。
しかし、春夏秋冬のどれをクリックしても4をアラートしてしまう。これは一体どうゆうことなのか？



<!DOCTYPE HTML>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">

    </style>

</head>

<body>

    <h3>クロージャとonclick</h3>

    <ul id="z01">
        <li><a href="#">春</a></li><!-- 4 -->
        <li><a href="#">夏</a></li><!-- 4 -->
        <li><a href="#">秋</a></li><!-- 4 -->
        <li><a href="#">冬</a></li><!-- 4 -->
    </ul>

    <script type="text/javascript">
        window.onload = function() {

            var element = document.getElementById("z01").getElementsByTagName("li");

            add_the_handlers(element);

        }

        //間違った方法でイベントハンドラを設定する関数を作成する。
        var add_the_handlers = function(nodes) {
            var i;
            for (i = 0; i < nodes.length; i += 1) {
                nodes[i].onclick = function(e) {
                    alert(i);
                };
            }
        };

    </script>
</body>

</html>
続きを読む
  • 2023.02.23

【JavaScript】クロージャ(closure)

クロージャ(closure)について解説する。

クロージャを簡単に説明すると「関数オブジェクトの1つ」である。
ただし、クロージャは単純な関数オブジェクトではなく、「環境付き」の関数オブジェクトである。

JavaScriptの関数は、その関数が作成されたときの「環境」を保持するように設計されている。
クロージャは関数の中に関数を定義する。このとき、内側の関数が外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセス可能である。
この内側の関数は、外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセスできる環境付きの関数オブジェクト(クロージャ)である。

つまり、関数を定義して、その関数の中に関数を定義してあったらクロージャである。

次にクロージャのサンプルコードを示す。
closureTest関数の中にret関数を定義してある。
外側の関数はclosureTest関数であり、内側の関数はret関数である。

closureTestを呼び出してcounter関数を生成する。
counter関数を実行するたびに10づつ値が増えていく。

新しくclosureTestを呼び出すと、そこで生成された関数は全く別の環境を保持することになる。
counter関数の環境とcounter2関数は異なる環境である。

続きを読む
  • 2023.02.23

【JavaScript】カリー化と部分適用

JavaScriptのカリー化と部分適用の違いがよく分かっていない。
人によって認識違ったり、書籍やWebサイトの情報も書いてあることがそれそれ違っていたりする。

クロージャの代表的な使い方として「部分適用」というテクニックがある。
「部分適用」は引数の数を減らすテクニックである。

今まで「カリー化」と「部分適用」は使ったことないな。

続きを読む