オブジェクト向けJavaScript

オブジェクト向けJavaScript

モデルの青写真を作成し、その青写真に基づいてオブジェクトを作成するプログラミングモード.

하나의 모델이 되는 청사진 : class,
그 청사진을 바탕으로 한 객체를 만드는 : instance(객체)

class

function Car(color) { ... }

instance

let avante = new Car("blue");

let mini = new Car("cyan");

let beetles = new Car("red");

ES 5クラスは、関数として定義することができる。

function Car(brand, name, color){
  // instance가 만들어질 때 싫행되는 코드
}

ES 6はclassというキーワードを用いて定義することもできる。

class Car(){
  constructor(brand, name, color){
    // instance가 만들어질 때 실행되는 코드
  }
}

どちらの方法も知らなければならない.

クラスのインスタンスはnewキーワードで作成できます。

let avante = new Car("hyundai", "avante", "black");

let mini = new Car("bmw", "mini", "white");

let beetles = new Car("volkswagen", "beetles", "red");

// avante, mini, beetles 각각의 instance는 Car라는 class의 고유한 속성과,
// 메소드를 갖습니다.

検索

コンソールウィンドウを確認します.

は、Carというクラスのインスタンスです.

// 이 코드는 Class 이다.
function Car(brand, model, color){
    // instance가 만들어질 때 실행되는 코드
}

// 이 녀석은 instance 이다.
let avante = new Car("hyundai", "avante", "black");

ここで重要なのは、オブジェクト向けの物語です.

属性とメソッド

クラスのプロパティとメソッドを定義し、インスタンスで使用します.
に示すように、オブジェクト向けプログラミングは、現実世界に基づいてプログラミングモデルを作成する際に非常に有用である.
すなわち、オブジェクト向けJavaScriptを使用する理由は、現実世界のモデルをコードに変換したい場合によく使用されるためです.
(現実世界のコンテンツをプログラミングモデルにインポートする場合)

クラスクラス:属性の定義ぞくせいのていぎ

ES5

function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}

ES6

class Car(){
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

クラスクラス:メソッドの定義

ES5

function Car(brand, name, color){ /* 생략 */ }

Car.prototpe.refuel = function(){
  // 연료 공급을 구현하는 코드
}

Car.prototype.drive = function(){
  // 운전을 구현하는 코드
}

ES6

class Car(){
  constructor(brand, name, color){ /* 생략 */ }
  
  refuel(){
    // 연료 공급을 구현하는 코드
  }
  
  drive(){
    // 운전을 구현하는 코드
  }
}

インスタンスでの使用

let avante = new Car("hyundai", "avante", "black");
avante.color; // black
avante.drive(); // 아반떼가 운전을 시작합니다.

let mini = new Car("bmw", "mini", "white");
mini.brand; // bmw
mini.refuel(); // mini에 연료를 공급합니다.

次のコードを要約します.

// constructor(생성자)함수
function Car(brand, name, color){ // Car === class
  // this 객체: 이 예제에서는 avante === this
  this.brand = brand;
  this.name = name;
  this.color = color;
}

// prototype 객체: 여기에 속성이나 메소드를 정의할 수 있다.
Car.prototype.drive = function(){
  consolo.log(this.name + "가 운전을 시작합니다.");
}

// avante === instance
let avante = new Car("hyundai", "avante", "black");
avante.color; // "black"
avante.drive(); // "avante가 운전을 시작합니다"

実戦例-配列/類似の部分があります.

let avante = new Car("hyundai", "avante", "black");
avante.color; // "black"
avante.drive(); // "avante가 운전을 시작합니다"

// arr의 class === Array
// arr === instance
let arr = ["code", "states", "pre"];
arr.length; // 3
arr.push("course"); // 새 element를 추가합니다.

let arr = ["code", "states", "pre"];
// 위의 코드나 아래 코드나 똑같다.
let arr = new Array("code", "states", "pre");
// 우리가 배열을 정의하는 것은 Array의 instance를 만들어내는 것과 동일합니다.