ECMAScript OverviewRika Takahashi / @rika-tagigigigi@gmail.com
この文書について• ECMA-262 5.1 Editionでの記載になるべく沿う形で、  ECMAScriptを説明します。• 表記について ▫ 文中のページ数、章番号は、ECMA-262 5.1 Editionの対応   する箇所です。  ...
概要• ECMAScriptはオブジェクトベースのプログラミング言語• オブジェクト ▫ 0以上の属性を持つ、プロパティの集合• 属性 ▫ 書き込み可能、列挙可能などのプロパティの振る舞いを規定するもの• プロパティ ▫ 他のオブジェクト, プ...
組み込みオブジェクト▫   global     ▫   RegExp▫   Object     ▫   JSON▫   Function   ▫   Error▫   Array      ▫   EvalError▫   String  ...
: 組み込み型                                    : 組み込みオブジェクトここまでのまとめ                           ObjectUndefined             Obje...
: 組み込み型                                                : 組み込みオブジェクトここまでのまとめ                           ?                   ...
補足• 組み込み型とオブジェクト名の違い ▫ 生成   "hoge"; //組み込み型 String   new String("hoge"); //Stringオブジェクト ▫ typeof演算子の結果   typeof "hoge";...
Why typeof null is object?• Ecmascript.org ▫ いろいろ再定義の話をしていた時にBrendanさん   がでてきて、色々説明していた ▫ 単純にnullのポインタを見てobjectを返してし   まって...
補足の余談• 以下のオブジェクトをnewキーワードで生成することは稀 ▫   new String      代替の方法: hoge, "hoge" ▫   new Number      代替の方法: 0, 100 ▫   new Boo...
ラッパーオブジェクトのnew?• Premitiveに対してメソッド呼び出しをするのは本  来おかしい ▫ が、やりたいので、やった時にラッパーオブジェクト   に一瞬切り替わって実行される   内部のエンジン的には切り替わっていない ▫ P...
補足• globalオブジェクト? ▫ スクリプトが実行される前に生成されるオブジェクトで、   唯一のもの    Webブラウザーでは、globalオブジェクトのwindowプロパ     ティが、globalオブジェクトそのものとなる ▫...
演算子•   単項演算子: delete, void, typeof, ++, --, +, -, ~, !•   乗算演算子: *, /, %•   加算演算子: +, -•   ビットシフト演算子: <<, >>, >>>•   関係演算子...
オブジェクト• ECMAScriptでは"クラス"を使用しない  ▫ その代わりに、リテラル記法やコンストラクタを使っ   た様々なオブジェクト生成の方法が提供されている ▫ e.g.    [] // Array    {} // Obj...
prototype         CFコンストラクタ                             CFコンストラクタのプロトタイプprototypeとP1, P2というプロパティを                         ...
prototype• この図をコードで書くと以下のとおり ▫   var CF = function(){}; ▫   CF.P1 = 1; ▫   CF.P2 = "hoge"; ▫   CF.prototype = function(){}...
prototype• cf1-5からP1, P2にアクセスすることはできない ▫ cf1.P1; // undefined• cf1-5からCFP1にアクセスすることはできる  ▫ cf1.CFP1; // "foo"  ▫ cf2.CFP1;...
ECMA-262 5.1 Edition P.7
変数宣言• "var"キーワードの後にIdentifierを与える ▫ VariableStatement :   var VariableDeclarationList ; ▫ VariableDeclarationList :   Va...
Identifier• Identifier ::   ▫ IdentifierName but not ReservedWord• IdentifierName ::   ▫ IdentifierStart   ▫ IdentifierNam...
予約語• キーワード、将来の予約語、null、true、falseの  集合• ReservedWord :: ▫   Keyword ▫   FutureReservedWord ▫   NullLiteral ▫   BooleanLite...
キーワード• "7.6.1.1 Keywords" (P.18)を参照• Keyword :: one of  ▫   break      do          instanceof   typeof  ▫   case       els...
将来の予約語• 非strict modeの場合、  ▫ FutureReservedWord :: one of     class             enum     extends super     const         ...
変数宣言の処理• VariableStatement : var VariableDeclarationList;の処理   1.    VariableDeclarationListを評価します。   2.    (normal, empty...
変数宣言の処理 - 詳細• (normal, empty, empty)  ▫ "8.9 The Completion Specification Type" (P.36)を参照• Identifier  ▫ "7.6 Identifier N...
まとめ• ECMAScriptはオブジェクトベースのプログラミング言語• 組み込み型は6種類• 組み込みオブジェクトは18種類 ▫ うち、7つはエラー関連• クラスというものはない ▫ リテラル記法やコンストラクタでの様々な生成方法 ▫ pro...
• fff系の文字系をUpperCaseするとFFFになり文字数  が3倍になる• Parse errorのoctal value, 0• “use strict”; の書かれた部分による処理 ▫ Directive Prologueの範囲。 ...
ECMAScript Study #1 Overview
ECMAScript Study #1 Overview
Upcoming SlideShare
Loading in …5
×

ECMAScript Study #1 Overview

3,654 views

Published on

ECMAScript Study #1. ECMA-262 5.1 specification's overview.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,654
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

ECMAScript Study #1 Overview

  1. 1. ECMAScript OverviewRika Takahashi / @rika-tagigigigi@gmail.com
  2. 2. この文書について• ECMA-262 5.1 Editionでの記載になるべく沿う形で、 ECMAScriptを説明します。• 表記について ▫ 文中のページ数、章番号は、ECMA-262 5.1 Editionの対応 する箇所です。  例. "1. Scope" (P.1) ▫ 太字+斜体の語は、仕様上の何らかの特殊な意味を持った 単語です。  初回のみ、太字+斜体の表記とします。 ▫ 太字の語は、型名やオブジェクト名、予約語を指します。 ▫ 斜体の語は、 ECMA-262 5.1 Editionで定義される語です。  汎用的な定義のほとんどは7章で行われています。  Annex A (P.211)にまとめられています。
  3. 3. 概要• ECMAScriptはオブジェクトベースのプログラミング言語• オブジェクト ▫ 0以上の属性を持つ、プロパティの集合• 属性 ▫ 書き込み可能、列挙可能などのプロパティの振る舞いを規定するもの• プロパティ ▫ 他のオブジェクト, プリミティブ値, 関数の入れ物• プリミティブ値 ▫ 以下の組み込み型のいずれかに属するもの。  Undefined, Null, Boolean, Number, String ▫ 補記  オブジェクトは、Object型に属します。• 関数 ▫ 呼び出し可能なオブジェクトの一種(Object型) ▫ オブジェクトのプロパティとして関連付けられている関数をメソッドと呼ぶ 4.2 Language Overview
  4. 4. 組み込みオブジェクト▫ global ▫ RegExp▫ Object ▫ JSON▫ Function ▫ Error▫ Array ▫ EvalError▫ String ▫ RangeError▫ Boolean ▫ ReferenceError▫ Number ▫ SyntaxError▫ Math ▫ TypeError▫ Date ▫ URIError 4.2 Language Overview
  5. 5. : 組み込み型 : 組み込みオブジェクトここまでのまとめ ObjectUndefined Object global Error Null EvalError Array Boolean RangeError Boolean Math Number ReferenceError Date SyntaxErrorNumber String JSON TypeError String Function URIError RegExp
  6. 6. : 組み込み型 : 組み込みオブジェクトここまでのまとめ ? Object ?Undefined Object global Error Null EvalError ? Array Boolean RangeError Boolean Math Number ReferenceError Date SyntaxErrorNumber String JSON TypeError String Function URIError RegExp
  7. 7. 補足• 組み込み型とオブジェクト名の違い ▫ 生成  "hoge"; //組み込み型 String  new String("hoge"); //Stringオブジェクト ▫ typeof演算子の結果  typeof "hoge"; // "string"  typeof new String("hoge"); // "object"  "11.4.3 The typeof Operator" (P.71)を参照  "Type(x)"関数については、"8. Type" (P.28)を参照 ▫ 厳密な比較演算子の結果  "hoge" === "hoge"; // true  new String("hoge") === new String("hoge"); // false  型や値ではなく、インスタンスの同一性を調べるため  "11.9.4 The Strict Equals Operator" (P.81)を参照
  8. 8. Why typeof null is object?• Ecmascript.org ▫ いろいろ再定義の話をしていた時にBrendanさん がでてきて、色々説明していた ▫ 単純にnullのポインタを見てobjectを返してし まっていたバグ(?)が仕様に。 ▫ Nodeではtypeof nullでnullを返すオプションがで きた
  9. 9. 補足の余談• 以下のオブジェクトをnewキーワードで生成することは稀 ▫ new String  代替の方法: hoge, "hoge" ▫ new Number  代替の方法: 0, 100 ▫ new Boolean  代替の方法: true, false ▫ new Array  代替の方法: [] ▫ new Object  代替の方法: {} ▫ new Function  代替の方法: functionキーワード• 前ページの通り、比較などを行う場合に面倒/ややこしい問題が発生するので、使うなら どちらかに統一するべき ▫ どちらか片方が良いということはないが、現状、世の中のライブラリはリテラル表記を使っ ているものがほぼ全てなので、リテラル表記に統一する方が良い ▫ Google JavaScript Style Guideでは、これらのオブジェクトのnewは基本的に禁止されている  http://google- styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Wrapper_objects_for_pri mitive_types#Wrapper_objects_for_primitive_types
  10. 10. ラッパーオブジェクトのnew?• Premitiveに対してメソッド呼び出しをするのは本 来おかしい ▫ が、やりたいので、やった時にラッパーオブジェクト に一瞬切り替わって実行される  内部のエンジン的には切り替わっていない ▫ Primitive string -> prototype -> Wrapperのメソッド  これを使うが、これを入れて置ける場所が無い (primitiveなので)ので、消えてしまう。• プロパティを持てるのはオブジェクトだ、という縛 りを何とか抜け出したかった?• 言語仕様上の一貫性
  11. 11. 補足• globalオブジェクト? ▫ スクリプトが実行される前に生成されるオブジェクトで、 唯一のもの  Webブラウザーでは、globalオブジェクトのwindowプロパ ティが、globalオブジェクトそのものとなる ▫ その他のオブジェクトを提供するもの ▫ 例  window.Object === Object; // true  delete Object;  window.Object === Object; // ReferenceError: Object is not defined  new Object(); // ReferenceError: Object is not defined  new window.Object(); // ReferenceError: Object is not defined ▫ "15.1 The Global Object" (P.103)を参照
  12. 12. 演算子• 単項演算子: delete, void, typeof, ++, --, +, -, ~, !• 乗算演算子: *, /, %• 加算演算子: +, -• ビットシフト演算子: <<, >>, >>>• 関係演算子: <, >, <=, >=, instanceof, in• 等価演算子: ==, !=, ===, !==• バイナリビット演算子: &, ^, |• バイナリ論理演算子: &&, ||• 条件演算子: ? :• 代入演算子: =, op=• カンマ演算子: , 4.2 Language Overview
  13. 13. オブジェクト• ECMAScriptでは"クラス"を使用しない ▫ その代わりに、リテラル記法やコンストラクタを使っ た様々なオブジェクト生成の方法が提供されている ▫ e.g.  [] // Array  {} // Object• コンストラクタ ▫ "prototype"プロパティを持つ関数 ▫ "prototype"プロパティは、プロトタイプベースの継承 と共有プロパティを実装するためのもの• オブジェクトはnewキーワードによって生成 ▫ e.g.  new Date(2009, 11); 4.2.1 Objects
  14. 14. prototype CFコンストラクタ CFコンストラクタのプロトタイプprototypeとP1, P2というプロパティを CFP1というプロパティを持っている 持っている CFコンストラクタから生成 されたオブジェクト達 q1, q2というプロパティを 持っている
  15. 15. prototype• この図をコードで書くと以下のとおり ▫ var CF = function(){}; ▫ CF.P1 = 1; ▫ CF.P2 = "hoge"; ▫ CF.prototype = function(){}; ▫ CF.prototype.CFP1 = "foo"; ▫ var cf1 = new CF(); ▫ cf1.q1 = "cf1.q1"; ▫ cf1.q2 = "cf1.q2"; ▫ var cf2 = new CF(); ▫ cf2.q1 = "cf2.q1"; ▫ cf2.q2 = "cf2.q2";
  16. 16. prototype• cf1-5からP1, P2にアクセスすることはできない ▫ cf1.P1; // undefined• cf1-5からCFP1にアクセスすることはできる ▫ cf1.CFP1; // "foo" ▫ cf2.CFP1; // "foo"• CFpのCFP1を書き換えると、cf1-5からアクセスすると、全ての値が変 わったように見える ▫ CF.prototype.CFP1 = "bar"; ▫ cf1.CFP1; // "bar" ▫ cf2.CFP1; // "bar"• cf1にCFP1というプロパティを作ると、その値は共有されない ▫ cf1.CFP1 = "test"; ▫ cf1.CFP1; // "test" ▫ cf2.CFP1; // "bar" ▫ プロトタイプ・チェーンと呼ばれる  プロトタイプを順に遡っていき、見つかったらそれを使う
  17. 17. ECMA-262 5.1 Edition P.7
  18. 18. 変数宣言• "var"キーワードの後にIdentifierを与える ▫ VariableStatement :  var VariableDeclarationList ; ▫ VariableDeclarationList :  VariableDeclaration  VariableDeclarationList , VariableDeclaration ▫ VariableDeclaration :  Identifier Initialiseropt  Optはoptionalで、あってもなくても良い ▫ "5.1.6 Grammer Notation" P.9参照 12.2 Variable Statement
  19. 19. Identifier• Identifier :: ▫ IdentifierName but not ReservedWord• IdentifierName :: ▫ IdentifierStart ▫ IdentifierName IdentifierPart• IdentifierStart :: ▫ UnicodeLetter ▫ $ ▫ _ ▫ UnicodeEscapeSequence• IdentifierPart :: ▫ IdentifierStart ▫ UnicodeCombiningMark ▫ UnicodeDigit ▫ UnicodeConnectorPunctuation ▫ <ZWNJ> ▫ <ZWJ> 12.2 Variable Statement
  20. 20. 予約語• キーワード、将来の予約語、null、true、falseの 集合• ReservedWord :: ▫ Keyword ▫ FutureReservedWord ▫ NullLiteral ▫ BooleanLiteral
  21. 21. キーワード• "7.6.1.1 Keywords" (P.18)を参照• Keyword :: one of ▫ break do instanceof typeof ▫ case else new var ▫ catch finally return void ▫ continue for switch while ▫ debugger function this with ▫ default if throw ▫ delete in try
  22. 22. 将来の予約語• 非strict modeの場合、 ▫ FutureReservedWord :: one of  class enum extends super  const export import• strict modeの場合、 ▫ FutureReservedWord :: one of  class enum extends super  const export import  implements let private public yield  interface package protected static
  23. 23. 変数宣言の処理• VariableStatement : var VariableDeclarationList;の処理 1. VariableDeclarationListを評価します。 2. (normal, empty, empty)を返します。• VariableDeclarationList :VariableDeclarationの処理 1. VariableDeclarationを評価します。• VariableDeclarationList :VariableDeclarationList , VariableDeclarationの処理 1. VariableDeclarationListを評価します。 2. VariableDeclarationを評価します。• VariableDeclaration : Identifierの処理 1. Identifierと同じ文字シーケンスを含む文字列の値を返します。• VariableDeclaration : Identifier Initialiserの処理 1. Identifierで評価した結果(11.1.2に記述)をlhsとします。 2. Initialiserで評価した結果をrhsとします。 3. GetValue(rhs)した結果をvalueとします。 4. PutValue(lhs, value)を呼び出します。 5. Identifierと同じ文字シーケンスを含む文字列の値を返します。• Initialiser : = AssignmentExpression の処理 1. AssignmentExpressionを評価した結果を返します。
  24. 24. 変数宣言の処理 - 詳細• (normal, empty, empty) ▫ "8.9 The Completion Specification Type" (P.36)を参照• Identifier ▫ "7.6 Identifier Names and Identifiers" (P.17)を参照• Identifier Initialiser ▫ "12.2 Variable Statement" (P.87)を参照  余談: Initializer ではなく Initialiser らしい…イギリス英語?  フランス語ではInitialiserになるらしい ▫ http://mymemory.translated.net/s.php?q=initialiser&sl=Autodetect &tl=en-GB&sj=all• GetValue ▫ "8.7.1 GetValue(V)" (P.35)を参照• PutValue ▫ "8.7.2 PutValue(V, W)" (P.36)を参照
  25. 25. まとめ• ECMAScriptはオブジェクトベースのプログラミング言語• 組み込み型は6種類• 組み込みオブジェクトは18種類 ▫ うち、7つはエラー関連• クラスというものはない ▫ リテラル記法やコンストラクタでの様々な生成方法 ▫ prototypeを使った継承、プロパティの共有を行う• 変数宣言はvar ▫ Identifierで定義されている文字列等が使える• 予約語はIdentifierには使えない ▫ 予約語は、キーワード、将来の予約語、null、true、false• キーワードは26個• 将来の予約語は7個、もしくは16個
  26. 26. • fff系の文字系をUpperCaseするとFFFになり文字数 が3倍になる• Parse errorのoctal value, 0• “use strict”; の書かれた部分による処理 ▫ Directive Prologueの範囲。 ▫ “use strict”;を、最後に書いたら、振り返って「お前ダ メだったわ」的エラーを出す・・・これは難しい。• Strict codeの範囲が明記されていない ▫ 関数が書かれているときに、引数はstrictなのか? 関数名は? ▫ 定義関数の方のモードを利用する  あとから怒る

×