ES 6におけるクラスの用法例は簡単に分析する.

2205 ワード

この実例は、ES 6におけるクラスの使い方を説明する.皆さんに参考にしてあげます.具体的には以下の通りです.
クラス文法はES 6に新たに追加されたハイライトの特徴です.私たちがよく知っているJavaScriptはついに本当の意味のクラスを迎えました.以前はjavascriptを通じてクラスを実現したいですが、通常は次のようなコンストラクションのモードを採用します.

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.friends = ['Shelby','Court'];
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
  document.write(this.name);
 }
}

その後、インスタンス化によって呼び出します.

var person1 = new Person('lf',23,'software engineer');
person1.sayName();

次にES 6を使うクラスはどうなりますか?

class Person {
 constructor(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = [‘Shelby','Court']
 }
 sayName () {
  document.write(this.name);
 }
}

手軽さが見られます.
Class文法の登場は簡略化のためだけではなく、キーワードもたくさんあります.たとえば:
staticキーワードを用いてクラスを定義する静的方法であり、静的方法とは、クラスを具体化する必要がなく、クラス名を使って直接にアクセスできる方法である.静的方法は、ツール関数としてよく使われます.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.sqrt(dx*dx + dy*dy);
  }
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));

ただし、ES 6では静的メンバ変数を直接定義することはできないが、別の方法で実現することができる.

static get baseUrl() {
  return 'www.baidu.com'
}

文法の導入前に、私達は継承を実現したいです.プロトタイプによって対象を指定しなければなりません.今はextendsのキーワードで継承を実現できます.

class Animal { 
 constructor(name) {
  this.name = name;
 }
 speak() {
  console.log(this.name + ' makes a noise.');
 }
}
class Dog extends Animal {
 speak() {
  console.log(this.name + ' barks.');
 }
}

ただし、継承の原理はやはりプロトタイプを利用している点では変わっていません.extensが文法飴を巻いているだけです.
本論文で述べたように、皆さんのECMAScriptプログラムの設計に役に立ちます.