179日目

10377 ワード
this プログラミング テキストリンク

整理する


Javascriptで難しい部分を聞かれたらthisを選びます.
ずっと勉強していましたが、まだ完全に理解していないので、このようなおおよその情報を身につけたような気がします.
でもブログを整理しながら整理するともっとわかりやすいので整理しておきます
主にコードクラスのthis講義を参照した.(リンク下部)

this


MDNのthisの概要
ほとんどの場合、thisの値は、関数を呼び出す方法によって決定される.実行中の割当てでは設定できません.関数は呼び出し時に異なる場合があります.
デフォルト値thisブラウザでコンソールを開き、thisと入力するとwindowが得られます.

このことから、実質的にthisはwindowである.
ウィンドウで呼び出され、windowオブジェクトが返されます.
呼び出しメソッドによって決定されたことを示します
const someone = {
  name: 'chan',
  whoAmI: function() {
    console.log(this);
  }
};

const myWhoAmI = someone.whoAmI;
/* 1번 */
someone.whoAmI(); // {name: 'chan', whoAmI: f}

/* 2번 */
myWhoAmI(); // Window {}

  • 第1の例は、thisを呼び出すsomeoneオブジェクトである.したがって、thisはsomeoneである.

  • 第2の例は第1の例と同じように見え、Windowオブジェクトを返す理由は、第1の例呼び出しwhoAmIの直接オブジェクトがsomeoneであるが、第2の例実行JavaScriptの基本環境がブラウザであるため、global呼び出しmyWhoAmI()~thisはヘルプオブジェクトを生成する.
    • では、someone.whoAmIボタンでaddEventListenerを動かすとどうなるのでしょうか.
    htmlファイル
    ...
<body>
  <Button id='btn'></Button>
  <script src='main.js'></script>
</body>
    JSファイル
    const someone = {
  name: 'chan',
  whoAmI: function() {
    console.log(this);
  }
};

const btn = document.getElementById('btn');
btn.addEventListener('click', someone.whoAmI);
    上に作成したボタンを作成し、そのボタンをクリックするとどうなりますか?
    ボタンをクリックしてthisを表示し、次の結果を出力します.
    <button id='btn'>...</button>
    なぜなら、直接呼び出し方法whoAmIがbuttonであるからである.

    ほとんどの場合?


    MDNには「ほとんどの場合」という言い方が使われています.それは例外があるということです.
    ここでの例外は、bind、call、applyである.
    ここでは、bindを参照してください.thisが呼び出されても、thisがバインドされます.
    const someone = {
  name: 'chan',
  whoAmI: function() {
    console.log(this);
  }
};

const myWhoAmI = someone.whoAmI;
// 여기에서 myWhoAmI에서 this를 someone으로 바인딩 해보겠다.
const bindedWhoAmI = myWhoAmI.bind(someone);

const btn = document.getElementById('btn');
btn.addEventListenr('click', bindedWhoAmI);
    上のボタンをクリックすると、thisが以下のようになります.
    {name: 'chan', whoAmI: f}

    矢印関数でthis


    矢印関数では、thisがモジュールのようにバインドされます.
    関数を宣言すると、矢印関数はthisにバインドするオブジェクトを静的に決定します.動的に決定された一般的な関数とは異なり、矢印関数のthisは常に位相ミラーのthisを指す.これをlexicalthis**といいます.

    厳格モード(strict)


    厳格モードではthisの動作が異なる.
    厳格モードを使用しない場合、thisは無条件に値を返します.(プロトタイプスクリーニングのためだと思います.)
    ただし、厳密モードの関数では、windowでは、関数のthisオブジェクトを参照することはできません.

    参考資料


    0秒-JavaScript this
    コード種-this
    MDN - this
    PoiemaWeb-矢印関数
    ConcurrencyのBlockの定義とBlockのオブジェクト変数へのアクセス
    オペレーティングシステム実験は、上記の例のプログラムで同時プロセスを確立する方法を参照して、マルチプロセス同時実行プログラムを作成します.親プロセスは、まずlsコマンドを実行するサブプロセスを作成し、psコマンドを実行するサブプロセスを作成し、lsコマンドの前にpsコマンドが常に実行されるように制御します.