分こんにちは,太田です。前回は__proto__を使ってJavaScriptにおけるプロトタイプについて解説しました。今回はそこから発展して継承の方法を学びます。JavaScriptにおける継承まず,目標とする形を確認しておきましょう。ChromeのデベロッパーツールかSafariのウェブインスペクタのコンソールにて,次のコードを実行してみてください。dirによるElementの解析dir(document.createElement('span'))実行結果は次の通りです。Chromeでの実行結果#1こちらの通り,WebKitではspan要素はそれ自身にいくつものプロパティを持っています。Chromeでの実行結果#2さらに,span要素にも__proto__があり,それはHTMLElementのprototypeになっています。trueという関係になっています。HTMLElementの__proto__はElementのprototypeであり,Elementの__proto__はNodeのprototypeです。簡単に図にしてみると次のようになります。span要素の継承関係ところで,こういった継承関係を把握することはDOMを理解する上で極めて重要です。Element.prototypeは,DOM仕様で定められているインターフェースと基本的に一致します。いった仕様と実装な関係を確認することで,より正確にDOMを理解できます。JavaScriptにおける継承さて,前述のような継承を自分で定義したコンストラクタにおいて実現してみましょう。bこの例ではAとBは互いに独立しています。どのようにすればAとBを結びつけることができるのか,考えてみましょう。目標とするのは次のような関係です。B.prototypeという点です。B.prototypeということです。b.__proto__という関係が導き出せます。あれば図4のような継承関係が成立するということです。AとBの継承関係#2目的の通り,aはAのインスタンスであり,Bのインスタンスでもあるという継承関係を作ることができました。表示されている点が気になると思います。これはconstructorがBしか存在しないためです。constructorを明示的に指定すればこの問題は解消できます。AとBの継承関係#3これで目標としていた継承を実現することができました。今回紹介した方法には注意すべき点があります。それはコンストラクタ内の処理です。B()のように呼び出した時も何も処理が行われないため問題ありません。Bのなかで何かしらの処理をしていた場合,意図しない処理になってしまう可能性があります。A();console.log(a);この例では,AにBを継承させるための処理でalert('B')が呼ばれてしまいます。これは少々不都合があります。そこで,newするためのダミー関数を用意する方法がよく使われます。Bがfalseになるのではないかと思われるでしょう。dummy()の__proto__はB.prototypeであり,A.prototypeはBのインスタンスとなります。まとめ今回はプロトタイプベースの継承の具体的な方法を学びました。少々理解し難いところがあるかもしれませんが,prototypeと__proto__の関係をしっかりと押さえていけば,そう難しくはないと思います。次回はprototypeに関連してthisとcallを解説します。プロトタイプ著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。