ECMAScript勉強会 に参加してきたのでその時のメモです。
久々に結構難しい内容が多かった気がする。

ECMAScript勉強会

ECMAScript概要 – rika_t

ECMAScript Study #1 Overview

途中参加

newがあるのはなぜ

プリミティブな型もメソッドやプロパティを持てるようにしたいため、ラッパーでラップしてた。

globalオブジェクト

globalオブジェクトは必ずしもwindowではない

オブジェクトとクラス

内部的には[[Class]]というクラスという文字列がでてきてた。

  • ES6から内部的にClassというものがなくなってきてる。
  • リテラル記法やコンストラクタを使って様々なオブジェクトを表現してる
  • NativeBrandという名前になってる

prototype

  • 仕様書にのってるprototypeの図はわかりにくい

変数宣言

  • “var”キーワードの後にIdentifierを与える
  • opt = option としてInitiliser = “str”みたいに初期化も同時にできる
  • IdentifierName
    • IdentifierStart (変数名の最初に文字列) か初めて
    • IdentifierName IdentifierPart
  • let から始まる内容はここで定義してる内容をかかれてる(他を見なくてもいい)

変数宣言の処理

  • return (normal,empty,empty) normalは正常終了

ES.next 追っかけ – teramako

ES.next 追っかけ – ECMAScript 勉強会

メーリングリストの購読

  • es-discussの購読
  • ES.nextに追うため見るメーリングリスト
  • 流量が多い

構文抽出

  • wiki.ecmascript.org に最新版のドラフトがアップロードされる
  • 更新内容は色分け表示されてる
  • ドラフト仕様から構文部分のみ抽出したものを作成

Mozillaの実装追いかけ

＊SpiderMonkeyのHarmony実装をトラッキングするメタバグがある

構文解析

JavaScriptがどうやって構文解析していくか

  • Reflect.parse()メソッド
  • 結果をオブジェクトのツリーで返してくれる
  • reflect.jsmを読み込んでReflect.parseが利用できる

iv/js

  • ES.nextの実装をパースできるツール
  • http://constellation.github.com/iv/js/es.next.html
  • esprimaを使ったものも最近でてきた
  • http://esprima.org/demo/parse.html

quasiリテラル

  • ヒアドキュメント的に使えそう

ES.next the corner case – Constellation

ES.next the corner cases

  • esprima
    • コミッターやってる

ConstDeclarationの話

  • initializer必須
  • Blockスコープ
  • BNFだけでは判断できないで、semaniticsも見ないと行けないようになった *

block scope

  • staticに解析可能
  • ブロックスコープになったことで、ランタイムでないと判定できなかったのが、静的に解析が可能

  • そのため速度がかなりよくなった

  • 再代入はsyntax errorにする

  • これもパース時に判断できるので、速度がよくなる 

    <p style="margin-top: 1em; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; line-height: 1.5em; padding: 0px;">
  const V = 20; V = 30;// syntax error
</p>

  • early errorに分類(run timeより前)

egal operator

  • is
  • isnt
  • より値の同一性に重きをおいたequal
  • is/isnt はContextual Keyword
  • Statementの先頭以外にくるキーワードはcontextual Keywordになる事が殆ど
    • ofとか
  • 文脈依存のキーワードのような扱い方をされるということ

<| operator トライアングル演算子

ES.next Library Extension

  • String/Number/Function などに機能を増やす
    • repeat
    • startsWith
    • などの便利な関数
  • GlobalなものをNumberにいける
    • isFinite
    • parseInt などをNumberにも追加する

duplicateな変数purge機構

  • 関数スコープのレキシカルスコープ内で変数宣言が被った時にsyntax errorになる

new Date(NaN)

  • ES.nextのnew Date(NaN).toString() Invalid Dateをかえすようになった

propertyの登場順

  • for-in , Object.keysなどの登場順が規定される

LHS

  • left hand side
  • 今まで()でくくって中が式なら何でも入ってた
  • それがleft hand side expressionという部類のみになった

(1,2,3) = 20;

というのがSyntaxErrorになる(ES5はReferrenceErrorなった) またパース時に判断できる

ES.nextのバグ

  • draftにはバグある

({responseText }) = res;

そもそもオブジェクトリテラルの解釈

名前

  • ES.next
    • バージョン番号がアレなので.nextという名前になってる
  • strawman(ストローマン)
    • とりあえずな感じのバージョン
  • Harmony
    • いずれかのバージョンにはいるかも的なもの

A brief history of ECMAScript versions (including Harmony and ES.next)

CoffeeScript

  • is/isnt みたいにセマンティックが同じなのに、挙動が違うことで論争が起きるのが怖い
  • => とかでも論争がおきてる

ECMAScript読書会

  • 6章からが本番
  • Annexに定義などが入ってる
  • Annex C はStrict mode
  • D, Eが変更点修正点

4.概要

  • この仕様では外部データの入力や計算結果の出力に関する規定はありません

  • 仕様外だが他にもオブジェクトがあるかもしれない事は考慮する(DOM)

4.2.2 Strict mode

  • “ECMAScriptは、言語において使えるいくつかの機能の使い方を制限したいと考えているユーザがいる可能性があることを認識しています。”
  • 標準のものに追加してエラー条件が定義される
  • 実装中の注意
    • パース時にでるエラーと実行時エラー
    • パース時に出すエラーはパース時にstrict modeかどうかをみないといけない
    • 関数の先頭にstringリテラルが連続してる　== ディレクティブ プロローグ という
      • この範囲にuse strictが入っていればstrict modeになる 
      •   <li style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding: 0px;">
    ディレクティブ プロローグの最後に&#8221;use strict&#8221;;を書かれた場合などは、最初のほうのパースにもstrictを適応してエラーにする
  </li>
  <li style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding: 0px;">
    関数の引数はどっち(中、外)のstrict modeなのか? <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 2em; padding: 0px;">
      <li style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding: 0px;">
        中のstrict modeが適応されるので、関数内がstrict modeなら、関数名にevalとかしてる時もエラーにするようにする(disccuss)
      </li>
      <li style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding: 0px;">
        body,param,functionName 全部strict modeに適応範囲とする
      </li>
    </ul>
  </li>
  
  <li style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding: 0px;">
    <a style="color: #4183c4; text-decoration: none; padding: 0px; margin: 0px;" title="Does 'use strict' in a FunctionBody apply strict mode FutureReservedWord restrictions to function name or arguments?" href="https://mail.mozilla.org/pipermail/es5-discuss/2011-January/003904.html">Does ‘use strict’ in a FunctionBody apply strict mode FutureReservedWord restrictions to function name or arguments?</a>
  </li>
</ul>

    メモ: Mou + github.css