-2

JSのクラスについての質問の続きとなります。

>>>

class Cat {
constructor(name) {this.name = name}
meow() {alert( this.name + 'はミャオと鳴きました' )}
}

//インスタンス作成
var clsObj = new Cat("my cat");
//インスタンス(オブジェクト)の中身を出力
console.log(clsObj);

初心者なのでこの中のどの記述が必須で、
またnameはどれと対になっているかがわかりません。

インスタンスはnew クラス名 となっている所で作成されて変数に作られたインスタンスが代入されるというのは何となく分かったのですが、

console.log(clsObj);
VM793:9
Cat {name: "my cat"}

となるのがいまいちわかりません。

new Cat("my cat");

class Cat {
  constructor(name) {this.name = name}
  meow() {alert( this.name + 'はミャオと鳴きました' )}
}

を実行するという事で、
引数は

constructor(name)
new Cat("my cat");

が対になっているのでnameがmycatに代わるという事でしょうか?

new Cat("my cat");が実行された結果がインスタンスという事ですが、
mycatがインスタンスなのですか?

大変恐縮ですが、簡単に一連の流れを教えていただければ幸いです。

class Cat {
  constructor(name) {this.name = name}
  meow() {alert( this.name + 'はミャオと鳴きました' )}
}

にどう渡されてどのように処理され何がインスタンスとして吐き出されるのでしょうか?

ES6でclassとは?
の続き

_____________
何度もご対応大変ありがとうございます。

>>>
ClassがInstanceを作るための設計図だということは理解していただいているかと思います。

クッキーの抜き型には、丸や四角、星型などいろいろな形があります。一度クッキーの抜け型を作っておけば、同じ形のクッキーを幾つでも作ることが出来ます。クッキーは実際に食べることが出来ますが、クッキーの型は食べることが出来ません。
という例えを見たのですが、
どうも型とは関数のように何度も再利用するための式などのまとまりの事で、関数とそっくりなもののようですね。
つまり関数の定義とほぼ同じだが、すべてがグローバルになるので、外からでも利用ができる関数の定義がクラスの作成という事になるのですかね?

そしてインスタンス化とはクラスは作成定義しただけでは使えないので、関数の呼び出しのようにクラスのインスタンス化をnewで行い実際にクラスを使えるようにする、呼び出しできるようにする
という事ですかね?

class Cat {
constructor(name) {this.name = name}
meow() {alert( this.name + 'はミャオと鳴きました' )}
}

から

clsObj = {
    constructor:function(name) {this.name = name},
    meow:function() {alert( this.name + 'はミャオと鳴きました' )}
};

が作成されるという事ですか?

>>>
上記のような感じですと実行されるときのthisがInstance(Object)を指すイメージが付きますでしょうか?

thisはクラス名ではなくコンストラクタを実行した結果具現化されるインスタンスを示すようですが、
具体的にソースのどれでしょうか?

>>>
そして、このInstanceを作成した際にはコンストラクタが実行されるので下記のように変化します。

constructor:function(name) {this.name = name},
を実行した結果

clsObj = {
    name:"my cat",
    constructor:function(name) {this.name = name},
    meow:function() {alert( this.name + 'はミャオと鳴きました' )}
};

となるという事なのは分かったのですが、
変更されたのは、name:"my cat",だけのようですね。

constructor:function(name) {this.name = name}は結局
nameが引数の無名関数を定義して、内容はインスタンスの中のnameプロパティにnameを代入しているのでしょうか?

また、name引数はvar name = というローカル変数に何を代入した状態になるのでしょうか?
実引数があればそれが入るとわかるのですが、これは見当たりません

またなせ代入作業がされただけで
name:"my cat",
というプロパティが生成されるのでしょうか?

4
  • 話が主軸から逸れるので詳しくは調べていただきたいのですが、Objectのプロパティはプロパティ名を宣言せずとも代入時に勝手に定義されます。object の型に対してプロパティを定義する
    – user10259
    Commented 2017年4月17日 12:24
  • 話がそれているという事ですが、 この問いを作ったのは thisやnameがどれと対になっていて結果としてどの値に変更されるかというのがわからないので作った問いです。 そこが伝わっていないようですが、前回はともかく今回は始めからこちらが主題なので今回はずれていないと思います。 Commented 2017年4月17日 13:06
  • "それている"ではなく"それる"です。クラスについての質問でObjectに対しての基礎知識に話が発展しそうだという意味です。
    – user10259
    Commented 2017年4月18日 0:00
  • thisやnameがどれと対になっていて結果としてどの値に変更されるかという部分はクラスの話ではなくオペランド以外の物を示すオブジェクトの話だったのですね。それは知らずに失礼しました。それではそのように再質問すれば教えていただければ再質問にします。 Commented 2017年4月18日 2:09

2 件の回答 2

2

まず基本的なことですが、クラス - JavaScript | MDNより引用します。

ECMAScript 6 で導入された JavaScript クラスは、JavaScript にすでにあるプロトタイプベース継承の糖衣構文です。クラス構文は、新しいオブジェクト指向継承モデルをJavaScript に導入しているわけではありません。JavaScript クラスは、オブジェクトを作成して継承を扱うためのシンプルで明確な構文を用意します。

初心者さんということでprototypeがどうだとか言われてももしかしたらご存じないかもしれませんが、元来jsはprototypeベースの継承をコアにした言語で、クラスのようなものを作る際にはprototypeとよばれる特別なプロパティ/オブジェクトを拡張していました。

最も一般的な方法は、Functionオブジェクトを生成し、そのprototypeを拡張します。このFunctionオブジェクトそれ自身はコンストラクタと呼ばれる特別な関数としても使用でき、これがご質問のコードでいうところのconstructorに当たります。newキーワードを伴う呼び出しの場合、関数はコンストラクタ呼び出しとなり、自身のprototypeを継承したあらたなオブジェクトを生成し、関数内の処理を適用してからこのオブジェクトを返す、という動作になります。

// class Cat {
//   constructor(name) {this.name = name}
const Cat = function (name) {
    // var this = Object.create(Cat.prototype); // new をつけての呼び出しの場合、内部的に実行される
    this.name = name;
    // return this; // new をつけての呼び出しの場合、内部的に実行される
};

// メンバ変数/メソッドはFunctionオブジェクトのprototypeを拡張します
//  meow() {alert( this.name + 'はミャオと鳴きました' )}
Cat.prototype.meow = function () {
    alert(this.name + 'はミャオと鳴きました');
};
// }

// Functionオブジェクトはそれ自身はふつうの関数です。
const dummy = {};
console.assert(Cat.call(dummy, 'my cat') === undefined);
console.assert(!(dummy instanceof Cat));
console.assert(Object.getPrototypeOf(dummy) !== Cat.prototype);
console.assert(dummy.name === 'my cat');

// newキーワードを伴う呼び出しはコンストラクタとして働きます
// コンストラクタ呼び出しは新たなインスタンスを生成しそれを返します。
const clsObj = new Cat('your cat');
console.assert(clsObj instanceof Cat);
console.assert(Object.getPrototypeOf(clsObj) === Cat.prototype);
console.assert(clsObj.name === 'your cat');

// clsObjはCatクラスのインスタンス、すなわちCat.prototypeを継承したオブジェクトです
clsObj.meow();// your catはミャオと鳴きました
// この呼び出しは次の処理に等価です
Cat.prototype.meow.call(clsObj);

この内容を簡単に書けるようにしたのがES6のClassということになります。どれが必須、といわれれば必須なものは特にありません。次のコードも完全なクラス定義です。

// as Function object
const myClass = function () {};

// using ES6 class syntax
class myClass {
}

ユーザー定義クラスmyClassはなにもしないコンストラクタを持ち、メンバ変数やメソッドはありません。

少々難しいかもしれませんので、不明な点があればコメントからご指摘ください。

3
  • プロトタイプのご説明ありがとうございます ただ始めに記載させていただいた下記のクラスのnameやthis、引数が胴椎になってどういう流れで結果になっているかが初心者にはわかりません そこの一連の流れを教えていただければ幸いです。私が記載した簡単なクラスでお願いします >>> 大変恐縮ですが、簡単に一連の流れを教えていただければ幸いです。 Commented 2017年4月16日 9:58
  • ご質問のクラスをそのまま、実際の中身として示したものが回答のコードになります。「一連の流れ」というのがどういうものを期待しているのかよくわからないのですが、処理がどの順番で実行されるのかを時間軸的に把握したいのであれば、コードをステップ実行するのがいいかもしれません。これはご質問冒頭のコードでも、私の回答のコードでも試せますので、ご確認ください。冒頭から「ステップイン」で処理をすすめると、だいたい1行ごとにどこを処理しているかが確認できます。
    – user15182
    Commented 2017年4月16日 10:32
  • thisやnameがどれと対になっていて結果としてどの値に変更されるかというのがわからないのですが、質問欄に詳しく追加しましたので良ければ見てください Commented 2017年4月17日 13:05
1

Cat {name: "my cat"}となるのがいまいちわかりません。

ClassがInstanceを作るための設計図だということは理解していただいているかと思います。
あくまでイメージなので実際の型とは異なりますがnewを行った場合、
設計図を元に下記のようなObjectが作られることを想像してみてください。
下記はvar clsObj = new Cat("my cat");を行ったときの流れのイメージになります。

clsObj = {
    constructor:function(name) {this.name = name},
    meow:function() {alert( this.name + 'はミャオと鳴きました' )}
};

上記のような感じですと実行されるときのthisがInstance(Object)を指すイメージが付きますでしょうか?
そして、このInstanceを作成した際にはコンストラクタが実行されるので下記のように変化します。

clsObj = {
    name:"my cat",
    constructor:function(name) {this.name = name},
    meow:function() {alert( this.name + 'はミャオと鳴きました' )}
};

上記のコンストラクタや関数は実際にはprototype宣言なので
ObjectをChromeなどでみても出力はされません。
ですので、Consoleに出力した際の表示がこうなります。

Cat {name: "my cat"}

上記の応用として、例えばconstructorで引数を2つにして、
下記のように実行すると別のネームスペースが作られます。

//clsObj = new Cat("my cat", "owner");
clsObj = {
    name:"my cat",
    parent:"owner",
    constructor:function(name,par) {
        this.name = name;
        this.parent = par;
    },
    meow:function() {alert( this.parent + 'の' + this.name + 'はミャオと鳴きました' )}
};

rio.irikamiさんが回答いただいている内容は、
このnewされてInstanceが作成されるまでの流れ(内部的な処理の内容)を
もっと厳密に説明されている内容になります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。