JavaScript + Ajax 実践サンプル集 - prototypeを利用してメソッドを追加する

prototypeを利用してメソッドを追加する

説明補足説明コード関連書籍コメント投稿

このサンプルは、JavaScriptのPersonクラスにprototypeを利用してメソッドを追加します。prototypeを利用すると複数のインスタンスでメソッドを共有することができますのでメモリを節約できます。

function Person(id, name) {
  this.id = id;
  this.name = name;
  this.age = -1;
  this.gender = 'male'; 
}
// print()メソッド
Person.prototype.print = function() {
  return this.id + ', ' + this.name + ', ' + this.age + ', ' + this.gender;
}
// log()メソッド
Person.prototype.log = function() {
  if (typeof console != 'undefined') {
    console.log(this.print());
  } else {
    alert(this.print());
  }    
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>JavaScript- prototype</title>
  <script type="text/javascript">
    function Person(id, name) {
      this.id = id;
      this.name = name;
      this.age = -1;
      this.gender = 'male';  // male, female
    }
    Person.prototype.print = function() {
      return this.id + ', ' + this.name + ', ' + this.age + ', ' + this.gender;
    }
    Person.prototype.log = function() {
      if (typeof console != 'undefined') {
        console.log(this.print());
      } else {
        alert(this.print());
      }    
    }
    
  </script>
</head>
<body>

var author1 = new Person(1, 'Taro');
  var author2 = new Person(2, 'Hanako');
  author1.age = 25;
  author2.age = 23;
  author2.gender = 'female';
  
  document.write(author1.print(), '<br />');
  document.write(author2.print(), '<br />');

author1.log();
  author2.log();

</script>

</body>
</html>