最終更新:2020-06-05 (金) 02:40:30 (34d)  

JavaScript/this
Top / JavaScript / this

コードのどこでも使える読み取り専用の変数

  • 呼び出し元によって参照先のオブジェクトが変化する

メモ

  • アロー関数以外の関数において、thisは定義した時ではなく実行した時に決定されます。
  • そのため、関数にthisを含んでいる場合、その関数は意図した呼ばれ方がされないと間違った結果が発生する
  • https://efcl.info/2018/01/04/what-is-this/

概要

関数外 (トップレベルコード)

関数内

解説

コンストラクタ

  • this:生成されるオブジェクト

関数とメソッド

JavaScript/アロー関数

  • thisを変えずにコールバック関数を定義する方法
  • 呼び出し時に暗黙的なthisの値を受け取らない
    • アロー関数で定義された関数やメソッドにおけるthisがどの値を参照するかは関数の定義時(静的)に決まる
    • アロー関数ではない関数においては、thisは呼び出し元に依存するため関数の実行時(動的)に決まる。
  • Arrow Function内にはthisが定義されていません。このときのthisは外側のスコープ(関数)のthisを参照します。

thisの差し替え

  • 呼び出し元の関数のthisと引数を置き換えて呼び出すことができる
    Function.prototype.call()第1引数をthisの値としたいオブジェクト,それ以降は引数
    Function.prototype.apply()第2引数以降を配列として受け取る
    Function.prototype.bind()呼び出されたときに新しい関数を作成して、値を操作
  • jQuery.proxy
  • これを使えば、関数がどこから呼び出されるかによって this の値が変わってしまうというややこしい問題を簡単に回避できます

アロー関数

  • アロー関数 では、thisはレキシカルに設定されます。すなわち、 それを囲む実行コンテキストの this の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます

JavaScript/コールバック関数

メモ

  • 関数のthisキーワード は、JavaScriptではほかの言語と少々異なる動作をします。また、Strictモード非Strictモード?でも違いがあります。

jQuery

  • $(this).html("aa")
  • 選択されているカレントノード

参考