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

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

WBOY

リリース： 2016-05-16 15:22:07

オリジナル

1318 人が閲覧しました

この記事では、参考のために 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 つの方法であり、皆さんの学習に役立つことを願っています。