質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.36%

Javascriptでのプロトタイプチェーンにおける関数の定義の仕方

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 322
退会済みユーザー

退会済みユーザー

javascriptについて質問です。
書籍学習をしていて、今はプロトタイプチェーンをやっているのですが
以下のコードに疑問を感じ、質問しました。
疑問点はコードの上から三行目のAnimal.Prototypeのところでの関数を設定の仕方と
中盤にあるDog.Prototypeでの関数の設定の仕方が違ったのです。
自分でコードを書いた時には、後者のやり方に統一してオブジェクト名.Prototype.関数名　=(){関数の処理}というような感じで書いたのですがうまく作動しませんでした。この二つの関数の設定の仕方には何か違いがあるのでしょうか？ 

var Animal = function() {};

Animal.prototype

var Dog = function() {
  Animal.call(this);
};
Dog.prototype = new Animal();
Dog.prototype.bark = function() {
  console.log('ワンワン！ ');
}

var d = new Dog();
d.walk(); // トコトコ
d.bark();　// ワンワン

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert2 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    miyabi_takatsuk

    2020/01/23 15:33 編集

    というか、3行目でエラー起きません？
    代入なしでエラーなく実行されるような、ステートメントではないとお見受けします。
    書籍にて、Animal.prototypeに何か代入しているなら、それも記載していただかないと、第三者は再現できません。
    ちなみに、Object.prototypeのpは大文字ではなく小文字です。
    プログラムの世界では大文字小文字の違いは厳密ですので、注意しましょう。

    キャンセル

  • Lhankor_Mhy

    Lhankor_Mhy

    2020/01/23 16:37

    回答した後に気づいたけど、miyabi_takatsukさんの「prototypeのpは大文字ではなく小文字」という指摘が大正解だったりして……？

    キャンセル

回答 2 件

link

checkベストアンサー

+2

ご質問の回答としては外してしまうかもしれませんが、プロトタイプチェーン≒継承なので

疑問点はコードの上から三行目のAnimal.Prototypeのところでの関数を設定の仕方

古いブログエントリなどでは以下のようなコードでメンバ定義しているのを見かけます。 

Animal.prototype = {
  walk = function() {
    console.log('トコトコ');
  }
/*
, otherMember 
 */
}


このメンバ定義の方法は、派生オブジェクトではないのでできる方法です。

中盤にあるDog.Prototypeでの関数の設定の仕方が違った

先に述べたメンバの定義方法は継承（派生オブジェクトを定義）する場合には使えません。 

Dog.prototype = new Animal(); // 継承の定義
Dog.prototype = { // この代入は「継承の定義」を無効化してしまう
  bark: function() {
    console.log('ワンワン！ ');
  }
}


※派生オブジェクトのメンバは、継承の定義を損なわないように留意します。

  1. prototype プロパティに個別指定
  2. Object.assign(Obj.prototype, {/* members */}) で指定

なお、コンストラクタ関数は ネームド関数 として宣言しておくと
古典的継承でも instanceof 演算子が使えるようになります。 

let d = new Dog();
console.log( d instanceof Dog ); // true
console.log( d instanceof Animal ); // true

古典的継承 

function Dog() {
  Animal.apply( this, arguments );
}
Dog.prototype = Animal.prototype; // new Animal 以外の方法もある
Dog.prototype.constructor = Dog; // instanceof Dog を使えるようにする

やや古い　Object.create() での継承 

Dog.prototype = Object.create(Animal.prototype, {
  constructor: {
    value: Dog
  }
});
Dog.prototype.bark = function(){/* omitted */}

ES5の継承 

Object.assign( Dog.prototype, Animal.prototype );
Dog.prototype.bark = function(){/* omitted */}

ES6の継承（extends）―MDN 参照。

※ES5 以降は継承も簡便になっています（継承の定義を損なわない）。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/25 23:58

    横槍すみません。
    めちゃくちゃ勉強になりました・・・。

    キャンセル

  • 2020/01/26 16:24

    miyabi_takatsuk さん
    Object.defineProperty() で PropertyDescriptor を扱う実装となった頃の 「Object.create() による継承方法」はあまり知られていないと思います（ブラウザ側JavaScriptは 「minify こそが正義」だったため）。

    キャンセル

link

+2

後者のやり方に統一してオブジェクト名.Prototype.関数名　=(){関数の処理}というような感じで書いたのですがうまく作動しませんでした。

当方で試してみましたが、それで動作するようです。 

var Animal = function() {};

Animal.prototype.walk = function() {
  console.log('トコトコ');
}  //　←こういうことですよね？


var Dog = function() {
  Animal.call(this);
};
Dog.prototype = new Animal();
Dog.prototype.bark = function() {
  console.log('ワンワン！ ');
}

var d = new Dog();
d.walk(); // トコトコ
d.bark();　// ワンワン

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る