1:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:37:27.303 ID:oYBD3qFhp.net
プログラマかjavascriptわかる奴ちょっと来い
インスタンスとコンストラクタの関係性分かりやすく教えろ
というかnewの使い所が分かんない
2:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:38:57.974 ID:XVSd5obT0.net
Javaしか知らんが来たぞ
12:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:42:42.573 ID:oYBD3qFhp.net
>>2
教えてくださいプログラマ様！！
3:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:38:59.871 ID:0v/8eojSd.net
お前なんだその口の聞き方は？
教えてやろうと思ったけど止めた
自分で考えるんだな
8:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:40:20.746 ID:oYBD3qFhp.net
>>3
お願いします教えてくださいエッチな画像貼るから教えてください！！
newってなんなんだよ...
4:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:39:05.843 ID:MQZWNUHtM.net
オブジェクトやで～
6:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:39:42.813 ID:JdnCHm8B0.net
コンストラクタによりインスタンスを生成する
15:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:44:37.592 ID:R8R4ooTX0.net
インスタンスは召喚、コンストラクタは召喚した時に付加効果をつけるみたいな
17:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:45:56.537 ID:oYBD3qFhp.net
>>15
大元がいてそっから能力だけ色々変えたい時にインスタンスとして呼び出すみたいな？
16:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:44:51.793 ID:HHH458M3p.net
知らなくてもいじれるから気にすんな
22:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:51:57.997 ID:oYBD3qFhp.net
>>16
人に説明できないから困る
function hage(usui ){
this.usui=usui;
}
var hagehage = new hage('kaminoke');
console.log('hagege');
これnewなかったらどうなんの？
25:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:56:00.333 ID:JdnCHm8B0.net
>>22
newがなかったらthisにアクセスできないんじゃね？
28:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:58:24.014 ID:lalGPdiq0.net
>>22
hage(usui)は値をreturnしていないので、hagehageはundefinedになる
それはそうとそれだと'hagege'がログ出力されるぞｗ
console.log(hagehage)じゃねーのかｗ
37:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:03:58.999 ID:oYBD3qFhp.net
>>28
あ、ごめん
間違えたダブルクォーテーションいらないし変数名も間違ってるわ
20:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:48:49.997 ID:R8R4ooTX0.net
大元と言うかモンスター(クラス)という概念があるとして、それが召喚(インスタンス化)することによって実体を持って現れる
コンストラクタは儀式みたいな感じ
27:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 14:58:19.581 ID:oYBD3qFhp.net
>>20
てことは別に全く同じ性能見た目のドラゴン作りたいってだけならnewしなくてもそのまま呼んじゃえって事でいいの？
33:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:01:23.907 ID:JdnCHm8B0.net
>>27
全然違うな
そして文章が分かりにくいな
インスタンスのことを言ってるのか、コンストラクタのことを言ってるのかさっぱり分からん
それぞれについてどう理解しているか書いてみろ
インスタンス
コンストラクタ
37:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:03:58.999 ID:oYBD3qFhp.net
>>33
コンストラクタ 設計図
インスタンス その設計図から作った物
43:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:06:22.084 ID:JdnCHm8B0.net
>>37
まあ合ってるな
そこから>>27の理解になる経緯が分からんからその辺り説明しろ
34:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:02:03.781 ID:oEeiMI6+K.net
クラス→設計図
インスタンス→実物
new→設計図を元に実物を作る
コンストラクタ→newすると必ず実行される
人間の設計図をもとに、人間をつくるとき
全裸の人間が発生しないように、コンストラクタでパンツを設定する
みたいな感じ？
36:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:03:01.626 ID:R8R4ooTX0.net
>>34
そんな感じ
39:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:05:15.218 ID:j9+6hAOSd.net
classをnewするとコンストラクタが動いてインスタンスが出来る
44:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:06:48.639 ID:oYBD3qFhp.net
>>39
jsってクラスないじゃん？
51:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:10:36.089 ID:lalGPdiq0.net
「コンストラクタ」とかかっこいい名前ついてるけど、所詮は単なる関数なんだよ
関数にコンストラクタとしての機能を持たせるのは「new」の役割
で、その「new」の役割が何かっていうと、「独立した呼び出しスタック上で関数を実行する」もの
「オブジェクトを作って、そこに関数内の計算の途中結果を保存できるようにする」とでも考えると解り易い
でも単に保存しただけだと外から使う事ができないので、「this.property = なんとか」という形で外部から読み取れるようにする
おｋ？
54:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:13:49.635 ID:oYBD3qFhp.net
>>51
全然おkじゃねえ...
コンストラクタとしての機能ってなんぞ
57:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:17:38.858 ID:lalGPdiq0.net
>>54
2行目の「コンストラクタ」は「いわゆる（C++やJavaでいうところの）コンストラクタ」って意味な
「（JavaScriptにおける）コンストラクタ」と『独立した呼び出しスタック上で関数を実行する」もの』は同値だ
この辺国語の授業の内容だからな
61:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:24:03.562 ID:oYBD3qFhp.net
>>57
まじでその国語の授業についていけてねえのか俺
言い回しが独特で分かりにくい
そもそも最初にやり始めた時に「値を返す」って書かれてて「返すってなんだよ...ていうか返したからなんなんだよ」ってとこでつまづいた
62:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:28:05.672 ID:lalGPdiq0.net
>>61
そうか……そのレベルだったのかすまん
とりあえず、「普通の関数」の動作はこうだ：
function hoge(a) {
var piyo = ...; ←「piyo」という変数を作成
} ←勝手にpiyoは消える
なので、関数の結果を求めたければこうする：
function hoge(a) {
var piyo = ...; ←「piyo」という変数を作成
return piyo; ←インスタンスを「返す」
} ←勝手にpiyoは消える（インスタンスは消えないので、var x = hoge(0)のようにすればxにインスタンスが設定される）
とりあえずここまでおｋ？
68:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:34:45.481 ID:oYBD3qFhp.net
>>62
おぉこれはわかる
そこまではおk
71:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:41:16.135 ID:lalGPdiq0.net
>>68
次に、thisというキーワードをつけてみる
function hoge(a) {
this.piyo = a;
}
ところで、「this」というのは「a.b()」みたいにした時、bから見たaのことだ
そして「hoge(0)」というのは実は「window.hoge(0)」の省略形なので、
「hoge(0)」を実行した後は「window.hoge」がaの値……すなわちこの場合は0になってる
ちょっと一気に難易度が上がったかここまで大丈夫か？
73:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:48:04.969 ID:lalGPdiq0.net
>>71ごめんミス
0になってるのはwindow.piyoだな
74:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:52:23.706 ID:oYBD3qFhp.net
>>73
動かしてみて理解した！
77:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:58:15.159 ID:lalGPdiq0.net
>>74
よしじゃあ次に本題の「new」いくぜ
さて、newをつけた「new hoge(0)」は「window.hoge(0)」の省略形ではなくなる
厳密には内部で変な事もいろいろやってるが、何か新しいオブジェクトを作り、それをthisとする
すなわち、
var x = hoge(0); ←これは「var x = window.hoge(0);」と同じ
var y = new hoge(0); ←これは「var y = {}; y.hoge(0);」とほぼ同じ（実際にはこの書き方は不可）
ちゃんと動くようにyを書き直すなら、
var y = {};
hoge.call(y, 0); ←callはFunction型のメソッドで、f.call(a, b, c, ...);と書くと「aをthisとしてf(b, c, ...)を呼ぶ」という機能
ちなみに{}はnew Object()の省略形
なんかnewを説明する中にnewが出てきてわけわからん事になってるが、
Object型は特殊な型なのでこれ以上気にする必要はない（っていうか気にすると無限ループにハマる）
82:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:07:39.476 ID:oYBD3qFhp.net
>>77
function hoge(a){
this.piyo = a; ←ここの「this」はグローバルオブジェクト(window)
}
new hogeしたら上のthisはhogeを指す
こういうこと？
84:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:09:35.822 ID:lalGPdiq0.net
>>82
var x = hoge(0);の場合は「this==window」でおｋ
new hoge()の場合はvar y = {};とした場合のyだよ
89:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:21:38.386 ID:oYBD3qFhp.net
>>84
あ、これは分かったかも知れん
function hoge(a){
this.piyo = a;
}
var x = new hoge(5)
var y = new hoge(10)
var z = hoge(15)
console.log(x.piyo) //5 newすると関数オブジェクト内のthisはインスタンスを指すから5
console.log(y.piyo) //10 同上
console.log(z.piyo) //newしないと関数オブジェクト内のthisはグローバルオブジェクトを指すから参照できない
90:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:25:25.316 ID:lalGPdiq0.net
>>89
おｋ
var y = {};
hoge.call(y, 0);
っていう意味がこれでわかったなら、後はID:g5haHuus0がJavaScriptの闇に招待するぞ
この「y = {}」の「{}」の部分を変化させる方法だ
今知る必要はないかもしれんが、必ずどっかで出てくるので読み物程度に流しとけ
53:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:12:23.166 ID:7xMXFwbo0.net
JavaかC++をきっちりマスターしてオブジェクト指向なんたるかを会得するべきだな
javascriptは半ば擬似的にオブジェクト指向同等のものを実現できるというだけなので
コンストラクタとかは使う方はいざ知らず作る方はあまり重要ではないと思われ
56:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:15:59.439 ID:oYBD3qFhp.net
>>53
やっぱそうなのか
このオブジェクト指向ってのさっぱりだ
60:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:23:15.712 ID:JdnCHm8B0.net
ブラウザがオブジェクト指向の言語で作られているとしたら
ボタンを表すButtonクラスとか、フォームを表すFormクラスが定義される
Buttonクラスの属性としてボタンのテキストや色だったり、押したときに呼び出すアクションがあり
Formクラスの属性として縦と横の幅とかがある
ボタンを含むページを表示するときはButtonクラスのインスタンスであるButtonオブジェクトを生成する
このときnew Buttone("送信", submit)だったりnew Buttone("クリア", clear)みたい記述する
63:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:28:18.097 ID:oYBD3qFhp.net
>>60
これは理解出来る
なるほどなるほど
64:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:28:24.666 ID:JdnCHm8B0.net
Buttonクラスにはコンストラクタが定義されていて
new Button("送信", submit)を実行するとButtonクラスのコンストラクタが呼び出される
そのときに"送信"とsubmitが引数として渡される
コンストラクタは受け取った引数と属性にセットする
68:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:34:45.481 ID:oYBD3qFhp.net
>>64
ボタンを作るための(クラス)があります。
実際のボタン(インスタンス)があります。
実際のボタンに色とか大きさとかを設定したいからボタンを作るときに属性を設定する機能(コンストラクタ)を呼びます。
こういうこと？
69:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:37:45.503 ID:JdnCHm8B0.net
>>68
コンストラクタがメモリの割り当てまで行う場合もあれば属性の設定だけの場合もある
プログラム言語によって違う
クラスはボタンを表すって表現のほうが適切
ボタンの動作も定義している
大雑把にコンストラクタはオブジェクトを生成するための処理を定義すると理解しときゃ十分だろ
70:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:39:47.454 ID:oYBD3qFhp.net
>>69
すげー多機能やん
なるほど少しずつ理解してきたぞ
クラスとコンストラクタってイコールかと思ってた
72:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:45:23.270 ID:JdnCHm8B0.net
>>70
オブジェクト指向プログラミングはクラスを組み合わせて作るからな
クラスにコードを記述して
そこから生成したオブジェクトが動いていろいろ起きるって感じだ
クラス、オブジェクト、コンストラクタが分かればオブジェクト指向の第一歩だ
74:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:52:23.706 ID:oYBD3qFhp.net
>>72
むずい
入り口でこれか
勉強あるのみだな
78:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:00:07.028 ID:JdnCHm8B0.net
>>74
オブジェクト指向は難しいぞ
オブジェクト指向プログラムの設計を正しく行おうとしたら
最低でも数年の勉強と経験が必要
ちゃんと理解しないでプログラマやってる連中なんで腐るほどいるけどな
75:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 15:55:46.589 ID:/RFxb1n/0.net
職業プログラマが来たけどもう解決したみたいだな
83:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 16:08:37.885 ID:Umwod/JJ0.net
何が難しいってjavascriptだとコンストラクタもnewも別に必須じゃないってことなんだよな
これがjavaとかだったら避けて通れない道だから説明もしやすかった訳だが
110:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 17:03:48.406 ID:oYBD3qFhp.net
プログラマからの人ってjs嫌いってよく言ってる
112:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 17:05:45.167 ID:BX92P5mtp.net
>>110
昔ブラウザがクソなせいてJavaScript嫌われてたからな
そっから触ってない人だろ
うちはウェブ系じゃないけど好きな人何人かいるよ
俺も好きだし
123:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 17:41:10.818 ID:Qf+trYsu0.net
コンストラクタ→オブジェクトが作られる前に初期値設定が必要な変数などがあるときに使うもの
インスタンス→アドレスのようなものいわばオブジェクトの設計図
new→インスタンスを作る合言葉
ってjavaの時習った
126:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 17:49:11.520 ID:oYBD3qFhp.net
これってクラスの使い道分かってて初めて使い所が出てくるってことなの？
129:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 17:52:18.341 ID:g5haHuus0.net
>>126
JavaScriptにクラスって概念がそもそもないんよ……
JavaScriptにおいてクラスと似たようなものが、プロトタイプなんすよ
141:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 18:17:04.328 ID:oYBD3qFhp.net
prototypeは動的な値がどんどん入ってきつつ新しいオブジェクトを量産するってイメージなのかな？
147:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 18:32:27.840 ID:lalGPdiq0.net
>>141
プロトタイプというのは、本来はオブジェクトに指定されたプロパティがない場合のフォールバックを指定する機能
例えば、
function A() { this.hoge = 10; }
var a = new A();
console.log(a.hoge); // 10
これは当たり前
function B() { } // ← this.hoge を設定していない
var b = new B();
console.log(b.hoge); // undefined
これも当たり前
でも、
function C() { } // ← this.hoge を設定していない
C.prototype.hoge = 10;
var c = new C();
console.log(c.hoge); // hogeがないので C.prototype.hoge を見に行って 10
さらにどんどんややこしくすると、
function D() { } // ← this.hoge を設定していない
function E() { } // ← this.hoge を設定していない
D.prototype = new E();
E.prototype.hoge = 10;
var d = new D();
console.log(d.hoge); // hogeがないので D.prototype.hoge を見に行ったけどやっぱりないのでE.prototype.hoge を見にいって 10
148:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 18:39:48.476 ID:oYBD3qFhp.net
>>147
おぉこれは分かりやすい
ただじゃあ実際にどういう場面でと言われると体験してみないと今の所思いつかないな
これはnewも同じだけど
150:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 18:47:17.095 ID:JdnCHm8B0.net
>>148
デフォルトの動作を指定するとかかねえ
入力がもれていたら「項目に入力して下さい」ってメッセージ出すとか
138:以下、＼(^o^)／でVIPがお送りします 2015/05/26(火) 18:04:02.151 ID:oYBD3qFhp.net
まじで感謝っす
少なくともオブジェクト指向の根本とその周辺の概念理解できたのがかなり大きい
ずーっと詰まってたし
元スレ：http://viper.2ch.sc/test/read.cgi/news4vip/1432618647/