JavaScriptのプロトタイプ継承機能を詳しく解説_基礎知識-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:02:05

オリジナル

1557 人が閲覧しました

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

ログイン後にコピー