第2回 ECMAScript勉強会に参加してきたのでその時のメモ。

(あまり正確には取れてないので、各スライドを参照して下さい。)

第2回 ECMAScript勉強会

  • 主催 : rika-t

自己紹介

Specs Updates – rika-t

スライド : ECMAScript study #2 ES.next Updates

前回からの差分

  • Rev7
    • Arrow function追加
    • ES.next Library Extension関係
    • Numberなどは結構無駄にはいってる
      • 機械語命令などにもあったりするので、ネイティブで実装した方がいい関数もあるという要望等
      • Audio関係に使う関数等
  • Rev8
  • Rev9

Arrow function

  • 無名関数の代替

(x) => x * x

  • var that = thisの不要化

list.forEach((item) => this.hoge(item));

  • thisが固定化&newができないようになる(引数にthisを渡す必要がある)

例: 

var that = this;
(that, x) => { that.x = x };// thisを渡す

(this, x) => { this.x = x } // これだとエラー

thisはContextual Keywordではなく、Keywordなので、エラーになる。

Rev7 で概念を新規追加

Envirinment Record

プログラムのコンテキストを覚えていく概念。 言語を実装するのに必要な感じの内容

  • Envirinment Recordとは
  • Global Env Record
    • これもブロックスコープがあるため概念を追加された
    • ブロックスコープができたのでグローバルを持つものが必要に
  • Declarative Env Record
    • 各スコープとオブジェクトの状態を保持する内部的な領域
    • スコープと紐付く記憶領域
  • Object Environment Record
    • binding
  • Method Env Record
    • super を使えるようにするために追加された。
    • そのスコープの中でつかわれるthisの値が格納されている
    • 今までの関数のスコープがMethod Env Recordにあたる
    • ES6ではletなどでブロックスコープが入ったため、関数スコープ内に複数のスコープがあるので定義される

Code Realm

評価される前にRealmに関連付けられる。

Realmが保持する内容

  • [[this]]
  • [[Global Env]]
  • 等

関数の [[Call]] では、関数実行のコンテキストを呼び出すときにすりかえためにつかわれる。 realmの中を変える事でthisのコンテキストがかわってるのを説明できる概念。

Realmは、その関数がどのコンテキストで実行されてるのかを表現するために使われたりする感じ

TC-39

  • ECMAのTechnical Review
  • class
  • “module”が予約語に無いのはbreak the webにならないように慎重に設計されてるため

Rev8

Non-ECMAScript Functions

  • ES以外の言語を絡めた処理
  • may…なので今後存在するのか疑問

Realmの名前

  • Realmの名前は将来的に変更されるかも

Rev9

  • ユニコードサポート
  • サロゲートペアも必須
  • Regular Expression Literalsの項目ついか
  • Quasi Literals
  • 名前変更
    • native object -> ordinary object
    • host object -> exotic object

ES.next – class, arrow, quasi etc. – Constellation

スライド ES.next – class, arrow, quasi etc.

classの仕様について理解する(Rev9に基づく)

Class

  • 今までのWebを破壊する訳ではなく、
  • シンタックスシュガー的な物を追加

super 

class Derived extends Base {
    constructor(){ }
    sayHello(){
        super();
    }
}
  • Derived
    • ただの関数

今までと異なる所

  • Method(sayHello)に情報が追加される
    • [[Home]]
    • [[MedhodName]]
    • これを元にsuperとかを解決する

Method Enviroment

メソッドとスコープとかを管理する記憶領域

呼び出し側が[[Home]]と[[MethodName]]を検知して、この２つをもってる場合、環境自体が呼び出してる情報と何を呼び出してるのか(sayHelloとか)を持つようになる。

Reference – internal type

object.property()

この時のbase,nameはそれぞれ

  • base == object
  • name == property

propertyを呼び出すときに、base(objectがはいってる)をthisに設定してthisを解決するようになる。

superの解決

baseとnameを環境から持ってくる。 thisValueがその時のthisで、別に保持しておく。(original this)

superを呼ぶときは、baseにsuperのenvを設定して、nameのメソッドをよぶ。(thisValueはちゃんとその時のthisを別に持ってる)

ES5ではsuperは自分で定義する必要があったけど、ES6では実行環境側がsuperを持ってくれてる。

要はClass継承の仕組みがES6では入ってる。

Arrow Function 

class Dog {
  bow(n) {
    console.log(n + ' bow!');
  }

  say() {
    // `this` is Dog instance
    // arrow can take expression as body
    [1, 2, 3, 4].forEach(e => this.bow(e));

    // this also works fine
    () => {
      this.bow(100);
    };
  }
}
  • var that = this;等を書かなくてもthisが固定できる
  • 即時実行でthisが変わらないようにつくられてる

Declarative & Method Environment

  • thisが変わらない仕組み
  • 仕様の説明

Declarative Environment

  • thisの値の紐付けがないEnv

Method Environment

  • 通常の関数の呼び出しに使われる環境
  • thisValueをもってる

thisの解決 

function outer(){// #1 Method Environment
    {// #2 Declarative Environment
        this;//thisの値を#2 -> #1 の順番にききに行く
    }
    () =>{// #3 Declarative Environment
        this;// #3 -> #1
    }
    function inner(){// #4
        this;// -> #4
    }
}

今まではthisが直接決まっていたけど、thisもプロトタイプチェーンみたいに辿っていく仕組みができた

template strings

  • ${}でexpression
  • String.raw部分のメソッドは自分で定義できる

raw & cooked

  • cooked
    • uみたいなエスケープシーケンスも解釈する
    • nなども改行として解釈する
  • raw
    • nもそのままの表記で渡ってくる
  • QuasiLiteralのメソッドは両方共受け取れる

QuasiLiteral CallSite

  • expression* で結果が分割されてる

template strings

  • 変数とかexpressionとかをわたせる
  • rawとcookedなモードがある
  • String.raw という便利なメソッド

ES.next engine

  • ES.nextの実行エンジン
  • 静的、動的な部分 を調査しながら実装中
  • C++

質問

QuasiLiteral

  • 外部からQuasiLiteral部分を受け取って評価するようなもの作れるの?
  • evalとか必要なのでそういうのは向いてないのかも
  • Hoganとかテンプレートを関数に直すような仕組みを作るといいのかも

Class

  • staticなclass変数は作れない
  • Function Declarationは他に副作用を与えない
  • constructorは今までとは書き方が違うので静的に解析できる
  • [[MethodName]]を参照できるようになると、今までの名前付き関数式で関数を作ってた時のような デバッガーに優しいものが楽にできるようになる。

名前付き関数式との対比(クラス内に書くので下は少し違うけど) 

var fn = function fn(){
}
// これから下みたいな事もかける
({
    fn(){
    }
});

第39技術委員会の真実とは！？　LabelledStatementの謎を追え！ – kyo_ago

スライド : 第39技術委員会の真実とは！？　LabelledStatementの謎を追え！

  • label

直接scriptにいかのようなコードがうめこまれてる 

javasript://
http://

エラーなく処理できる…

Struct.js – hagino3000

  • 型チェックを行うライトなもの
  • proxyを使ってチェック処理を挟む

delete対象のtypoなど、動かしてもエラーがでなくてわからない場合がある。

  • 構造体的に型情報を定義する
  • Proxyを挟んでチェックする
  • mobile safariで動かなかった…

iv /lv5 – Constellation

スライド : lv5.current (ちらっと)

  • 仕様のテストが全てPass
  • より高速化を

breaker

  • JIT Compiler
  • Type Analysis
  • インラインキャッシュ
  • MonoIC for Global Variable
    • property tableの実装だったもの
    • 名前に対してproperty Descriptorが紐付いてる
    • 大抵がdata propertyが同じなのに、毎回property descriptorの分だけ領域を取るのがもったいない
    • attribution情報をmapで管理

おわり

メモ : Mou