JavaScriptのオブジェクト作成とオブジェクト継承の実践的な方法を詳しく解説

JavaScriptのオブジェクト作成とオブジェクト継承の実践的な方法を詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:11:31

オリジナル

1211 人が閲覧しました

この記事の規則: 特別な宣言がなければ、属性は属性またはメソッドを指します。

オブジェクトの作成とオブジェクトの継承は実際には同じことです。必要なインスタンスオブジェクトは、コンストラクターを通じてプライベートプロパティを取得し、プロトタイプチェーンを通じて共有プロパティを取得します。良い方法とは何でしょうか？プライベートプロパティは (インスタンス内のカスタムプライベートプロパティに関係なく) コンストラクターを通じて取得され、書き換える必要はありません。共有プロパティはプロトタイプチェーンを通じて検出され、繰り返し作成する必要はありません。

普遍的なアプローチ

コンストラクターパターンとプロトタイプパターンを組み合わせてオブジェクトを作成する

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
Object.defineProperty(HNU_student, 'constructor', {value: HNU_student});

var hiyohoo = new HNU_student('xujian');

ログイン後にコピー

プロトタイプはリテラルによって書き換えられ、プロトタイプのコンストラクターは Object を指します。必要に応じてコンストラクターを再定義する必要があります。

寄生組み合わせ遺伝

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
function inheritPrototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};

function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  }
}
inheritPrototype(Student_2011, HNU_student);
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
};

var hiyohoo = new Student_2011('xujian', 20110803203);

ログイン後にコピー

object() の役割: パラメータとして渡されたオブジェクトをインスタンスのプロトタイプに変換し、オブジェクトのプロパティはすべてのインスタンスで共有されます。

共有属性: respectPrototype(Student_2011, HNU_student);、サブコンストラクタープロトタイプはスーパーコンストラクタープロトタイプのインスタンスになり、スーパーコンストラクタープロトタイプ内の属性はサブコンストラクターと共有されます。
プライベートプロパティ: HNU_student.call(this, name);、サブコンストラクターを通じてインスタンスを作成する場合、スーパーコンストラクターを呼び出してプライベートプロパティを作成します。

オブジェクトを作成するその他の方法

ダイナミックプロトタイプモード

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };

  if (!HNU_student.prototype.school) {
    HNU_student.prototype.school = 'HNU';
    HNU_student.prototype.saySchool = function() {
      return this.school;
    };
  }
}

var hiyohoo = new HNU_student('xujian');

ログイン後にコピー

プロトタイプで定義された共有プロパティをコンストラクターに入れ、判定ステートメントを使用し、インスタンスを作成するために初めてコンストラクターが呼び出されたときにプロトタイプの共有プロパティを初期化します。

寄生コンストラクターパターン

function SpecialArray() {
  var values = new Array();
  values.push.apply(values, arguments);
  values.toPipedString = function() {
    return this.join('|');
  };

  return values;
}

var colors = new SpecialArray('red', 'black', 'white');

ログイン後にコピー

は、ネイティブコンストラクターに特別な属性を追加するために使用されます。

オブジェクト継承のその他の方法

結合継承

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};
function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  };
}
Student_2011.prototype = new HNU_student();
Student_2011.prototype.constructor = Student_2011;
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
}
var hiyohoo = new Student_2011('xujian', 20110803203);

ログイン後にコピー

共有属性: Student_2011.prototype = new HNU_student();、サブコンストラクターのプロトタイプはスーパーコンストラクターのプロトタイプを指し、インスタンスはプロトタイプチェーンを通じてすべての共有属性を見つけます。
プライベートプロパティ: HNU_student.call(this, name);、サブコンストラクターを通じてインスタンスを作成する場合、スーパーコンストラクターを呼び出してプライベートプロパティを作成します。

欠陥: スーパーコンストラクターが 2 回呼び出されます。 Student_2011.prototype = new HNU_student(); 同時に、スーパーコンストラクターによって定義されたプライベートプロパティがサブコンストラクタープロトタイプ内に作成され、これらのプロトタイプ内の同じ名前のプロパティによってブロックされます。実例。

プロトタイプ継承、寄生継承

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = object(student1);

ログイン後にコピー

Object.creat() は ECMAScript5 の新しいメソッドです。1 つはプロトタイプとしての元のオブジェクト、もう 1 つは属性をオーバーライドまたは追加するオブジェクトです。その機能はカスタムオブジェクトと同じです。 ()。

var student1 = {
  name: 'xujian',
  school: 'HNU'
};
var student2 = Object.create(student1, {
  name: {
    value: 'huangjing'
  }
});

ログイン後にコピー

寄生継承は、プロトタイプの継承に基づいてオブジェクトを強化するための追加の属性を追加します。

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
function creatAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('Hi!');
  };
  return clone;
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = creatAnother(student1);

ログイン後にコピー

プロトタイプ継承と寄生継承は、既存のオブジェクトと同様のインスタンスオブジェクトを作成するために使用されます。