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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

199閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2020/01/23 06:22

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

javascript

1var Animal = function() {}; 2 3Animal.prototype 4 5var Dog = function() { 6 Animal.call(this); 7}; 8Dog.prototype = new Animal(); 9Dog.prototype.bark = function() { 10 console.log('ワンワン! '); 11} 12 13var d = new Dog(); 14d.walk(); // トコトコ 15d.bark(); // ワンワン 16

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/01/23 06:37 編集

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

2020/01/23 07:37

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

回答2

0

ベストアンサー

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

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

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

javascript

1Animal.prototype = { 2 walk = function() { 3 console.log('トコトコ'); 4 } 5/* 6, otherMember 7 */ 8} 9

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

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

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

javascript

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

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

  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

古典的継承

javascript

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

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

javascript

1Dog.prototype = Object.create(Animal.prototype, { 2 constructor: { 3 value: Dog 4 } 5}); 6Dog.prototype.bark = function(){/* omitted */}

ES5の継承

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

ES6の継承extends)―MDN 参照。

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

投稿2020/01/23 11:33

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/01/25 14:58

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

2020/01/26 07:24

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

0

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

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

js

1var Animal = function() {}; 2 3Animal.prototype.walk = function() { 4 console.log('トコトコ'); 5} // ←こういうことですよね? 6 7 8var Dog = function() { 9 Animal.call(this); 10}; 11Dog.prototype = new Animal(); 12Dog.prototype.bark = function() { 13 console.log('ワンワン! '); 14} 15 16var d = new Dog(); 17d.walk(); // トコトコ 18d.bark(); // ワンワン

投稿2020/01/23 07:33

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問