JavaScriptのプロトタイプ継承機能を詳しく解説_基礎知識

JavaScript の継承はかなり奇妙です。インターフェイスの継承は実装できず、プロトタイプの継承にのみ依存します。

プロトタイプチェーン
プロトタイプはオブジェクトです。コンストラクターを通じて作成されたインスタンスには、プロトタイプのプロパティとメソッドを取得するためにプロトタイプを指すポインターが含まれます。このようにして、インスタンス オブジェクトはコンストラクターの属性メソッドとプロトタイプの属性メソッドを持ち、継承する必要があるコンストラクターのプロトタイプをこのインスタンスにポイントすることで、このインスタンスのすべての属性メソッドを持たせることができます。継承を達成します。
以下のデモコードを見てください:

//声明超类，通过构造函数和原型添加有关属性和方法
function Super(){
  this.property = true;
}
Super.prototype.getSuperValue = function() {
  return this.property;
};

//声明子类的构造函数
function SubType() {
  this.subproperty = false;
}
//将子类的原型指向超类的实例，得到超类的一切
SubType.prototype = new Super();
SubType.prototype.constructor = SubType;
SubType.prototype.getSubValue = function(){
  return this.subproperty;
};
//由子类创建对象，测试是否继承超类方法和属性
var instance = new SubType();
console.log(instance.getSuperValue());

すべての関数のデフォルトのプロトタイプは Object のインスタンスであるため、デフォルトのプロトタイプには Object.prototype を指す内部ポインタが含まれます。
instanceof と isPrototypeOf を使用して、プロトタイプとインスタンスの間の関係を決定します。

instance instanceof Object;
Object.prototype.isPrototypeOf(instance);

プロトタイプチェーンを使用する場合、メソッドを慎重に定義する必要があります。サブクラスがスーパータイプのメソッドまたは拡張機能をオーバーライドする必要がある場合、それが有効になるように、プロトタイプを置き換えるステートメントの後にサブクラスを配置する必要があります。さらに、プロトタイプ チェーンを介して継承を実装する場合、オブジェクト リテラルを使用してプロトタイプ メソッドを作成することはできません。これにより、プロトタイプ チェーンがオーバーライドされます。

......
SubType.prototype = new Super();
SubType.prototype = {
  ....
};

これにより、新しいオブジェクトを指すポインターが置き換えられ、プロトタイプ チェーンが書き換えられます。

プロトタイプチェーンの継承方法には主に 2 つの問題があります:
1. 参照型の値を含むプロトタイプは、すべてのインスタンスで共有されます。
前回の記事で述べたように、参照型の値を含むプロトタイプ プロパティはすべてのインスタンスで共有されるため、1 つのインスタンスが変更されると、他のインスタンスもそれに応じて変更されるため、コンストラクターでプロパティを定義する必要があります。プロトタイプ チェーンを介して継承する場合、スーパー クラスの属性がコンストラクターで定義されているかプロトタイプで定義されているかに関係なく、それらはすべてインスタンス オブジェクトになり、サブクラスによって継承されるため、サブクラスのインスタンスに影響します。
2. サブタイプのインスタンスを作成する場合、スーパータイプのコンストラクターにパラメーターを渡すことはできません。
プロトタイプ チェーンの継承により、サブクラス プロトタイプがスーパークラスのインスタンスを直接指すようになります。このとき、パラメーターをスーパークラスに渡すことができます。ただし、サブクラスがインスタンスを作成する場合、パラメーターはサブクラスのコンストラクターにのみ渡すことができ、スーパークラスのコンストラクターには渡すことができません。
したがって、実際のアプリケーションでは、プロトタイプ チェーンが単独で使用されることはほとんどありません。

関連するコーディングの実践

プロトタイプ属性を特定する

function hasPrototypeProperty(object, name) {
  return name in object && !object.hasOwnProperty(name);
}

コンストラクターでプロトタイプ オブジェクトを使用する

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name);
  },
  toString: function() {

  }
};

var person1 = new Person('Nicholas');
var person2 = new Person('Greg);

console.log(person1 instanceof Person); // true
console.log(person1.constructor === Person); // true
console.log(person1.constructor === Object); // false

console.log(person2 instanceof Person); // true
console.log(person2.constructor === Person); // true
console.log(person2.constructor === Object); // false

オブジェクトの継承

var person1 = {
  name: 'Nicholas',
  sayName: function () {
    console.log(this.name);
  }
};

var person2 = Object.create(person1, {
  name: {
    configurable: true,
    enumerable: true,
    value: 'Greg',
    writable: true
  }
});

person1.sayName(); // Nicholas
person2.sayName(); // Greg

console.log(person1.hasOwnProperty('sayName')); // true
console.log(person1.isPropertyOf(person2)); // true
console.log(person2.hasOwnProperty('sayName')); // false

モジュールモード

var person = (function () {
  var age = 25;

  function getAge() {
    return age;
  }

  function growOlder() {
    age++;
  }

  return {
    name: 'Nicholas',
    getAge: getAge,
    growOlder: growOlder
  };
}());

スコープコンストラクター

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = Person('Nicholas');

console.log(person1 instanceof Person); // false
console.log(typeof person1); // undefined
console.log(name); // Nicholas