ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でクラスを作成するための一般的な方法の概要

JavaScript でクラスを作成するための一般的な方法の概要

巴扎黑
リリース: 2017-08-16 11:36:58
オリジナル
1151 人が閲覧しました
この記事の例では、JS でクラスを作成する一般的な方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
JavaScript はオブジェクトベースの言語であり、遭遇するほとんどすべてがオブジェクトです。ただし、構文にクラスがないため、真のオブジェクト指向プログラミング (OOP) 言語ではありません。 (ただし、ES6 では、オブジェクトのテンプレートとしてクラスの概念が導入されました。クラスは、class キーワードを通じて定義できます。ES6 の概要: http://es6.ruanyifeng.com/)。
しかし、プロジェクト開発では、JS オブジェクト指向開発がよく使用され、そのためには、JS を使用して、いくつかのオブジェクトをインスタンス化するクラスを作成する必要があります。次に、JS でクラスを作成するいくつかの方法を紹介します:
1. ファクトリ メソッド:
//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();
ログイン後にコピー

このメソッドの問題は、ファクトリ メソッドを通じてオブジェクトが作成されるたびに、このオブジェクトの属性名とメソッドが次のようになることです。すべて再作成する必要があるため、メモリが無駄に消費されます。
2. コンストラクター メソッド:
//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();
ログイン後にコピー

これは最も基本的なメソッドですが、ファクトリ メソッドと同じ欠点もあります。
3. プロトタイプメソッド:
//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();
ログイン後にコピー

このメソッドの欠点は、参照属性がある場合、1 つのオブジェクトのこの属性を変更すると、他のオブジェクトのこの属性も変更されることです。参照属性が同じ場所を指しているためです。
4. プロトタイプとコンストラクターの組み合わせメソッド
//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');
ログイン後にコピー

これは、現在、クラスとオブジェクトを作成し、メソッドとプロパティをさまざまな方法でカプセル化する最も一般的に使用されているメソッドです。
5. 動的プロトタイプ モード
//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒
ログイン後にコピー

動的プロトタイプ モードは、コンストラクター内にすべての情報をカプセル化し、存在しない場合にのみプロトタイプに追加されます。このコードは、最初に呼び出されたときにのみ実行されます。
obj オブジェクトをインスタンス化するには 3 つの手順があります:
1. obj オブジェクトを作成します:
obj=new Object();
ログイン後にコピー

2. obj の内部 __proto__ をそれを構築する関数 Obj のプロトタイプに指定します。同時に、obj.constructor= ==Obj.prototype.constructor、これにより、obj.constructor.prototype が Obj.prototype (obj.constructor.prototype===A.prototype) を指すようになります。 obj.constructor.prototype と内部 _proto_ は、オブジェクトをインスタンス化するときに使用されます。obj にはプロトタイプ属性がありませんが、プロトタイプ チェーンのプロトタイプ属性を取得するために __proto__ を使用できます。とプロトタイピング方法。
3. obj をこのように使用してコンストラクター Obj を呼び出し、メンバー (つまり、オブジェクトのプロパティとオブジェクトのメソッド) を設定し、初期化します。
これらの 3 つの手順が完了すると、obj オブジェクトはコンストラクター Obj との接続がなくなり、コンストラクター Obj がメンバーを追加しても、インスタンス化された obj オブジェクトには影響を与えなくなります。

以上がJavaScript でクラスを作成するための一般的な方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート