JSで意識すること　メモ　ES6

JSで意識すること

自分用のJS扱うときに意識することメモ

  • 参照のコピーとthis
  • list2
  • list3

図

参照のコピーとthis

本文1

const person = {
    name: "Tom",
    hello: function() {
        console.log("Hello " + this.name)
    }
    
}

person.hello()

この場合、thisは呼び出しもとのpersonを指すことになる。 しかし、

const person = {
    name: "Tom",
    hello: function() {
        console.log("Hello " + this.name)
    }
    
}

const ref = person.hello
ref();

とするとthisはwindowオブジェクトを指すようになる。 なぜならpersonオブジェクトのhelloメソッドの参照がrefに代入されて実行されただけだから。 この呼び出し元はpersonオブジェクトではなくwindowオブジェクトになる。

見出し1-1

見出し1-2

本文1-2

図1-2

見出し1-3

本文1-3

図1-3

非同期Promiseチェーン

function sleep(val) {
    return new Promise(function(resolve){
        setTimeout(function() {
            console.log(val++);
            resolve(val);
        }, 1000)
    });
}

sleep(0).then(function(val) {
    return sleep(val)
    } 
).then(function(val) {
    return sleep(val)
    } 
).then(function(val) {
    sleep(val);
    return val
    } 
).then(function(val) {
    console.log("d")
    return sleep(val)
    }

上記のコードがどのような動きをするかというと一秒ごとにカウントが「1,2 3」 とコンソールに出力されるが3に時に33と3つ目のthenと4つ目のthenが同時に実行されてしまう。なぜなら3つ目のthenが即時にvalという値でresolveされたPromiseオブジェクトを返しているからである。1回目や2回目はpendingされた状態のPromiseオブジェクトが返され、そのオブジェクトは1秒後にresolveされfullfilledの状態となり後続のthenが実行される。thenの中ではreturn "AAA"と書いていても暗黙的にAAAでresolveされたfullfilledなPromiseオブジェクトに暗黙的に変換されていることが大切。thenが返すのは必ずPromiseオブジェクトになっている。

見出し2-1

本文2

図2-1

見出し3

本文3

図3

見出し3-1

本文3

図3-1