インフラエンジニアが教えるJSの型

#kosen12s の資料

Transcript

1. ΠϯϑϥΤϯδχΞ͕
   ڭ͑ΔJSͷܕ
   ͨʹ͠@tanishi345
   

   View Slide

2. ॳΊ·ͯ͠
   • ͨʹ͠(@tanishi345)
   • (ʹΘ͔)ΠϯϑϥΤϯδχΞ
   

   View Slide

3. ͳΜͰΠϯϑϥ΍ͬͯΔͷʁ
   

   View Slide

4. ࠓ೔͸JSͷ࿩Λ͠·͢
   

   View Slide

5. ͔Θ͍͍Ͱ͢ΑͶ
   

   View Slide

6. View Slide

7. Ͱ͸ͳͯ͘
   

   View Slide

8. View Slide

9. ͜ͷ୹ظؒͰ
   ͜͜·ͰϑϨʔϜϫʔΫ͕
   ཚཱ͢Δݴޠ
   ·ͬͨ͘খֶੜ(JS)͸
   ࠷ߴͩͥ
   

   View Slide

10. ͱ͍͏Θ͚Ͱ
    

    View Slide

11. JSͷܕͷ࿩Λ͠·͢
    

    View Slide

12. ໰୊Ͱ͢
    

    View Slide

13. console.log(‘1’ + 0)
    

    View Slide

14. ࣮ࡍʹ΍ͬͯΈͨ
    

    View Slide

15. View Slide

16. ਺ࣈͱจࣈྻΛ଍͢ͱ
    จࣈྻʹͳΔʁ
    

    View Slide

17. Reference number
    ECMA-123:2009
    © Ecma International 2009
    ECMA-262
    8th Edition / June 2017
    ECMAScript® 2017
    Language Specification
    IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTTUBOEBSET&DNBIUN
    

    View Slide

18. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation
    

    View Slide

19. ͳΜ͔೉ͦ͠͏…
    

    View Slide

20. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation
    

    View Slide

21. ग़ͯ͘Δؔ਺͸5ͭ
    • GetValue
    • ToPrimitive
    • Type
    • ToString
    • ToNumber
    

    View Slide

22. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation
    

    View Slide

23. false.
    The following abstract operations are used in this speci ication to operate on references:
    1. ReturnIfAbrupt(V).
    2. If Type(V) is not Reference, return V.
    3. Let base be GetBase(V).
    4. If IsUnresolvableReference(V) is true, throw a ReferenceError exception.
    5. If IsPropertyReference(V) is true, then
    a. If HasPrimitiveBase(V) is true, then
    i. Assert: In this case, base will never be unde ined or null.
    ii. Set base to ! ToObject(base).
    b. Return ? base.[[Get]](GetReferencedName(V), GetThisValue(V)).
    6. Else base must be an Environment Record,
    a. Return ? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V)) (see 8.1.1).
    NOTE The object that may be created in step 5.a.ii is not accessible outside of the above abstract
    operation and the ordinary object [[Get]] internal method. An implementation might
    6.2.4.1 GetValue ( V )
    

    View Slide

24. ઌʹType͕ग़͖ͯ·ͨ͠
    

    View Slide

25. ECMAScriptͷܕ
    • The Undeined Type
    • The Null Type
    • The Boolean Type
    • The String Type
    • The Symbol Type
    • The Number Type
    • The Object Type
    

    View Slide

26. false.
    The following abstract operations are used in this speci ication to operate on references:
    1. ReturnIfAbrupt(V).
    2. If Type(V) is not Reference, return V.
    3. Let base be GetBase(V).
    4. If IsUnresolvableReference(V) is true, throw a ReferenceError exception.
    5. If IsPropertyReference(V) is true, then
    a. If HasPrimitiveBase(V) is true, then
    i. Assert: In this case, base will never be unde ined or null.
    ii. Set base to ! ToObject(base).
    b. Return ? base.[[Get]](GetReferencedName(V), GetThisValue(V)).
    6. Else base must be an Environment Record,
    a. Return ? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V)) (see 8.1.1).
    NOTE The object that may be created in step 5.a.ii is not accessible outside of the above abstract
    operation and the ordinary object [[Get]] internal method. An implementation might
    6.2.4.1 GetValue ( V )
    

    View Slide

27. ཁ͸஋Λฦؔ͢਺Ͱ͢
    

    View Slide

28. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation
    

    View Slide

29. other speci ication types are used with these operations.
    The abstract operation ToPrimitive takes an input argument and an optional argument PreferredType. The
    abstract operation ToPrimitive converts its input argument to a non-Object type. If an object is capable of
    converting to more than one primitive type, it may use the optional hint PreferredType to favour that type.
    Conversion occurs according to the following algorithm:
    1. Assert: input is an ECMAScript language value.
    2. If Type(input) is Object, then
    a. If PreferredType was not passed, let hint be "default".
    b. Else if PreferredType is hint String, let hint be "string".
    c. Else PreferredType is hint Number, let hint be "number".
    7.1.1 ToPrimitive ( input [ , PreferredType ] )
    d. Let exoticToPrim be ? GetMethod(input, @@toPrimitive).
    e. If exoticToPrim is not unde ined, then
    i. Let result be ? Call(exoticToPrim, input, « hint »).
    ii. If Type(result) is not Object, return result.
    iii. Throw a TypeError exception.
    f. If hint is "default", set hint to "number".
    g. Return ? OrdinaryToPrimitive(input, hint).
    3. Return input.
    NOTE When ToPrimitive is called with no hint, then it generally behaves as if the hint were
    

    View Slide

30. Object͡Όͳ͍ͷͰ
    

    View Slide

31. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation
    

    View Slide

32. ͲͪΒ͔͕StringܕͳΒ
    

    View Slide

33. console.log(‘1’ + 0)
    

    View Slide

34. console.log(‘1’ + 0)
    

    View Slide

35. ToString
    

    View Slide

36. ͭ·Γ
    console.log(‘1’ + 0)
    =>
    console.log(‘1’ + ‘0’)
    =>
    ’10’
    

    View Slide

37. console.log(+‘1’)
    

    View Slide

38. ࣮ࡍʹ΍ͬͯΈͨ
    

    View Slide

39. NOTE The unary + operator converts its operand to Number type.
    UnaryExpression : + UnaryExpression
    1. Let expr be the result of evaluating UnaryExpression.
    2. Return ? ToNumber(? GetValue(expr)).
    NOTE The unary - operator converts its operand to Number type and then negates it. Negating
    +0 produces -0, and negating -0 produces +0.
    12.5.6 Unary + Operator
    12.5.6.1 Runtime Semantics: Evaluation
    12.5.7 Unary - Operator
    12.5.7.1 Runtime Semantics: Evaluation
    

    View Slide

40. NOTE The unary + operator converts its operand to Number type.
    UnaryExpression : + UnaryExpression
    1. Let expr be the result of evaluating UnaryExpression.
    2. Return ? ToNumber(? GetValue(expr)).
    NOTE The unary - operator converts its operand to Number type and then negates it. Negating
    +0 produces -0, and negating -0 produces +0.
    12.5.6 Unary + Operator
    12.5.6.1 Runtime Semantics: Evaluation
    12.5.7 Unary - Operator
    12.5.7.1 Runtime Semantics: Evaluation
    

    View Slide

41. ਺஋ܕʹม׵͠·͢…
    

    View Slide

42. The abstract operation ToNumber converts argument to a value of type Number according to Table 10:
    Table 10: ToNumber Conversions
    Argument Type Result
    Unde ined Return NaN.
    Null Return +0.
    Boolean If argument is true, return 1. If argument is false, return +0.
    Number Return argument (no conversion).
    String See grammar and conversion algorithm below.
    Symbol Throw a TypeError exception.
    Object Apply the following steps:
    1. Let primValue be ? ToPrimitive(argument, hint Number).
    2. Return ? ToNumber(primValue).
    7.1.3 ToNumber ( argument )
    

    View Slide

43. ͭ·Γ
    console.log(+‘1’)
    =>
    console.log(1)
    =>
    1
    

    View Slide

44. Ԡ༻
    

    View Slide

45. Ԡ༻
    const n = 12
    console.log(n + ‘’)
    =>
    ’12’
    const s = ’12’
    console.log(+s)
    =>
    12
    

    View Slide

46. ECMAScriptΛཧղ͢Δͱ
    

    View Slide

47. JavaScriptͷίʔυͰ͢
    [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([!
    []]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]
    +([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+
    [])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+
    []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+
    []+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+
    []+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!!
    []+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+
    []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+
    []+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+
    ([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]
    +[!+[]+!+[]]]+(+(!+[]+!+[]+[+[]]))[(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+
    (!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+
    []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+
    [])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+
    []+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])
    [+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(+![]+[![]]+
    ([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]
    +!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+
    []]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(!
    []+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[]
    [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+
    []]]](!+[]+!+[]+[+!+[]])+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])
    [+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+([][[]]+[])[+!+[]]+[+!+[]]+[!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([]+[])
    [(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])
    [+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+
    []+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+
    []+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])
    [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]
    +[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()
    

    View Slide

48. ·ͱΊ
    

    View Slide

49. ·ͱΊ
    • JavaScriptͷܕ͸ECMAScriptͷ࢓༷ॻΛಡΉ
    • ࢓༷ॻ͸ಠಛ͕ͩঁࢠখֶੜͰ΋ಡΊΔ
    • Ԡ༻͢ΔͱJSFuckͱݴΘΕΔίʔυ͕ॻ͚Δ
    

    View Slide