jsでクラスを定義する方法は何ですか

今回は、jsでクラスを定義する方法と、jsでクラスを定義する際の注意点についてお届けします。実際のケースを見てみましょう。

ECMAScript6 はすでにクラスをサポートしていますが、以前のバージョンはクラスをサポートしていませんでしたが、いくつかのメソッドを通じてクラスをシミュレートできます。

js のクラスは重要であると同時に、曖昧に感じられることがよくあります。

まず、js の 3 つの重要な知識ポイント、this、プロトタイプ、コンストラクターを強調しましょう。

クラスを定義 (シミュレーション) するいくつかの方法をまとめてみましょう:

1.ファクトリ パターン

function createObject(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  }
  return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

ファクトリ パターンのメソッドオブジェクトの作成、ファクトリ パターンは受け入れられたパラメータに基づいて作成できます 必要な情報を含むオブジェクトこのメソッドは無制限に呼び出すことができ、毎回 2 つのプロパティと 2 つのメソッドを含むオブジェクトを返します。ファクトリ パターンは、類似したオブジェクトを作成する問題は解決しますが、オブジェクトの識別の問題は解決しません。つまり、オブジェクトのカテゴリを決定してオブジェクトとして統一することはできません。

2.ConstructorMethod

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}
Person.prototype = {
  constructor:Person,
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

コンストラクター メソッドはオブジェクトの所有権を決定し、オブジェクトの型を決定できますが、コンストラクター内のメソッドは各オブジェクトで再作成する必要があるため、パフォーマンスの問題が発生します。

3.プロトタイプパターン

function Person(){
}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四

サンプルコードから、オブジェクトインスタンスがプロトタイプ内の値にアクセスできるが、オブジェクトインスタンスが同じである場合、プロトタイプ内の値を上書きできないことがわかります。 name をプロトタイプ定義属性として使用すると、この属性はプロトタイプ内のその属性をマスクしますが、オーバーライドしません。

4. カプセル化 (ここではそう呼ぶことにします)

var Dog = {
  createDog:function(){
    var dog = {};
    dog.name = "汪汪";
    dog.sayHello = function(){
      console.log("Hello World!");
    };
    return dog;
  }
};
var dog = Dog.createDog();
dog.sayHello();

はコードをカプセル化し、全体としてインスタンス オブジェクトを返します。これはファクトリ パターンに似ています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js模倣jquery手順の詳細な説明

JSで時間単位を比較する方法

以上がjsでクラスを定義する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。