MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
[JavaScript_中級者への道]  プロトタイプについて – [2] クラスを定義して呼び出す

[JavaScript_中級者への道] プロトタイプについて – [2] クラスを定義して呼び出す

公開日:2020年02月18日
最終更新日:2020年02月19日
オンスタ運営
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > [JavaScript_中級者への道] プロトタイプについて – [2] クラスを定義して呼び出す
このエントリーをはてなブックマークに追加
[JavaScript_中級者への道]  プロトタイプについて – [2] クラスを定義して呼び出す
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

前回、プロトタイプについて学びましたが、次は prototype を利用した機能実装について学びましょう。

1. オブジェクト指向…難しい

中々、オブジェクト指向といっても概念を理解するのは一苦労です。

しかし、プロトタイプを利用してコーディングをするのは、そこまで複雑ではありません。

 

これまで3~4つの関数で実装していた機能でも、もしくは そのまま書いている処理でも、考え方をちょっと変えるだけでオブジェクトを利用して構築することが可能です。

まずは、些細な機能でもプロトタイプを利用してクラスとして機能を完結させる書き方にチャレンジしてみましょう。

 

2. クラスを実装してみる

クラスは、最初に呼び出す時に new 演算子を利用して初期化というものを行います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new

new 演算子は以下の処理を行います。

  1. 空の JavaScript オブジェクトを生成する
  2. このオブジェクト (のコンストラクター) を他のオブジェクトへリンクする
  3. ステップ 1 で新しく生成されたオブジェクトを this コンテキストとして渡す
  4. 関数が自分自身を返さない場合は this を返す

ここまでよくわかりませんね。

実際にためしてみましょう。 

例えば、次のような関数を定義してみます。

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  return this;
}

var p = Person("タカシ","29","男性");
console.dir(p)

実行結果

単純にPersonという関数を定義し、引数を渡し呼び出しただけです。

関数内で利用している this という変数は、JavaScriptで最初から用意されている特別な変数です。

thisに格納されている値は、thisをどこから実行したのか、またはどのような方法で実行したのかで変化します。

 

thisって何?使い方を覚えて、JavaScriptをもっと楽しく使おう!

https://www.sejuku.net/blog/29389

 

上記の結果では、Person関数内で呼び出した this は、Window オブジェクトを参照していることがわかります。

では、次に new 演算子を利用してみましょう。

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  return this;
}

var p = new Person("タカシ","29","男性");
console.dir(p)

本当に new  演算子を Person 関数の前につけただけです。

しかし、実行結果は以下のようになります。

Personというオブジェクトを出力しています。

先ほどの関数として呼び出した結果では this の参照先は window オブジェクトでしたが、new 演算子をつけると this の参照先がその関数内になっていることがわかります。

 

new 演算子をつけて関数を呼び出した場合、その関数は特別な空間(スコープ)で包まれて、独自のオブジェクトとなります。また、この方法で呼び出したオブジェクトをインスタンスと呼びます。

 

まだぽかーんとなるかもしれませんが、この this がインスタンス内で共通の値の格納場所になるようなイメージです。

 

この仕様とprototypeを組み合わせることで、次のような実装が可能となります。

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  return this;
}

// 名前と歳を文章として加工し返すメソッド
Person.prototype.info = function(){
    return this.name + "君は" + this.age + "歳です"
}

var p = new Person("タカシ","29","男性");
var profileText = p.info();
console.log(profileText)  // タカシ君は29歳です

実行結果

 

Person という関数の prototype プロパティ内に、info というメソッドを定義します。

名前と歳を文章として加工し返すメソッドです。

 

この時、実行結果から Person.prototype.info 内で呼び出している this.name、this.age も、同じPerson内で処理された値を参照していることがわかります。

プロトタイプは継承され、生成されたオブジェクト(この場合はインスタンス)でも、利用することができます。

 

一見関数にはみえるのですが、new 演算子で初期化し利用することを前提としたものをJavaScriptではクラスと呼びます。

 

コンストラクタについて

new Person()を実行した時には、最初に定義した Person 関数が呼び出されます。

この最初に呼び出される関数をコンストラクタと呼びます。

コンストラクタ(英:constructor)とはオブジェクト指向のプログラミング言語で登場する用語のひとつでありインスタンスを作成したタイミングで実行されるメソッドのことです。
もう少しざっくり書くとクラスをnewした瞬間に実行される関数のことです。

 

インスタンスを生成する時に、thisは初期化される

new 演算子でインスタンスを生成すると、this は初期化されます。

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  return this;
}

// 名前と歳を文章として加工し返すメソッド
Person.prototype.info = function(){
    return this.name + "君は" + this.age + "歳です"
}

var takashi = new Person("タカシ","29","男性");
var takashi_info = takashi.info();
console.log(takashi_info)  // タカシ君は29歳です

var shogo = new Person("しょうご","28","男性");
var shogo_info = shogo.info();
console.log(shogo_info)  // しょうご君は28歳です

初期化されるということは、与える引数を変えて何度も生成することが可能です。

 

メンバ変数 (インスタンス変数)

上の例で出てきているように、クラスの内部でメンバ変数を定義・参照するには this.<プロパティ名> を使います。インスタンス変数やメソッド呼び出しの際にJavaScript では this が必ず必要です。

 

まとめ

  • new 演算子を関数を呼び出す前につけることで、その関数内で呼び出すことができる this の参照先がその関数自身になる
  • new 演算子で呼び出し最初に実行される関数をコンストラクタと呼ぶ
  • new 演算子で生成したオブジェクトをインスタンスと呼ぶ
  • プロトタイプは継承され、生成されたオブジェクト(この場合はインスタンス)でも、利用することができる。

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

[JavaScript_中級者への道] Js_Promiseを使ってみる
プログラミング
公開日: 2020年02月21日
最終更新日: 2020年02月21日
[JavaScript_中級者への道] Js_Promiseを使ってみる
  • # ES6
  • # JavaScript
  • # Promise
  • # コールバック
オンスタ運営
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
プログラミング
公開日: 2020年02月19日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
プログラミング
公開日: 2019年08月04日
最終更新日: 2019年08月01日
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
  • # Scratch
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
プログラミング
公開日: 2017年06月19日
最終更新日: 2019年07月18日
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
オンスタ運営
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2019年10月31日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
プログラミング
マークアップ
公開日: 2020年01月16日
最終更新日: 2020年01月16日
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
  • # Sass
  • # vue-cli
  • # Vue.js
  • # vuejs
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2019年09月03日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。