コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > オブジェクト指向 JavaScript を学び、objects を作成する 9 つの方法をマスターする_JavaScript スキル

オブジェクト指向 JavaScript を学び、objects を作成する 9 つの方法をマスターする_JavaScript スキル

WBOY
リリース： 2016-05-16 15:22:07
オリジナル
1348 人が閲覧しました

この記事では、参考のために JavaScript でオブジェクトを作成する 9 つの方法を紹介します。具体的な内容は次のとおりです。

【1】オブジェクトコンストラクターを使用する
[短所] 同じインターフェースを使用して多数のオブジェクトを作成すると、重複したコードが大量に生成されます 

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
  　　alert(this.name);
　　}
ログイン後にコピー

【2】オブジェクトリテラルを使用する
[短所] 同じインターフェースを使用して多数のオブジェクトを作成すると、重複したコードが大量に生成されます 

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
ログイン後にコピー

【3】ファクトリパターン: 特定のオブジェクトを作成するプロセスを抽象化する ECMAScript ではクラスを作成できないことを考慮して、開発者はオブジェクトの作成の詳細を特定のインターフェイスでカプセル化する関数を発明しました。
【短所】類似オブジェクトを複数作成する問題は解決したが、オブジェクト認識の問題は解決できなかった

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');
ログイン後にコピー

【4】コンストラクターモード: オブジェクトは明示的に作成されず、属性とメソッドはこのオブジェクトに直接割り当てられ、return ステートメントはありません
[デメリット] インスタンスごとに各メソッドを再作成する必要がある 

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");
ログイン後にコピー

【4.1】コンストラクター拡張モード: コンストラクター外での伝達関数定義
[欠点 1] グローバル スコープで定義された関数は、実際には特定のオブジェクトによってのみ呼び出すことができるため、グローバル スコープはその名前に少しふさわしくないものになります
[欠点 2] オブジェクトで多くのメソッドを定義する必要がある場合、このカスタム参照型にはカプセル化がまったく行われないため、多くのグローバル関数を定義する必要があります。 

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);
ログイン後にコピー
【5】プロトタイプパターン: 作成する各関数にはプロトタイプ属性があり、この属性はオブジェクトを指すポインターであり、このオブジェクトの目的は、特定の型のすべてのインスタンスで共有できる情報を含めることです。プロパティとメソッド。文字通り理解すると、プロトタイプはコンストラクター

を呼び出して作成されるオブジェクト インスタンスのプロトタイプ オブジェクトです。 

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true
ログイン後にコピー
【5.1】よりシンプルなプロトタイプ モード: 不要な入力を減らし、プロトタイプの機能をより視覚的にカプセル化するために、すべてのプロパティとメソッドを含むオブジェクト リテラルでプロトタイプ オブジェクト全体を書き換えます。

[欠点] この方法でコンストラクター プロパティをリセットすると、その [[Enumerable]] 属性が true に設定されます。デフォルトでは、ネイティブ コンストラクター プロパティは列挙可能ではありません。

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
ログイン後にコピー
【5.2】数え切れない問題を解決するプロトタイプパターン


function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});
ログイン後にコピー
[プロトタイプ パターンのデメリット 1] プロトタイプ オブジェクトをオーバーライドすると、既存のプロトタイプと既存のオブジェクト インスタンスの間の接続が切断され、元のプロトタイプが参照されたままになります。 


function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error
ログイン後にコピー
【プロトタイプパターンのデメリット2】参照型属性の共有問題が顕著


function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true
ログイン後にコピー
【6】合成パターン: コンストラクターパターンとプロトタイプパターンを組み合わせるのが、カスタムタイプを作成する最も一般的な方法です。コンストラクター パターンはインスタンス プロパティの定義に使用され、プロトタイプ パターンはメソッドと共有プロパティの定義に使用されます。この混合モードは、コンストラクターへのパラメーターの受け渡しもサポートしており、参照型

を定義するために使用されるデフォルトのモードです。 

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true
ログイン後にコピー
【7】動的プロトタイプモード: コンストラクターとプロトタイプの両方を使用する利点を維持しながら、すべての情報をコンストラクターにカプセル化し、(必要な場合のみ) コンストラクター内でプロトタイプを初期化します。つまり、既存のメソッドが有効かどうかを確認することで、プロトタイプを初期化するかどうかを決定できます。

[注意] 動的プロトタイプモードを使用する場合、オブジェクトリテラルを使用してプロトタイプをオーバーライドすることはできません。インスタンスがすでに作成されているときにプロトタイプをオーバーライドすると、既存のインスタンスと新しいインスタンスの間の接続が切断されます 

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();
ログイン後にコピー
[8] 寄生コンストラクター パターン: オブジェクトを作成するコードのみをカプセル化して、新しく作成されたオブジェクトを返す関数を作成します 


function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"
ログイン後にコピー
【Parasite Constructor Pattern Application】追加メソッドを使用して特別な配列を作成します。 Array コンストラクターは直接変更できないため、このパターンを使用できます 


function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"
ログイン後にコピー
[9] 安全なコンストラクター パターン: いわゆる安全なオブジェクトは、パブリック プロパティを持たないオブジェクトを指し、そのメソッドはこれを参照しません。安定したオブジェクトは、一部のセキュリティ環境 (この環境と新しいセキュリティ環境の使用が禁止されている環境) で、または他のアプリケーションによるデータの変更を防ぐために最適に使用されます。 


function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"
ログイン後にコピー
上記は JavaScript でオブジェクトを作成する 9 つの方法であり、皆さんの学習に役立つことを願っています。

関連ラベル：
javascript オブジェクトの作成
ソース：php.cn
前の記事：jqueryイベントbubble_jqueryを理解する 次の記事：JavaScript の競合を回避する方法を説明する例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート