JavaScriptのletとthis

    let price = 100;
    console.log(this.price)

    const func = function(){
        console.log(this.price)
    }

    func();
undefined
undefined

letで宣言した場合、windowに紐づかないそうです。constも同じ。

    
    var price = 100;
    console.log(this.price)

    const func = function(){
        console.log(this.price)
    }

    func();
100
100

letをvarにするとアクセスできるようになります。

    var price = 100;

    const func = function(){
        console.log(this.price)
    }

<button onclick="console.log(this);">show this</button>
<button onclick="console.log(this.price);">show price</button>

次はボタンを設置しました。
このボタンを押下していきます

<button onclick=​"console.log(this)​;​">​show this​</button>​
undefined

thisはグローバルオブジェクトではないですね。this.はbutton本体になっています。そのためpriceというプロパティがないのでundefinedが表示されています。

ラムダ式とthis

    const human  = {
        age:22,
        name:"けんし",
        say(){
            console.log(this)
            console.log(this.age + this.name);
        },
        tien(){
            setTimeout(function(){
                console.log(this.name)
            },1000)
        },
        tien2(){
            setTimeout(()=>{
                console.log(this.name)
            },2000)
        }
    }

    human.say();
    human.tien();
    human.tien2();
{age: 22, name: "けんし", say: ƒ, tien: ƒ, tien2: ƒ}
index.html:11 22けんし
index.html:17 
index.html:22 けんし

setTimeoutのコールバック関数をラムダ式で定義すると、オブジェクトのthisにアクセスできることがわかります。

    const human  = {
        age:22,
        name:"けんし",
        say(){
            console.log(this)
            console.log(this.age + this.name);
        },
        tien(){
            setTimeout(function(){
                console.log(this)
                console.log(this.name)
            },1000)
        },
        tien2(){
            setTimeout(()=>{
                console.log(this)
                console.log(this.name)
            },2000)
        }
    }

    human.say();
    human.tien();
    human.tien2();
{age: 22, name: "けんし", say: ƒ, tien: ƒ, tien2: ƒ}
index.html:11 22けんし
index.html:15 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
index.html:16 
index.html:21 {age: 22, name: "けんし", say: ƒ, tien: ƒ, tien2: ƒ}
index.html:22 けんし

ラムダ式の中のthisと普通に定義した無名関数では、なんとthisのコンテキストが違うのです

次には以上を踏まえて少しハマった箇所をメモっていきます!

コメント

タイトルとURLをコピーしました