サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

00.javascript:02.objectとprototype


02.objectオブジェクトとprototypeプロトタイプ

JavaScriptの個人的に気になるところ

前回、01.JavaScriptの同期処理と非同期処理を調べていたら、objectオブジェクトとprototypeプロトタイプという訳のわからない言葉が出てきたので、まとめてみたいと思います。

『オブジェクト』は、『モノ』です。
プログラミングを行うのに便利な単位です。
『オブジェクト』は、『プロパティ』と『メソッド』を持っています。
JavaScriptでは、オブジェクトを連想配列で記載することができます。

オブジェクト指向プログラミングでは、クラスベースのオブジェクト指向言語(例: C++, Java, Ruby)の場合、

  1. まず、設計図である『クラス』を定義して、
  2. 次に、『クラス』(設計図)を元に『インスタンス』(オブジェクト、モノ)を作成し、以降のプログラミングで利用します
  3. 『クラス』(設計図)は、インスタンス作成目的以外に使用することはありません(→ここ、間違っているかもしれません、、、)

Javascriptはプロトタイプベースのオブジェクト指向言語で、『Prototypical Object』(プロトタイプ)というオブジェクトが『クラス』の役割を持ちます。(引用元

この図は、下記サイトの図のほぼコピペです。クラスとプロトタイプについて、わかりやすく説明されているので、お勧めです。
https://prime503.hatenadiary.org/entry/20091225/1261720985

用語のイメージ

  • オブジェクト:モノ(プロパティとメソッドをもつ、モノ)
  • クラス:設計図(or 分類)
  • インスタンス:設計図をもとに作ったモノ
    • RubyやJavaでは、クラスをnewしてインスタンスを作る)
    • JavaScriptの場合は、プロトタイプをnewしてインスタンスを作る
  • コンストラクタ:クラスをnewしたときに実行される関数

オブジェクトは、『モノ』であり、『プログラミングするのに便利な単位』だそうです。
(引用元:アジャイル時代のオブジェクト脳のつくり方 Rubyで学ぶ究極の基礎講座)

オブジェクト指向プログラミング(object-oriented programming, OOP)

Wikipediaのオブジェクト指向プログラミングや、オブジェクト指向、その他の解説などを読みましたが、私には理解できませんでした。

  1. オブジェクトはモノ(プログラミングの対象全て)
  2. クラスは分類

というイメージのもとで、オブジェクト指向では以下の3つの特徴が重要だそうです。

  1. 継承    : 共通する特徴を上から下にそっくり共有している関係
  2. カプセル化 : 機能とデータの範囲を明確にすること
  3. ポリモーフィズム:使い分け

正直、継承以外は、私にはまったくイメージがわきませんでした。いつかイメージつくようになるかな。。。

引用元:アジャイル時代のオブジェクト脳のつくり方 Rubyで学ぶ究極の基礎講座
←Rubyに興味がなくても、オブジェクト指向という言葉に慣れるために、この本は非常にお勧めです。

オブジェクト指向に関するリンク

https://www.sejuku.net/blog/5973
オブジェクト指向とは何か?わかりやすい例で説明してみた。
侍ブログ編集部
2019/9/11

https://wa3.i-3-i.info/word1120.html
クラス (class) 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

https://qiita.com/it-hero/items/b2f8e39d7cc23ad505f9
@it-hero
2018年09月25日に更新
オブジェクト指向が5000%理解できる記事

https://codezine.jp/article/detail/10215
オブジェクト指向がわからない! そんなあなたの脳味噌をオブジェクト脳にする準備体操
渡部 拓也[著]
2017/07/06

言語はRubyですが、以下の本が分かりやすいです。

また、別の、オブジェクト指向を用いたプログラミングの具体例としては、Unityというゲーム作成ソフトの使い方の入門書である、以下の本の、『Prefabプレファブ』と『インスタンス』の説明が非常に分かりやすいです。

http://sp.e-words.jp/w/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91.html
IT用語辞典
オブジェクト指向 【object oriented】

https://note.mu/tokitky/n/n6e70d7e7a236
初心者が一番わかりやすかったオブジェクト指向プログラミングの説明は、子供向けのマイクラ本だった。。
toshi
2018/09/11 14:01

https://eng-entrance.com/what-oop
2017.08.10
初心者向けに徹底解説!オブジェクト指向とは?

https://sbfl.net/blog/2017/06/09/javascript-easy-oop/
JavaScriptで気楽に始めるオブジェクト指向プログラミング
2017年6月9日

https://prime503.hatenadiary.org/entry/20091225/1261720985
2009-12-25
クラスベースとプロトタイプベース

https://qiita.com/awakia/items/8ff451ca5f8ae0122be7
@awakia
2013年10月30日に投稿
Javascriptでオブジェクト指向するときに覚えておくべきこと

https://qiita.com/uhyo/items/ab8e273e1eb71d02e29a
@uhyo
2018年09月26日に更新
JavaScriptのオブジェクト指向が10%理解できる記事(実践編)
→ES2015以前の書き方か難しいですが、繰り返し読むしかなさそうです。

2019年時点のJavaScriptでのオブジェクト指向プログラミングの書き方

ES2015からはクラス構文が導入されたため、JavaScriptにおけるオブジェクト指向のやり方は、以下のようになりました。(引用元:現代のJavaScriptにおけるオブジェクト指向(ES2015~))

このような書き方はできますが、JavaScriptにクラスができたわけではなく(JavaScriptはプロトタイプベース)、あくまでプロトタイプとのことです。

JavaScriptのclass構文の解説のリンク

https://www.sejuku.net/blog/49551
【JavaScript入門】class構文の使い方・書き方が分かるようになる方法!
マサト
2019/4/29

コンストラクタconstructorって何?

コンストラクタ (constructor)によると、
コンストラクタ(英:constructor)とは

オブジェクト指向プログラミング言語において、クラスからインスタンスを作成したタイミングで実行されるメソッドのこと

だそうです。つまり、

クラスをnewした瞬間に実行される関数のこと

だそうです。

JavaScriptだと、Angularで、よく出てきます。
コードの具体例は以下のリンク先が分かりやすいです。

https://www.sejuku.net/blog/25328
【JavaScript入門】コンストラクタの使い方(new/prototype/overload)
ヨシダ ジュン
2019/4/25



memo

リンク


00.javascript/02.objectとprototype.txt · 最終更新: 2020/12/01 by adash333