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

オブジェクトとは

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

《オブジェクトの作成》

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

《実行結果》

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

《メソッドの作成》

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

《メソッドの呼び出し》

var オブジェクト名 . キー

thisキーワード

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

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

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

《実行結果》

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

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

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

《callメソッド》

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

《callメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>

《実行結果》

メソッドの所有者「obj1」、メソッドを借りる人「obj2」

obj1.greet.call(obj2);

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>

《実行結果》

《applyメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>

《実行結果》

オブジェクトは内部にプロパティとメソッドを持つ
関数を値として持つ要素をメソッドと呼ぶ
メソッドは call や apply メソッドによって貸し借りができる