2014-10-28

2014-10-28

オブジェクト・メソッド・プロパティAdd Star

 

 

オブジェクトとは

  • 文字列や数値、関数などJavaScriptで扱うデータは、すべてオブジェクトです
  • オブジェクトは「プロパティ」と「メソッド」を持っている
  • JavaScriptのオブジェクトとは、キーと値の集合体のことです
  • 連想配列は、オブジェクトの別名です
  • オブジェクトでは、「数値や文字列などを値としてもつ要素 = プロパティ」
  • オブジェクトでは、「関数 = メソッド


《オブジェクトの作成》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>オブジェクトの作成</title>
<script>
var obj = {
    name: 'よしお',
    greet: function(){ console.log('はじめまして'); }
};
  obj.greet();
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130524191816j:image

 

  • 要素の値として関数を指定することでメソッドで作成できます
  • このとき関数名が必要なことは殆ど無いので、匿名関数で記述します
  • メソッドを呼び出すには、関数名の代わりにキーを指定します


メソッドの作成》

 

 

var オブジェクト名 = { キー:関数, … };

 

 


メソッドの呼び出し》

 

 

var オブジェクト名 . キー

 

 


thisキーワード

  • オブジェクトの中では、thisというキーワードは自分自身のオブジェクトのことを指します
  • あるメソッドの中で、自分が所属するオブジェクトがもつ別のメソッドやプロパティを利用したいばいい、先頭に「this」をつけて使います

《オブジェクトの中でthisキーワード》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>オブジェクトの中でthisキーワード</title>
<script>
var obj = {
    name: 'よしお',
    greet: function(){
      console.log(this.name + 'です、はじめまして');
}
};
  obj.greet();
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130524192209j:image

 

  • thisキーワードが表すのは objオブジェクトなので、this.name は obj.name と記述したのと同じことになります

別のオブジェクトのメソッドを利用する

  • メソッドはオブジェクトの所有物なので、通常、他のオブジェクトが使う(呼び出す)ことはできません
  • そこで、あるオブジェクトから別のオブジェクトのメソッドを呼び出す「callメソッド」という特殊なメソッドが用意されています

《callメソッド

 

 

メソッドを所有するオブジェクト . メソッド名 . call( メソッドを借りるオブジェクト );

 

 


《callメソッドの利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>callメソッドの利用</title>
<script>
var obj1 = {
    name: 'よしお',
    greet: function(){
      console.log(this.name + 'です、はじめまして');
}
};
var obj2 = {
    name: 'ユリ子'
};
  obj1.greet.call(obj2);
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130525161348j:image

 

obj1.greet.call(obj2);

  • メソッドを借りている間は、所有権も借りている人に映るというイメージ




《引数のあるメソッドをcallメソッドで呼び出す》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>引数のあるメソッドをcallメソッドで呼び出す</title>
<script>
var obj1 = {
    name: 'よしお',
    greet: function(age, from){
      console.log(this.name + 'です、はじめまして');
      console.log('年齢は' + age + '歳です');
      console.log('出身地は' + from + 'です');
}
};
var obj2 = {
    name: 'ユリ子'
};
  obj1.greet.call(obj2, 6, 'アメリカ');
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130525162549j:image

 




《applyメソッドの利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>applyメソッドの利用</title>
<script>
var obj1 = {
    name: 'よしお',
    greet: function(age, from){
      console.log(this.name + 'です、はじめまして');
      console.log('年齢は' + age + '歳です');
      console.log('出身地は' + from + 'です');
}
};
var obj2 = {
    name: 'ユリ子'
};
var param = [6, 'アメリカ'];
  obj1.greet.apply(obj2, param);
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130525162917j:image