関数をクラスとして利用する

JavaScript では、PHP のような class 定義はありませんが、new を使って新しい関数をオブジェクト生成することでクラスとして使うことができます。
生成したオブジェクトのプロパティやメソッドもちゃんと利用できます。

クラスの定義と this の使い方

クラスの定義と this の使い方のサンプルを用意しました。ソースコードを見ながら、this の使い方を理解してください。
サンプル: クラスのサンプル

クラスと this の使い方のサンプルソースコード

class_test(){・・・・} は、「ここをクリック」をクリックしたときに実行される関数です。class_test(){・・・・} 内で、new を使い 関数 test_this(){・・・・} を this1 というオブジェクトとして生成します。これで、test_this(){・・・・} は、クラスとして利用できます。
this は、使われている場所のオブジェクト自身をあらわす変数です。test_this(){・・・・} 内で使っている、this は、先ほど生成したオブジェクト this1 から呼ばれると、this1 として解釈されます。
ところが、関数 func_no_this 内の this は、オブジェクト this1 からではなく関数 func_no_this として呼ばれています。この場合の this は、window オブジェクトになりますので、this.this1 は定義されていませんので "undefined" となります。
クラス内の関数をオブジェクトのメソッドとして呼ぶ場合は、無名関数を変数に代入する方法を使い this.func_this = function() {・・・・} のように変数の頭に this をつけます。func_this = function() {・・・・} は、function func_this() {・・・・} と同じことですが、this をつける場合は、function this.func_this() {・・・・} では上手くいきません。this.func_this = function() {・・・・} としてください。this.func_this は、オブジェクト this1 のメソッドとして this1.func_this() のように呼ぶことができます。直前に変更した this1.var1 = "変数変更" と変更した値は、this.func_this 内の this1.var1 に適用されます。
ちなみに、オブジェクトのプロパティも変数ですので、うっかり予約語使うと JavaScript の動作がおかしくなります。this1.var ( var は、予約語 )を使った場合、Firefox ではちゃんと動作しましたが、IE6 では、JavaScript が全く動作しませんでした。半日かかってこのことに気づき、this1.var1 と変更したら、IE6 でも正常に動作するようになりました。

js_class.js のソースコード

//JavaScript での クラスとthis の確認

function test_this(){
    this.var1="test_thisの変数";
    document.getElementById('span1').innerHTML=this.var1;
    //func_this(this);
    //this 確認用関数
    func_no_this = function() {
        //alert(this.var1); テスト表示用
        document.getElementById('span2').innerHTML=this.var1;
    }
    //クラスのメソッドで呼ぶときは 無名関数に this.をつける
    this.func_this = function() {
        //alert(this.var1); テスト表示用
        document.getElementById('span3').innerHTML=this.var1;
    }
}

function class_test(){
    //クラスのオブジェクトを作る
    var this1=new test_this();
    this1.var1 = "変数変更";
    func_no_this();//関数を呼ぶ
    this1.func_this();//クラスのメソッドを呼ぶ
}

上記ジャバスクリプトを実行する HTML ファイルです。

js_class.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js_class.js"></script>
<title>JavaScript での クラス定義 の確認</title>
</head>
<body>

クラス定義した test_this() 内で、this.var1="test_thisの変数"を定義<br>
<br>
関数 test_this() 内の this.var1 を表示<br>
 ”<span id='span1'>this.var1</span>”<br>
<br>
this のついていない func_no_this() 内の this.var1 を表示<br>
 ”<span id='span2'>this.var1</span>”<br>
<br>
this.func_this() を呼ぶ前に this1.var="変数変更"に変更してから関数内の this.var1 を表示<br>
 ”<span id='span3'>this.var1</span>”<br>
<br>
<a href="#" onclick="class_test()">ここをクリック</a><br>

</body>
</html>

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > JSのクラス