JavaScript の this を理解する多分一番分かりやすい説明を読んで手を動かしてみた。
サンプルコード
function test() {
console.log(this)
}
var obj = {}
obj.test = test
console.log(test) //1
console.log(obj) //2
test() //3
obj.test() //4
1
関数そのものを出力。
ƒ test() {
console.log(this)
}
2
関数そのものが入っているオブジェクトを出力。
{test: ƒ}
3
thisはグローバルオブジェクト、ブラウザではWindowオブジェクトをさす。
Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
4
thisはobj(関数そのものが入っているオブジェクト)をさす。
{test: ƒ}
メソッドチェーン
var obj = {
test: function() { return this },
alert: function(msg) { console.log(msg) }
}
var test = obj.test
console.log(test) // 1
console.log(obj.test()) // 2
console.log(test()) // 3
test() // 4
obj.test().alert("hello") // 5
test().alert("hello") // 6
1
オブジェクトの中身のtestそのものを出力。
ƒ () { return this }
2
thisはobjをさすことを出力。
{test: ƒ, alert: ƒ}
3
thisはグローバルオブジェクト、ブラウザではWindowオブジェクトをさすことを出力。
Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
4
関数名ではないため呼び出せない。
5
オブジェクトの中身のalertを発動
hello
6
Windowオブジェクトに対してalertを発動
helloというアラートを表示
理解が深まる記事