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

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

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

普遍的なアプローチ

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

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);

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