JavaScriptのオブジェクト指向

JavaScriptのオブジェクト指向について簡単にまとめました。

Javaで言うクラスはfunctionを使って定義します。nameはプロパティです。

var Sample = function(name){
  this.name = name;
}

デモの全ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
<script type="text/javascript">
var Sample = function(name){
  this.name = name;
}
var sample = new Sample('taro');
alert(sample.name);
</script>
</head>
<body>

</body>
</html>

デモです。

Javaと同様にメソッドも作成できます。

var Sample = function(name){
  this.name = name;
}
Sample.prototype.info = function(){
  alert(this.name);
}

関数には自動でprototypeプロパティが生成されます。

デモの全ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
<script type="text/javascript">
var Sample = function(name){
  this.name = name;
}
Sample.prototype.info = function(){
  alert(this.name);
}
var sample = new Sample('taro');
sample.info();
</script>
</head>
<body>

</body>
</html>

デモです。

以下でもメソッドは作成できます。メモリを食うために推奨されません。

var Sample = function(name){
  this.name = name;
  this.getName = function(){
    return this.name;
  }
}

デモの全ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
<script type="text/javascript">
var Sample = function(name){
this.name = name;
this.getName = function(){
return this.name;
}
};

var sample = new Sample('taro');
alert(sample.getName());
</script>
</head>
<body>

</body>
</html>

デモです。

callメソッド

JavaScriptの関数は共通でcallメソッドを持っています。第一引数にはグローバル変数を渡します。以下のように、関数名.callとして使用します。

var Sample = function(name){
this.name = name;
alert(this.name);
}
Sample.call(window,'taro');

callメソッドの第一引数はnullにしても暗黙的にグローバルオブジェクトが指定されます。

デモの全ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
<script type="text/javascript">
var Sample = function(name){
this.name = name;
alert(this.name);
}
Sample.call(window,'taro');

</script>
</head>
<body>

</body>
</html>

デモです。