JavaScriptでのOOP

プログラミング言語に関する用語オブジェクトの最も顕著な外観は1980年代に起こりました.それ以来、オブジェクト指向プログラミングは、ソフトウェアを作成する最も重要な方法となっている.最も基本的なレベルでのオブジェクト指向プログラミングは、アプリケーションのビルディングブロックとしてオブジェクトを使用することです.今週のブログでは、JavaScriptとその実装によってサポートされている重要なオブジェクト指向のメカニズムを調査します.

オブジェクトの定義

JavaScriptでは、オブジェクトはすべての重い持ち上げを行います.オブジェクトは自己完結型です.彼らは開発中に実装するすべての関連データと機能を格納します.objectインスタンス内のアクションを実行するインスタンスメソッドおよびメソッドを記述するプロパティが含まれます.いくつかのオブジェクトを作成しましょう!

// Create an object using an object literal
const location = {
  // characteristics of the instance
  city: 'New Orleans',
  state: 'Louisiana',
  // methods of the object
  getLocation: ()=>{
    return (`Welcome to ${location.city}, ${location.state}!`)
  },
}

console.info(location.getLocation()); // Prints 'Welcome to New Orleans, Louisiana!'

// Create an object using an constructor
const Location = (city, state) => {
  // characteristics of the instance
  this.city = city;
  this.state = state;
}
const location1 = new Location('New Orleans', 'Louisiana');
const location2 = new Location('New York', 'New York');

console.info(`Welcome to ${location2.city}, ${location2.state}!`); // Prints 'Welcome to New York, New York!'

// Create an object using Object.create method
// initialize an object literal
const location = {
  greeting: function(){
    console.info(`Welcome to ${this.city}, ${this.state}!`)
  }
}
// assign the new instance to a variable
const vacaLocation = Object.create(location);
// add properiest to the new instance
vacaLocation.city = 'Sao Paulo';
vacaLocation.state = 'Brazil';

vacaLocation.greeting(); // Prints 'Welcome to Sao Paulo, Brazil!'

カプセル化

カプセル化はそのオブジェクトの中のオブジェクトの機能のすべての局在化です.コンストラクタ/プロトタイプパターンは、型のオブジェクトを定義する最も一般的な方法です.コンストラクターパターンは、オブジェクトのプロパティとメソッドと共有プロパティを定義したプロトタイプパターンを定義します.

class Location {
  construction(city, state){
    // initialize the objects properties and methods
    this.city = city;
    this.state = state;
  }
  addDestination(destination){
    this.destination = destination;
  }
  getPlan(){
    console.info(`From ${this.city}, ${this.state} to ${this.destination}`)
  }
}

const trip1 = new Location('New Orleans', 'Louisiana');
trip1.addDestination('Bali, Indonesia');
trip1.getPlan(); // Prints 'From New Orleans, Louisiana to Bali, Indonesia'

抽象化

抽象化は、単にプロパティと関数がどのように定義されているかを変更するだけで実現できます.抽象化は、範囲を制限するか、バックグラウンドでデータを隠すプロセスです.

// abstract the properties and method by setting them to a variable
function Location(city, state){
  let city = city;
  let state = state; 

  let privateLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
  // use the this keyword to give access to instances
  this.publicLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

const location1 = new Location('Seattle', 'Washington');
console.info(location1.privateLocation()); // Prints undefined
console.info(location1.publicLocation()); // Prints 'Welcome to Seattle, Washington!'

遺産

クラスは抽象的なテンプレートまたはオブジェクトインスタンスの親です.JavaScriptはインスタンスとクラスの区別がない特別なプロトタイプ指向言語です.通常、クラスと呼ばれるものはJSの典型的なオブジェクトです.クラスのキーワードは、単にクラスベースの言語から開発者のための構文の砂糖として追加されました.継承は、1つのオブジェクトのプロパティとメソッドを渡す方法です.

// Class model
class Location{
  constructor(city, state){
    this.city = city;
    this.state = state;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

// Use the extends keyword to create an subclass of the Location class
class CityByCountry extends Location {
  constructor(city, state, country){
    // Prototype-based inheritance: call related method of the super class (Location)
    super(city, state);
    this.country = country;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state} ${country}!`);
  }
}
const location1 = new CityByCountry('Denver', 'Colorado', 'USA');
console.info(location1.getLocation()); // Prints 'Welcome to Denver, Colorado USA!'

結論

JavaScript開発者として、プロトタイプの継承を理解することも重要です.プロトタイプベースとクラスベースの言語の間には、後のブログでカバーする重要な違いがあります.一方、JavaScriptでオブジェクト指向プログラミングのあなたの理解を広げるために、下記のクレジットを見てください.ハッピーコーディング!また会いましょう.
クレジット
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
https://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/