JSにおけるオブジェクト向けプログラミングの継承メカニズム

4850 ワード
一.オブジェクト向けプログラミングオブジェクト向けプログラミング(OOP-Object Oriented Programming)は抽象的にモデルを作成するプログラミング方式である.継承,パッケージング,マルチステートはOOPの3つの基本的特徴である.多くの主流のプログラミング言語はOOPをサポートしている.例えばJava,c++ではnewによって「クラス」を呼び出してインスタンスを作成するが,JSを学んだ同級生はES 6以前にクラスがなかったという概念を知っていたが,JSはどのようにオブジェクト向けプログラミングを実現したのだろうか.JS実現OOPはプロトタイプチェーンによって実現される.プロトタイプチェーンの概念はここで詳しく述べないが、一例を覚えておけばよい.
function._proto_ ==== Function.prototype

JSもnewでインスタンスを作成しますが、後で呼び出されるのはクラスではなくコンストラクション関数です.次に、カプセル化によってクラスを継承する例を詳細に説明します.2.ES 5はパッケージを実現して1つのクラスを継承する1.パッケージはBMW、ベンツ、アウディなどが自動車であることを知っていて、自動車という概念は1つのクラスで、抽象的に日常生活の中の多くの具体的な事物を代表しています.
//       
function Car (name,color){
this.name = name;
this.color = color;
}

2.prototypeモード自动车の属性はたくさんあって、名前と色だけではありませんて、もしすべて构造関数の中で书くならば、インスタンスを作成する时更に1つ1つ呼び出すのが面倒すぎて、そこでJSは1つのprototypeモードを规定して、各构造関数はすべて1つのprototype属性が原型に指して、“类”の中のいくつか共通の属性は原型の中に置くことができます.例えば自動車類の車種、運動エネルギー方式などの属性は共有属性で原型に入れることができる.
Car.prototype.type = 'car';

Car.prototype.getType = function () {
  return this.type;
};

Car.prototype.setType = function (newType) {
  this.type = newType;
  return newType;
};

Car.prototype.getName = function () {
  return this.name;
};

Car.prototype.setName = function (newName) {
  this.name = newName;
  return newName;
};

3.newキーワードJSでnewキーワードでインスタンスを作成します.
 var car1 = new Car('  ','red');
console.log(car1.type) // 'car'

ここで、newを使用してインスタンスを作成すると、newはいったい何をしたのでしょうか.newを使用してインスタンスを作成すると、実際には4行のコードを減らすことができます:1.newは一時オブジェクトを作成し、thisを使用して一時オブジェクトにアクセスすることができます2.newもreturnを支援します3.newはプロトタイプの名前--prototype 4.newを指定してインスタンスを作成し、自動的にプロトタイプをバインドします.
car1._proto_ === Car.prototype

4.私たちを継承して「サブクラス」を実現し、「自動車クラス」を継承する
function SUV ( price) {
 Car.call(this, 'suv');   //   Car            SUV
  this.price = price;
}

SUV.prototype = new Car('suv');//          


SUV.prototype.getPrice = function () {
  return this.price;
};
SUV.prototype.setPrice = function (newPrice) {
  this.price = newPrice;
  return newPrice;
};

//      
var suv1 = new SUV(1000);
console.log(suv1.getPrice());//1000

三.ES 6はカプセル化を実現して一つのクラスを継承する
1.classパッケージクラス
ES 6では、JSが主流のオブジェクト向けプログラミング言語に似ているようにclass(クラス)の概念を導入しているが、これは実は文法糖であり、本質的には、ES 6のクラスはES 5の構造関数のパッケージにすぎない.classが実現するES 5でも実現できるからだ.
//      
class Car{
constructor(){
}
Car = Car.prototype.constructor
}
var car  = new Car()

classの実質は関数であり、デフォルトでは構造関数を定義する必要があります.書かない場合は、デフォルトで空の構造関数を追加します.プロトタイプprototypeはclassにも適用され、クラス自体は構造関数を指し、使用時もnewのクラスインスタンスである.クラスの書き方は式の形式にも書くことができます
const BCar = class Car{
    constructor(){
   }
      }
/*  ，   BCar        ， Car        */

thisについては、クラスのthisはデフォルトでクラスのインスタンスを指します.
2.クラスを継承
ES 6ではextendsキーワードで親を継承します.es 5とは異なり、classには変数の昇格は存在せず、デフォルトのサブオブジェクトは親オブジェクトの後に定義する必要があります.
//SUV  Car 
class Car{
constructor(color,type){
   this.color = color;
   this.type = type;
}
}
class SUV extends Car{
constructor(color,type,price){
  super(color,type){
    this.price =price}}

}

サブクラスには、デフォルトのコンストラクション関数superキーサブクラスがコンストラクション関数内でsuperによって親クラスのコンストラクション関数を呼び出す必要があります.そうしないと、新しいサブクラスインスタンスがエラーになります.これもES 5とは異なり、子クラスは親クラスを継承したthisオブジェクトであり、修正されます.super内部のthisはサブクラスを指すが,静的メソッドのsuperは親を指す.staticキーワードは他の言語と似ていますが、1つのメソッドの前にstaticキーワードを追加すると、この静的メソッドを表し、インスタンスはメソッドを継承せず、クラスで呼び出す必要があります.また、静的メソッドには、インスタンスではなくクラスを指すthisキーワードが含まれていることに注意してください.クラスのprototypeとproto
class Car{
constructor(color,type){
   this.color = color;
   this.type = type;
}
}
class SUV extends Car{
constructor(color,type,price){
  super(color,type){
    this.price =price}}

}
//////
SUV._proto_ = Car
SUV.prototype._proto_ =  Car.prototype

インスタンスのproto
var car1 = newCar('red', 'fast');
var suv1 = new SUV('red', 'fast', 2018);
/////////
car1._prpto_._prpto_ =  car1._prpto_

3.プライベートメソッドとプライベート属性の提供
C++のクラスにはプライベートメソッドとプライベート属性があることは知っていますが、ES 6のクラスにはプライベートメソッド(クラス内でのみ使用され、外部ではアクセスできません)が提供されていません.プライベートメソッドとプライベート属性を別の方法で提供するしかありません.1.プライベートメソッドはプライベートメソッドの名前をSymbol値と命名します.
const carO = Symbol('carO');
const carT= Symbol('carT');

export default class Car{

  //     
  test(car) {
    this[carO](car);
  }

  //     
  [carO](car) {
    return this[carT] = car;
  }

  // ...
};

--2.プライベート属性プライベート属性プライベート属性プライベート属性
class Car {
  #price;

  constructor(price) {
   this.#price
  }

  get price() { return #price }
  set price(value) { ##price = +value }
}
////price     ，

以上はJSでのオブジェクト向けプログラミングの簡単な紹介ですが、間違いがあればご指摘ください.参考リンク:Javascript継承メカニズムの設計思想--チェン一峰
HDOJ 1000 java
JAvaセグメント出力(chunked)