継承がよくわからん anchor.png

  • javascript継承がよくわからん。というか、継承自体、自分が理解しているのか怪しいもんだ。なので、javascriptの継承をマスターするのは一旦諦めるとする。
  • 諦めた上で、自分がやりたいことを精査してみるとだいたいこんな感じ。
    • 複数のクラスがある。
    • それらのクラスの共通部分をひとつにまとめてシェアしたい。
Page Top

まずはタタキ台 anchor.png

こんなスクリプトを書いてみた。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
-
|
-
|
!
!
 
-
|
-
|
!
!
 
 
 
 
 
 
class00 = function(){
  this.name = "taro";
  this.say = function(){
    console.log('this is '+this.name);
  }
}
 
class01 = function(){
  this.name = "jiro";
  this.say = function(){
    console.log('this is '+this.name);
  }
}
 
c0 = new class00;
c0.say(); //this is taro
 
c1 = new class01;
c1.say(); //this is jiro
Page Top

共通部分を分離する anchor.png

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
-
-
|
!
!
 
-
|
!
 
 
-
|
!
 
 
 
 
 
 
 
share = {
  say : function(){
    console.log("this is "+this.name);
  }
}
 
class00 = function(){
  this.name = "taro";
}
class00.prototype = share;
 
class01 = function(){
  this.name = "jiro";
}
class01.prototype = share;
 
c0 = new class00;
c0.say(); //this is taro
 
c1 = new class01;
c1.say(); //this is jiro

表示はされたのだけど、この方法はNGらしい。なんでも、prototypeを新しいオブジェクトで上書きしているから、とのこと。なんのことやらサッパリわからん。

Page Top

気を取り直して anchor.png

「開眼!JavaScript」という書籍で紹介されていた例を参考にして書き直した。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
-
-
|
!
!
 
-
|
!
 
 
-
|
!
 
 
 
 
 
 
 
share = function(){
  this.say = function(){
    console.log("this is "+this.name);
  }         
}           
            
class00 = function(){
  this.name = "taro";
}           
class00.prototype = new share();
                       
class01 = function(){  
  this.name = "jiro";  
}                      
class01.prototype = new share();
                       
c0 = new class00;      
c0.say(); //this is taro
                       
c1 = new class01;      
c1.say(); //this is jiro

わかりやすい。しかし、さっきの方法とどこが違うのがよくわからんなあ。

Page Top

setPrototypeOfを使う方法 anchor.png

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
-
|
!
 
-
|
!
 
 
-
|
!
 
 
 
 
 
 
 
share = function(){}
share.prototype.say = function(){
  console.log("this is "+this.name);
}
 
class00 = function(){
  this.name = "taro";
}
Object.setPrototypeOf(class00.prototype, share.prototype);
      
class01 = function(){                   
  this.name = "jiro";                   
}                                       
Object.setPrototypeOf(class01.prototype, share.prototype);
      
c0 = new class00;    
c0.say(); //this is taro                
                                        
c1 = new class01;                       
c1.say(); //this is jiro

なんか複雑になった。でもなんとなく確実な仕事をしてるっぽいぞ。

Page Top

クラスを使わないのであれば anchor.png

クラスを使わず、単にオブジェクトをマージするだけであれば、jqueryのextendを使えば楽勝。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
-
-
|
!
!
 
-
|
!
 
 
-
|
!
 
 
 
 
 
share = {
  say : function(){
    console.log("this is "+this.name);
  }
}
 
obj00 = {
  name : "taro"
}
$.extend(true, obj00, share); 
 
obj01 = {
  name : "jiro"
}
$.extend(true, obj01, share); 
 
obj00.say(); //this is taro
 
obj01.say(); //this is jiro
Page Top

ES6ではこうやるらしい anchor.png

extendsが使えるからわかりやすそうな気がするけど、子クラスのコンストラクタにsuper()が必要だったり、メンバ変数を関数の中で定義しなきゃいけなかったりと謎ルール満載の予感。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
 
 
-
-
|
!
!
 
-
-
|
|
!
!
 
-
-
|
|
!
!
 
 
 
 
 
 
#!/Usr/bin/env node
 
'use strict'
 
class share {
  say(){
    console.log("this is "+this.name);
  }
}
 
class class00 extends share{
  constructor(){
    super();
    this.name = "taro";
  }
}
 
class class01 extends share{
  constructor(){
    super();
    this.name = "jiro";
  }
}
 
let c0 = new class00();
c0.say(); //this is taro
 
let c1 = new class01();
c1.say(); //this is jiro

トップ   凍結 差分 バックアップ 複製 名前変更 リロード   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom
Counter: 9, today: 1, yesterday: 0
最終更新: 2016-11-26 (土) 14:38:43 (JST) (302d) by admin

twitter検索
検索ワード:継承がよくわからん
* 継承出来るプリズムジャンプの仕様がよくわからん…PRコウジにSRデビューコウジのはちみつキッス覚えさせられないのなんでや🤔
* パズドラの新しい継承よくわからんがデザイン超好き!!!テンション上がる!
* ジャンプ継承したらカケルのファーストクラス復活するかなって思ったけどできなくて基準がよくわからん……
* 未だに何が正解かよくわからんけど… 対氷カチカチになる様にしてみた 初の魔石継承(o´・ω-)b https://t.co/NUkcdalhaj
* 型ネストした時の継承周りの挙動がよくわからん問題, とりあえず報告あげた.

(c) 2017 xxxs500