JavaScriptクラスの定義方法とは何ですか

青灯夜游
リリース: 2021-04-19 15:01:46
オリジナル
2948 人が閲覧しました

メソッドは次のとおりです: 1. コンストラクター メソッド、構文 "function Cat(){}var cat1=new Cat();}"; 2. Object.create() メソッド、構文 "var Cat={} 「 ;var cat1=Object.create(Cat);」。

JavaScriptクラスの定義方法とは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

オブジェクト指向プログラミングでは、クラスはオブジェクトのテンプレートであり、同じオブジェクトのグループ (「インスタンス」とも呼ばれます) に共通のプロパティとメソッドを定義します。

JavaScript 言語は「クラス」をサポートしていませんが、いくつかの回避策を使用して「クラス」をシミュレートできます。

1. コンストラクターメソッド

これは古典的なメソッドであり、教科書で必ず教えるべきメソッドです。コンストラクターを使用して「クラス」をシミュレートし、内部で this キーワードを使用してインスタンス オブジェクトを参照します。

  function Cat() {
    this.name = "大毛";
  }
ログイン後にコピー

インスタンスを生成するときは、new キーワードを使用します。

  var cat1 = new Cat();
  alert(cat1.name); // 大毛
ログイン後にコピー

クラスの属性とメソッドは、コンストラクターのプロトタイプ オブジェクトで定義することもできます。

  Cat.prototype.makeSound = function(){
    alert("喵喵喵");
  }
ログイン後にコピー

このメソッドの詳しい紹介については、私が書いた一連の記事「Javascript オブジェクト指向プログラミング」を読んでください。ここでは詳しく説明しません。その主な欠点は、比較的複雑で、this とプロトタイプを使用し、書くのも読むのも非常に手間がかかることです。

2. Object.create() メソッド

「コンストラクター メソッド」の欠点を解決し、より便利にオブジェクトを生成するために、ECMAScript の第 5 版では、 Javascript の国際標準 (現在のバージョンは第 3 バージョン) で、新しいメソッド Object.create() が提案されています。

このメソッドを使用すると、「クラス」は関数ではなくオブジェクトになります。

  var Cat = {
    name: "大毛",
    makeSound: function(){ alert("喵喵喵"); }
  };
ログイン後にコピー

次に、new を使用せずに、Object.create() を使用してインスタンスを直接生成します。

  var cat1 = Object.create(Cat);
  alert(cat1.name); // 大毛
  cat1.makeSound(); // 喵喵喵
ログイン後にコピー

現在、すべての主要ブラウザ (IE9 を含む) の最新バージョンがこのメソッドを導入しています。古いブラウザを使用している場合は、次のコードを使用して自分でデプロイできます。

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }
ログイン後にコピー

このメソッドは「コンストラクター メソッド」よりも単純ですが、プライベート プロパティやプライベート メソッドを実装できず、インスタンス オブジェクト間でデータを共有することもできず、「クラス」のシミュレーションは十分に包括的ではありません。

[推奨学習: JavaScript 上級チュートリアル]

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

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