JavaScript定義クラスの詳細説明とclasses_javascriptスキルの実装例-jsチュートリアル-php.cn

JavaScript定義クラスの詳細説明とclasses_javascriptスキルの実装例

WBOY

リリース： 2016-05-16 15:28:29

オリジナル

989 人が閲覧しました

この記事の例では、JavaScript 定義クラスとクラスの実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

最近、クラス内の関数が定義後に公開されるメソッドをどのように呼び出すかを複数のグループで質問しているのをよく見かけます。今、クラスの実装に関するエッセイがあります。

まずクラスについて話しましょう。クラスには次のような特徴があります:

1. パブリックメソッド
2. プライベートメソッド
3. 属性
4. プライベート変数
5. デストラクター

例を直接見てみましょう:

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
}

ログイン後にコピー

ここにすべてのメモを書きましたので、おそらく誰でも一目で理解できるでしょう。 JS をほとんど書かない友人にとっては、なぜ _self 変数を定義するのか疑問に思うかもしれません。js では、これを他のオブジェクト言語で使用する必要がなく、解析および実行プロセス中に変更されるからです。ここでは js でのこれの定義について簡単に説明します。必要に応じてさらに記述します。

定義: これは、メソッドとして呼び出されたときに、それを含む関数が属するオブジェクトです。
特徴: 機能がさまざまなオブジェクトに割り当てられると、この環境が変化する可能性があります。

興味のある友人は、オンラインで情報を検索して詳細を学ぶことができます。トピックに戻りますが、ここでの _self の目的は、追加のプライベート変数を開いて、クラス自体への参照を直接指すことです。

先ほどデストラクターの問題について触れましたが、これはコードを使用して直接実装できます。関数の最後に実行コードを直接記述するだけです。

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
  /***析构函数***/
  var init = function(){
    privateMethod();
  }
  init();
}

ログイン後にコピー

このクラスを使用します

var c = new Class();
c.Method(); //使用方法

ログイン後にコピー

大丈夫です

JavaScript 自体はオブジェクト指向をサポートしておらず、アクセス制御文字を持たず、クラスを定義するキーワード class を持たず、継承のための extend やコロンをサポートせず、virtual をサポートするために virtual を使用しません。ただし、JavaScript は柔軟な言語です。class というキーワードを持たない Javascript がどのようにクラス定義を実装し、オブジェクトを作成するかを見てみましょう。

1: クラスを定義し、クラス

のインスタンスオブジェクトを作成します。

JavaScript では、次のように関数を使用してクラスを定義します。

function Shape()
{
var x=1;
var y=2;
}

ログイン後にコピー

疑うかもしれませんね?これは決定的な機能ではないでしょうか?はい、これは定義関数です。Shape 関数を定義し、x と y を初期化します。しかし、別の見方をすると、これは x と y の 2 つの属性を持つ Shape クラスを定義することになり、初期値はそれぞれ 1 と 2 になります。ただし、その定義に使用するキーワードは次のとおりです。 class はクラスではなく関数です。

次に、次のように、Shape クラスのオブジェクト aShape を作成できます。

コードをコピーコードは次のとおりです:

var aShape = new Shape();

2: パブリック属性とプライベート属性を定義する

aShape オブジェクトを作成しましたが、そのプロパティにアクセスしようとすると、次のようなエラーが発生します:

コードをコピーコードは次のとおりです:

aShape.x=1;

これは、var で定義されたプロパティがプライベートであることを示しています。このキーワードを使用してパブリック属性を定義する必要があります

function Shape()
{
this.x=1;
this.y=2;
}

ログイン後にコピー

このようにして、次のような Shape の属性にアクセスできます。

コードをコピーコードは次のとおりです:

aShape.x=2;

上記のコードに基づいて要約すると、var を使用してクラスのプライベート属性を定義し、this を使用してクラスのパブリック属性を定義します。

3: パブリックメソッドとプライベートメソッドを定義する

JavaScript では、関数は Function クラスのインスタンスであるため、関数はオブジェクトでもあります。したがって、代入メソッドを使用して関数を作成することもできます。関数をクラスに割り当てると、この属性変数は実行可能な関数であるため、メソッドを呼び出すことができます。コードは次のとおりです:

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

ログイン後にコピー

上記のコードで描画を定義し、それに関数を割り当てました。次に、次のように、OOP ではパブリックメソッドと呼ばれる aShape を通じてこの関数を呼び出すことができます。

コードをコピーコードは次のとおりです:

aShape.draw();

var で定義されている場合、描画はプライベートになります。これは、OOP ではプライベートメソッドと呼ばれます (
など)。

function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}

ログイン後にコピー

这样就不能使用aShape.draw调用这个函数了。

三：构造函数

Javascript并不支持OOP，当然也就没有构造函数了，不过，我们可以自己模拟一个构造函数，让对象被创建时自动调用，代码如下：

function Shape()
{
var init = function()
{
//构造函数代码
};
init();
}

ログイン後にコピー

在Shape的最后，我们人为的调用了init函数，那么，在创建了一个Shape对象是，init总会被自动调用，可以模拟我们的构造函数了。

四：带参数的构造函数

如何让构造函数带参数呢？其实很简单，将要传入的参数写入函数的参数列表中即可，如

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}

ログイン後にコピー

这样，我们就可以这样创建对象：

复制代码代码如下:

var aShape = new Shape(0,1);

五：静态属性和静态方法

在Javascript中如何定义静态的属性和方法呢？如下所示

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}
Shape.count=0;//定义一个静态属性count，这个属性是属于类的，不是属于对象的。
Shape.staticMethod=function(){};//定义一个静态的方法

ログイン後にコピー

有了静态属性和方法，我们就可以用类名来访问它了，如下

alert ( aShape.count );
aShape.staticMethod();

ログイン後にコピー

注意：静态属性和方法都是公有的，目前为止，我不知道如何让静态属性和方法变成私有的

六：在方法中访问本类的公有属性和私有属性

在类的方法中访问自己的属性，Javascript对于公有属性和私有属性的访问方法有所不同，请大家看下面的代码

function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//访问私有属性，直接写变量名即可
y=ay;
this.gx=ax;//访问公有属性，需要在变量名前加上this.
this.gy=ay;
};
init();
}

ログイン後にコピー

七：this的注意事项

根据笔者的经验，类中的this并不是一直指向我们的这个对象本身的，主要原因还是因为Javascript并不是OOP语言，而且，函数和类均用function定义，当然会引起一些小问题。

this指针指错的场合一般在事件处理上面，我们想让某个对象的成员函数来响应某个事件，当事件被触发以后，系统会调用我们这个成员函数，但是，传入的this指针已经不是我们本身的对象了，当然，这时再在成员函数中调用this当然会出错了。

解决方法是我们在定义类的一开始就将this保存到一个私有的属性中，以后，我们可以用这个属性代替this。我用这个方法使用this指针相当安全，而且很是省心～

我们修改一下代码，解决this问题。对照第六部分的代码看，你一定就明白了

function Shape(ax,ay)
{
var _this=this; //把this保存下来，以后用_this代替this，这样就不会被this弄晕了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//访问私有属性，直接写变量名即可
y=ay;
_this.gx=ax;//访问公有属性，需要在变量名前加上this.
_this.gy=ay;
};
init();
}

ログイン後にコピー

希望本文所述对大家JavaScript程序设计有所帮助。