忍者ブログ

27Apr

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20Jun

オブジェクト指向

Posted by No Name Ninja in 書式

Javascriptのオブジェクト指向です。
●STEP1・・・クラス定義
SAMPLE

<script language="javascript" type="text/javascript">

function Dog(name,speed,bark){
  this.name = name;
  this.speed = speed;
  this.bark = bark;

  this.barking = function(){
    alert(this.name + ' is barking "' + this.bark + '"');
  }

  this.running = function(){
    alert(this.name + ' is runnning "' + this.speed + '"');
  }
}

var dog1 = new Dog('Taro',100,'わをーん');
var dog2 = new Dog('Jiro',90,'わんわん');

</script>

name,speed,barkというプロパティ、そしてbarking、runnningというメソッドを提供している。
プロパティのスコープは「public」、つまり外部からも参照可能。
dog1.name・・・・・Taro
dog2.name・・・・・Jiro
publicにするか否かは「this.」をつけるか否かで決まる。



●STEP2・・・クラス定義せず、オブジェクトをそのまま作成してしまう。
一度しか使わないオブジェクトであれば、クラス定義をせず、そのままオブジェクトを作成できます。(オブジェクトリテラル)
SAMPLE

<script language="javascript" type="text/javascript">

var greeting = {
  greeting:'Good morning',
  name:'taro',
  sayGreeting:function(){
    alert(this.greeting + ',' + this.name);
  }
};

</script>

クラス定義と書式がかなり異なる。


●STEP3・・・プロパティを外部からアクセスできないようにする。(private)
SAMPLE

<script language="javascript" type="text/javascript">

function Dog(name,speed,bark){
  var name = name;
  var speed = speed;
  var bark = bark;


  this.barking = function(){
    alert(name + ' is barking "' + bark + '"');
  }

  this.running = function(){
    alert(name + ' is runnning "' + speed + '"');
  }
}
var dog1 = new Dog('Taro',100,'わをーん');
var dog2 = new Dog('Jiro',90,'わんわん');

</script>

「this.」から「var 」に変更するだけ。外部から参照できなくなる。
外部からアクセスさせたい場合は、getterメソッドを追加すればよい。


●STEP4・・・クラス、オブジェクトを拡張する。
Javascriptでは、定義済みのクラスやオブジェクトに対して、プロパティやメソッドを追加できる。
SAMPLE

<script language="javascript" type="text/javascript">

function Dog(name,speed,bark){
  var name = name;
  var speed = speed;
  var bark = bark;

  this.barking = function(){
    alert(name + ' is barking "' + bark + '"');
  }

  this.running = function(){
    alert(name + ' is runnning "' + speed + '"');
  }
}

Dog.prototype.walking = function(){
      alert('walking');
}


var dog1 = new Dog('Taro',100,'わをーん');
dog1.stopping = function(){
  alert('stopping');
}

var dog2 = new Dog('Jiro',90,'わんわん');

</script>




●STEP5・・・クラスを継承する。
多言語と同様、クラスを継承することができるが、少々異なる。
SAMPLE

<script language="javascript" type="text/javascript">

function Greeting(greeting){
  this.greeting = greeting;

  this.getGreeting = function(){
    return greeting;
  }
}

function GoodMorning(greeting,who){
  //applyの第二引数は親クラスのコンストラクタの引数。argumentsとすると、引数をそのまま全部渡す。
  //Greeting.apply(this,arguments);
  Greeting.apply(this,[greeting]);

  this.who = who;
  this.sayGreeting=function(){
    //apply実施後は、thisで親のメソッドやプロパティを呼び出すことができる。
    alert(this.getGreeting() + ',' + this.who);
  }
}

</script>

applyで継承する。第二引数に親クラスのコンストラクタの引数を配列で渡す。(argumentsを指定するとサブクラスで受け取った引数をそのまま全部渡す。)
課題)
参考文献によるが、applyと組み合わせて以下も実施しておいた方が良いと書いているところもある。
GoodMorning.prototype = new Greeting();
ただ、動きに大きな違いは見られなかった。本件については、保留

PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback