t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

JavaScript中級者になろう 9章を読んだ(オブジェクト志向)

前回:

JavaScript中級者になろう 7章・8章を読んだ - t_hazawaの日記

経緯

  • このサイトを読むのは楽しい

9章 オブジェクト志向

九章第一回 オブジェクト指向とは

九章第一回 オブジェクト指向とは — JavaScript初級者から中級者になろう — uhyohyo.net

  • プロトタイプチェーンで作られる場合(昔のやり方)と、クラスで作る場合(普通の場合)があるのが難しいポイントだなあ
  • new honyarara(); で、 honyarara 関数(コンストラクタ) を new演算子がyobidaす
  • new は新しいthis を作ってくれる 2021/11/03 17:49 10m

九章第二回 prototypeの活用

九章第二回 prototypeの活用 — JavaScript初級者から中級者になろう — uhyohyo.net

  • コンストラクタ利用、prototype 利用、 クラス利用の3種類があるのかな 多い

九章第三回 継承とは

九章第三回 継承とは — JavaScript初級者から中級者になろう — uhyohyo.net

  • function.apply()
  • function.call()
  • 前読んだけど忘れた
  • apply() this値指定カノう 引数列を配列で渡せる
    • 思い出した
  • 引数列は ES2015のspread operatorがお株を奪ったらしい
  • call は this, 引数1, 引数2,... とわたす
  • arguments を使ってても 関数の定義業は funciton sum() で、引数が内容にみえるから、 spread operator がいけてそうだね
  • newの場合は関数呼び出しの()を省略できる

  • Dragon 作りのときに、Teki の プロトタイプしか使わないので、 Teki のインスタンスをつくって、それの teki.prototype を三章する、ってことみたい(?) 2021/11/03 18:57 24m

九章第四回 プロトタイプ指向

九章第四回 プロトタイプ指向 — JavaScript初級者から中級者になろう — uhyohyo.net

  • プロトタイプ指向ではprototypeも結局のところただのオブジェクトなので、自由に操作できます。

  • 変更自由
  • Rubyのようにメタプログラミング機能が発達している言語では、クラスベースでも、結構クラスを変更できるらしい

九章第五回 クロージャ

九章第五回 クロージャ — JavaScript初級者から中級者になろう — uhyohyo.net

  • スコープのこと 2021/11/09 18:41 8m
  • グローバルスコープ以外は、関数かブロックスコープによって作られるらしい
  • なんと aaa() {} のなかで var bbb= function() {} を作れるのだ
  • 他の言語で見ない いや、無名関数ならみるけど…
  • 作った関数をグローバルに返しても、関数は生まれたスコープの範囲のものを使えるとのこと
  • クロージャは、ローカル変数に対する限定的なアクセスを提供する手段になる

  • この節からは初めて読むようだ 2021/11/09 18:55 16m
  • function MyDiv の中で無名関数を使うと、無名関数の中ではthisが無名関数のものになってしまうので、MyDivのthisには thisではアクセスできないよ (なんか parent.this みたいなのがありそうなきもする)
  • var t = this;
  • とすると、無名関数の中でも tにアクセスできるので、 t.nameにアクセスデキるようになる
  • function(e)({...}).bind(this) とすると、親のthisをfunction中にわたせる

九章第六回 ゲッタとセッタ

九章第六回 ゲッタとセッタ — JavaScript初級者から中級者になろう — uhyohyo.net

  • オブジェクトのプロパティを参照したり変更しようとするときに、関数を呼ぶというものです。このとき呼ばれる関数が、ゲッタやセッタです。
  • 単に単純に取得、変更だけのやつだけじゃないんだね 2021/11/09 19:29 27m
  • ゲッタセッタの作り方は複数あるらしい
  • get aaa(){ return 3; }, とかオブジェクトリテラルに書く
  • set aaa() {}
  • 同じプロパティの取得、設定なので、 aaa のところが同じになる
  • 必ず真偽値を返すプロパティにできたりできる
  • obj.defineGetter("a", function(){}); (めちゃ古い書き方)
  • defineProperty がナウい
  • 非標準だったので、 __で囲われている
  • 代入演算子は左を三章せず、→の価を返す
  • 無名関数によって、 _a に直接あクセスできなくするテクニック

九章第七回 プリミティブとオブジェクト(とてもnagai)

九章第七回 プリミティブとオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

  • プリミティブも String,Number,Boolean というオブジェクトのインスタンスができる
    • プリミティブのプロパティを三章しようとしたときに
  • オブジェクトはイべてtrue
  • == で null と true になるのは null か undefined だけ
  • console.log(null==false)
  • false
  • falseはダメ 2021/11/09 19:58 47m
  • (null & defined) のグループは、これら以外の価とは==でtrueにならないとのこと。 0 や false や "" ともならないんだね
  • 真偽値とそれ以外を比べる場合、まず false が 0、trueが1に変換される
    • true == "3" は false。 true == "1" だけが true らしい
  • オブジェクトが 文字列と比較される場合、まずオブジェクトが文字列に変換される obj.toString() される
    • 数値ならvalueOf() 文字列でもtoString() が無いときに呼ばれる 逆も でも Object.prototype にあるので普通はある
  • 本来、valueOf() は数値を返すメソッドではなく、自分自身を返すメソッドらしい 2021/11/10 17:17 10m
  • オブジェクトリテラル {} とか {toString: function(){ return "3"; }}
  • 実は==(と!=)はjavascriptプログラマ達からは嫌われており、実はあまり使われていません。そもそも、勝手に型を変換してしまうというのが直感的な挙動ではありませんね。

  • === だと、もちろん null === undefined も false
  • == null だけは、よく使われるとのこと
  • 左辺が undefined または nullのときだけ trueになる
  • 特に、undefinedとnullに共通する特徴は「プロパティを参照しようとするとエラーになる」ことなので、その場合を除外したい場合などにこの比較を用います

  • わかりみ
  • 文字列連結も +
  • どちらも文字列でない場合(すなわち数値、真偽値、null、undefinedの場合)、数値の加算となり両辺が数値に変換されます。 例えば、2+trueはtrueが1に変換されるので3です。"2"+trueの場合、trueは文字列に変換されるので"2true"になります。

  • 数値以外を数値に変換する手軽な方法として、「0を引く」というものがあります。 falseも0に変換されるので、falseを引いてもいいです。

  • (number)"3" とかないの?キャスト
  • falseはわかりにくそう 
  • こうすれば、一目見ただけでは何がしたいのか分かりません。コードを汚くするのに一役かってくれます。

  • NaNは、必ず数値へ変換しなければならないのに数値への変換は不可能という困った状況をなんとかするために存在します。 数値の演算の結果を数値で表せない場合にもnanとなります(例えば0/0など)nanを含む四則演算は全てnanになります。nanを含む比較演算の結果は必ずfalseとなります。

  • nan===nanですらfalseになります。nanはプログラム上ではnanと書くと取得できます。undefinedと同様、nanという変数にnanが入っています。

  • Number.NaN の方が推奨
  • isNaN , 100.isNaN
  • String(x)
  • Number(x)
  • Boolean(x)
  • で変換できる
  • 同盟のコンストラクタと関数がある

九章第八回 例外処理

九章第八回 例外処理 — JavaScript初級者から中級者になろう — uhyohyo.net

  • throw では Error オブジェクトを投げるといいぞ。
  • err.message がある err が throw されると、コンソールが Uncaught Error: エラーが発生しました。 みたたに表示してくれる
  • new Error("message"); でもいいぞ

感想

  • クロージャの用途(tにデータをとっておく)とか知らなかったなぁ 2021/11/09 19:03 22m

時間まとめ

  • 11/3, 9, 10 に 31+48+40 = 119分 で読んだ
  • ブログは 15分ほど
  • 累計: 851分

次: JavaScript中級者になろう 10章を読んだ(XPath) - t_hazawaの日記