new演算子のメリット・便利さは何でしょうか。

解決済

質問者：kiseki777
質問日時：2011/11/13 04:29
回答数：2件

javascriptのnew演算子（コントラスタとインスタンス）はどんなときに役立ちますか？

function Member1とfunction Member2を比較した場合
<script type="text/javascript">
function Member1 (firstName, lastName) {
return lastName + "　" + firstName;
}
document.writeln(Member1('氏名', '名字')); // 「名字　氏名」と表示

//ここより下は参考書より
var Member2 = function(firstName, lastName){
// thisはコンストラクタによって生成されるインスタンスを表す
//this.プロパティ名 = 値；として記述する
this.firstName = firstName; //firstNameというプロパティを生成
this.lastName = lastName; //lastNameというプロパティを生成
this.getName = function(){
return this.lastName + "　" + this.firstName;
}
};
var mem = new Member2('氏名', '名字'); //オブジェクトの初期化
document.writeln(mem.getName()); // 「名字　氏名」と表示
</script>

function Member1のような通常の方法でできることを、
なぜfunction Member2のようにnew演算子を使うのか、
そうすることで、どんなメリット・便利さがあるのかと思いました。
いろいろ調べたのですが解決できず、ご教示を頂こうと思いました。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： hitomura
回答日時：2011/11/13 05:55

大雑把に言うと、「これでひとまとまりのデータとそのデータに対する処理をまとめて扱えるから」です。

この例で言うと、たとえば
　鈴木太郎
　菊池武
というような表示を、変数に入れた値を使って行う場合

Member1:
var suzuki_family = '鈴木';
var suzuki_first = '太郎';
var kikuchi_family = '菊池';
var kikuchi_first = '武';
document.writeln(Member1(suzuki_family, suzuki_first));
document.writeln(Member1(kikuchi_family, kikuchi_first));

Member2:
var suzuki = new Member2('鈴木', '太郎');
var kikuchi = new Member2('菊池', '武');
document.writeln(suzuki.getName());
document.writeln(kikuchi.getName());

となります。
Member1のほうは'鈴木'という値が入ったsuzuki_familyと'太郎'という値が入ったsuzuki_firstとは別の変数で、その関連を示すものは変数名だけです。それに対してMember2では'鈴木'という値と'太郎'という値がセットになっています。どちらが扱いやすいかは明らかにセットになっているMember2のほうです。

上のように短いプログラムだとその恩恵がピンと来ないかもしれませんが、ある程度以上の規模のプログラムだとこのように関連のあるデータをひとつにまとめる仕組みがないと混乱してきます。このあたりはオブジェクト指向を勉強して……と本当はいいたいのですが、はっきりいってその辺の勉強ははまると大変なので、「データをまとめて持っていられると楽になるよ、ついでにそのデータに関する操作はそのデータ自身にやらせようよ」くらいに考えておいてください。

- 0
- 件

通報する

この回答へのお礼

奥が深いですね。大変参考になりました。有難うございます。

通報する

お礼日時：2011/12/22 22:48

No.2

回答者： babu_baboo
回答日時：2011/11/13 22:00

<!DOCTYPE html>

<html lang="ja">
<title></title>
<meta charset="utf-8">

<body>
<ol>
　<li>
　　<input type="text" value="0" id="A">
　　<input type="button" value="start" onclick="sw0.start()">
　　<input type="button" value="stop" onclick="sw0.stop()">
　　<input type="button" value="reset" onclick="sw0.reset()">

　<li>
　　<input type="text" value="0" id="B">
　　<input type="button" value="start" onclick="sw1.start()">
　　<input type="button" value="stop" onclick="sw1.stop()">
　　<input type="button" value="reset" onclick="sw1.reset()">

　<li>
　　<input type="text" value="0" id="C">
　　<input type="button" value="start" onclick="sw2.start()">
　　<input type="button" value="stop" onclick="sw2.stop()">
　　<input type="button" value="reset" onclick="sw2.reset()">
</ol>

<script>
/*
ストップウオッチをつくりたい。
まずおもいつくのは、ぼたんがあったな。
たしか、start と stop と reset 。
えきしょうでぃすぷれーもひつようだな。
すくりぷととしては、たいまーしょりがひつようで、それをかんりするidがひつようだな。
それと「じかん」もかぞえなきゃ～
*/

function Stopwatch (dispNode) {
　this.disp = dispNode;
　this.timerId = null;
　this.count = 0;
　this.reset ();
　this.interval = 100; //ms
}

Stopwatch.prototype.reset = function () {
　this.disp.value = this.count = 0;
}

Stopwatch.prototype.stop = function () {
　(this.timerId) && clearInterval (this.timerId);
　this.timerId = null;
}

Stopwatch.prototype.start = function () {
　this.timerId || (this.timerId = setInterval (countup, this.interval, this));
}

function countup (that) {
　that.disp.value = ++that.count;
}

var sw0 = new Stopwatch (document.getElementById('A'));
var sw1 = new Stopwatch (document.getElementById('B'));
var sw2 = new Stopwatch (document.getElementById('C'));

//おぶじぇくとしこうとやらでつくると、かんたんにたくさんつくれるじゃん！
//ieだとうごかないよ、たぶん？
//ぜんかくくうはくは、はんかくにしてね
//もっとさいぶんかしたほうが（じょうたいのへんかとしてとらえるには）よいのでしょうが・・・
</script>