JavaScript入門14日目

22158 ワード
JavaScript WeCode 上のコード テキストリンク
すでに上のコードの4週目なので、Web部分とJavaScriptを併用すべきだったのですが、個人的にはJavaScriptに重点を置き、勉強に方向性を置いていました.あ、一昨日からだったようで、4週間も早くて、14日間javascriptを勉強していて驚きました.一日一日の記録が蓄積されるにつれて、少し知識が蓄積されることを願って、今日はもう一度勉強を整理します.

JavaScript学習の整理


1.宣言関数と匿名関数の違い
宣言関数と匿名関数は表面的には関数名を書くか書かないかの差があるが,かなりの差がある.次のコードについて説明します.
함수()

함수 = function () {
  console.log('익명 함수')
}

function 함수() {
  console.log('선언적 함수')
}

함수()
たとえば、上記のコードがあれば、実行時に初めて見ると慌てます.
次は結果です.

特に,まず匿名関数を宣言し,その結果,「宣言関数」が最初に出力され,次いで「匿名関数」が出力されることが分かる.この点を説明するには、宣言関数はコードの実行前に最初に作成されます.逆に、匿名関数は、コードを上から下へ実行することによって作成されます.
上で関数を定義する前に、コードの一番上の行に関数()が入力されていても、宣言関数はコードを読み込む前に作成されるので、最初の行の関数()の結果は宣言関数の結果を出力し、最後の行の関数()最後の行より前の匿名関数が関数として作成されたため、結果は匿名関数として出力されます.この違いは授業でHTMLに向かう際に非常に重要だと説明した.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        함수()

        함수 = function () {
        console.log('익명 함수')
        }
    </script>
    <script>
        function 함수() {
        console.log('선언적 함수')
        }

        함수()
    </script>    
</head>
<body>
    
</body>
</html>
前述したように、scriptラベル付きhtmlが2つある場合、それを実行してコンソールウィンドウを表示すると、次の結果が表示されます.

なぜなら、最初のscriptタグでは、「関数()」が一緒にいる関数は「匿名関数」なので、まだ関数は宣言されていませんが、「関数()」は最初のコードとして表示されるので、「関数is notdefined」エラーをチェックできます.
2番目のscriptラベルでは、「宣言関数」は前述したように、コードの実行前に事前定義されているため、「関数()」がどこに入っても関係なく、「宣言関数」が宣言された部分に匿名関数が含まれていても順序が正確であるため、実行に問題はありません.
これらの問題について、授業中に「宣言関数」があまり使いにくいことを説明することを覚えておいてください.
2.対象
オブジェクトの学習を開始すると、オブジェクトの感覚は配列にかなり似ています.講義的には配列はオブジェクトに基づいているので,配列とオブジェクトはかなり似ている.オブジェクトと配列の違いは、配列が要素にアクセスするときにインデックスを使用し、オブジェクトがキーを使用することです.
オブジェクトを簡単に作成します.
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천'
    }
</script>
「me」という名前の「オブジェクト」が宣言されます.
コンソールウィンドウを開き、次のようにオブジェクトが正しく宣言されていることを確認します.

前述したように、オブジェクトを宣言するときに"{}"を使用して生成され、入力を","で区切って接続します.
配列がインデックスでアクセスされるように、オブジェクトはキーで要素にアクセスすることもできます.
const 객체이름 = {
     키1: '요소',
     키2: '요소'
}
//객체를 선언하는 방법이다.

객체이름 ['키1']
//객체 요소를 확인하는 방법이다.

객체이름.키1
//객체 요소를 확인하는 방법이다. 모양만 다르지 기능의 위와 같다.
上記の方法でオブジェクトにアクセスします.さっき発表した「me」の相手に近づきます.
次のスクリーンショットを見てください.


オブジェクトの「キー」、すなわち「名前」、「居住地」、「国籍」は「オブジェクト名」または「オブジェクト名」です.キー(Key)を入力すると、キー内の要素を特定できます.
オブジェクト内の要素を変更することもできます.次に例を挙げます.
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천'
    }

    console.log(me)
    //위의 예시들과 같이 me 라는 객체를 선언하였다.

    me.이름 = 'Jongmin Lee'
    me.국적 = 'Korea'
    me.거주지 = 'Incheon'
    // 객체 me 안의 요소들을 위와 같이 변경해보았다.
    console.log(me)
</script>
上記のコードをコピーして実行すると、次の結果が表示されます.

オブジェクトの値が次の値にすべて変更されていることがわかります.
配列で値を変更するのと同様に、オブジェクトは上記の方法でオブジェクト内部の要素を変更することもできます.
上ではオブジェクト内の値を要素と呼びますが、コンセプトでは配列内の値は「要素」、オブジェクト内の値の名前は「属性」です.上記の例で挙げたオブジェクトは、「me」オブジェクトの「名前」プロパティとして説明されています.
配列の要素に文字、数値、関数、ランプが表示される場合があるように、オブジェクトのプロパティは配列のようにすべての形式のデータ型を持つ場合があります.
オブジェクトのプロパティで、関数型がオブジェクトのプロパティとして使用される場合は、メソッドと呼ばれます.例えば
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천',
        설명: function () {
            console.log(`${me.이름}의 국적은 ${me.국적}이며 ${me.거주지}에 살고있다.`)
        }
    }

    console.log(me.설명())
</script>
メソッドを作成するには、オブジェクト内に説明()という関数を追加します.以下のように出力します.

出力後、次のメッセージが正常に動作していることがわかります.
矢印関数を使用するか、パラメータを追加して作成することもできます.
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천',
        설명: (x) => {
            console.log(`${me.이름}의 국적은 ${me.국적}이며 나이는 ${x}이며 ${me.거주지}에 살고있다.`)
        }
    }

    console.log(me.설명(33))
</script>
上の関数にパラメータxを付けて矢印関数にしてみます.無理由駆動は以下のように確認できます.

また、メソッド内でキーワード「this」を使用して、自分が持っている属性を表示することもできます.例えば、下を見ると
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천',
        설명: function () {
            console.log(`${this.이름}의 국적은 ${this.국적}이며 ${this.거주지}에 살고있다.`)
          //'me.키 이름' 같은 것들을 전부 'this.키 이름' 으로 수정했다.
        }
    }

    console.log(me.설명())
</script>
上記の「this」キーを使用しても、同じ結果を問題なく表示できます.ただし、矢印関数で「this」を使用すると、かなり異なる結果が表示されます.次のコードで理解します.
<script>
    const me = {
        이름: '이종민',
        국적: '한국',
        거주지: '인천',
        설명: () => {
            console.log(`${this.이름}의 국적은 ${this.국적}이며 ${this.거주지}에 살고있다.`)
        }
    }

    console.log(me.설명())
</script>
上記のコードを一般的な匿名関数から矢印関数に変換します.このコードの実行結果は次のようになり、予期せぬ結果になる可能性があります.

ご覧のように、「this」のキーワードは上記のようにしていません.矢印関数に変換してもメソッドは有効ですが、「this」は機能しません.理由は以下の通り.
関数は匿名関数がこの関数をバインドすることを示します.矢印関数thisはバインドされません.
ここで「thisバインド」とは、thisを現在のオブジェクトに関連付ける動作を意味します.したがって、メソッド内でこのキーワードを使用する場合は、「匿名関数」を使用することを覚えておいてください.
対象については、レッスンではJavaScript開発で多く使われているので、コンセプトの整理が重要です.暗記を復習しなければならない.
Closure in Swift
[SSAC第3期]-第4週-(3)