1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのコンストラクター関数について

Posted at

#コンストラクター関数について
こnコンストラクター関数とは新しく「オブジェクト」を作成するための雛形となる関数です。通常の{}構文では1つのオブジェクトを作成します。コンストラクター関数を利用すると似たようなオブジェクトを複数作成することができます。

コンストラクター関数には2つの慣習があります。
・ 名前は大文字で始める。
・ コンストラクター関数を呼び出す際は'new'演算子を用いて実行する。

早速コードで確認してみましょう。

JS
function Person(name, age) {

    this.name = name
    this.age = age
}

const admin = new Person('Tom', 30);

console.log(admin);

1. まずPersonというコンストラクター関数を用意します(大文字に注意)
2. new演算子を用いて新しいオブジェクトを作成し(インスタンス化)adminという変数に格納します。

ここでnew演算子とは何かを説明します。
##new演算子
new 演算子を用いて関数が実行された場合、次のような処理が行われます:

  1. 新しい空のオブジェクトが作成され、 this に割り当てられます。
  2. 関数本体を実行します。通常は新しいプロパティを追加することで this に変更を加えます。
  3. this の値が返されます。

先程のコードで考えると

JS
function Person(name, age) {
    // this = {}; 暗黙
    this.name = name
    this.age = age
    // return this; 暗黙
}
const admin = new Person('Tom', 30);
console.log(admin);

ここでコンストラクター関数から返却されるreturnについてもう少し詳しく見てみましょう。
通常、コンストラクタは return 文を持ちません。コンストラクタの仕事は、必要なものをすべて this の中に書き込むことであり、this が自動的に戻り値となります。次の2ケースをコードで確認してみましょう。
1.return がオブジェクトと一緒に呼ばれた場合、this の代わりにオブジェクトが返されます。

JS
function Person(name, age) {
    this.name = name
    this.age = age
    return  {} //空のオブジェクト
}
const admin = new Person('Tom', 30);
console.log(admin); //=> {} 空のオブジェクトが出力される

2. return がプリミティブと一緒に呼ばれた場合、それは無視されます。

JS
function Person(name, age) {
    this.name = name
    this.age = age
    return  1; //プリミティブ型
}
const admin = new Person('Tom', 30);
console.log(admin); //=> admin が出力される

##まとめ
・複数の似たようなオブジェクトを作るために、コンストラクタ関数を使うことができます。
・コンストラクタ関数は new を使ってのみ呼び出されるべきです。この呼び出しは、最初に空の this を作成し、必要な処理が行われた this を最後に返すことを意味します。

##参考
Udemy: 【JS】ガチで学びたい人のためのJavaScriptメカニズム
現代の JavaScript チュートリアル:https://ja.javascript.info/logical-operators

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?