JS関数内で thisを使ういくつかのケース

this

thisは実行の対象。

関数が実行されたら、その前にドットがあるかどうかを確認します。ドットがあれば、その前にいる人は誰でもthisとなり、ドットがなければthisはwindowとなり、strictモードでは未定義となります。

function fn(){
 console.log(this);
}
fn();
//=> Window


"use strict"
function fn(){
 console.log(this);
}
fn();
//=> undefined

var name = "Lily";
function fn(){
 console.log(this.name);
}
var obj ={
 "name":"LiHua",
 fn:fn
}
obj.fn();
//=> "LiHua"
fn();
//=>"Lily"

回答： この場合、obj.fn()なので、fnが実行されると thisがobjになり、実行されないとfn()になり、出力はWindowオブジェクトのname属性になります。

自己実行関数の thisはWindowですが、これはストリクトモードでは未定義です。


(function(){
 console.log(this);
})()
//=> Window

イベントをページ上の要素にバインドし、イベントがトリガーされると、関数内の thisは現在バインドされている要素になります。


var box = document.getElementById("box");
box.onclick = function(){
console.log(this);
}
//=> ここでの thisは、バインドされたエレメント・オブジェクト・ボックスである。

コールバック関数の thisはWindowで、ストリクトモードでは未定義ですが、もちろん特殊なケースもあります。

コールバック関数：関数を別の関数に実引数として渡す

コンストラクタの thisは現在のインスタンスです。

アロー関数やブロックレベルのスコープは独自の thisを持たず、その中の thisはコンテキストの thisを使用します。

アロー関数の thisは、それが宣言されたスコープの thisをキャプチャします。

特記事項： thisは一度キャプチャされると、二度と変更されることはありません。call、apply、bindによって変更されることはありません。

call/apply/bindに基づいて、thisを強制的に変更することができます。


var name = "Lily";
function fn(){
 console.log(this.name);
}
var obj ={
 "name":"LiHua",
 fn:fn
}
fn.call(obj);
//=> "LiHua"

call(x,y)。

引数x：関数内で thisをxに変更し、即座に実行。

パラメータ y: 関数内で渡されるパラメータ