<font color="#8A2BE2">[JS筆記]</font> class的用法
===

> 結論
> class constructor寫法讓物件更簡單
>

範例一 算圓面積(沒有用class)
---

//建立一個c1物件，裡面key半徑 key面積 
let c1 = {
  radius: 5,
  getArea() {
    return Math.PI * this.radius * this.radius;
  },
}

let c2 ={
  radius: 10,
  getArea() {
    return Math.PI * this.radius * this.radius;
  },
}

console.log(c1.radius);
console.log(c1.getArea());

console.log(c2.radius);
console.log(c2.getArea());

[replit連結：](https://replit.com/@bobyin22/Chuan-Tong-Xie-Fa#index.js)
<br>

範例二 算圓面積(用class)
---

class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  getArea() {
    return this.radius * this.radius * Math.PI;
  }
}

let c1 = new Circle(5);
console.log(c1.radius)
console.log(c1.getArea())

let c2 = new Circle(10);
console.log(c2.radius)
console.log(c2.getArea())

[replit連結：](https://replit.com/@bobyin22/classDe-Yong-Fa-by-wilson-Hao-Xie-Fa#index.js)
<br>

範例三 人姓名(用class設計)
---

class Student {
    constructor(firstName, lastName, year) {
        this.firstName = firstName;
        this.lastName = lastName; 
        this.year = year;             //this.自訂命名 = 參數
    }
}

let firstName = new Student("Colt", "Steele");
let lastName = new Student("Blue", "Steele");

[replit連結：](https://replit.com/@bobyin22/class-ex1#index.js)
<br>

範例四 人姓名(用class設計 ＋ fullName方法)
---

class Student {
    constructor(firstName, lastName, year) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.year = year;
    }
    fullName(){
        return `Your full name is ${this.firstName} ${this.lastName}`
    }
}

let firstStudent = new Student("Colt", "Steele");
let secondStudent = new Student("Blue", "Steele");

console.log(firstStudent.fullName())
console.log(secondStudent.fullName())

[replit連結：](https://replit.com/@bobyin22/class-ex2#index.js)
<br>

範例五 人姓名(用class設計 ＋ markLate方法)
---

class Student {
    constructor(firstName, lastName, year) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.grade = year;
        this.lateTime = 0;
    }
    fullName(){
        return `Your full name is ${this.firstName} ${this.lastName}`
    }
  markLate() {
    this.lateTime += 1;
    return `${this.firstName} ${this.lastName} has been late ${this.lateTime} times`
  }
}

let firstStudent = new Student("Colt", "Steele");
let secondStudent = new Student("Blue", "Steele");
secondStudent.markLate()
secondStudent.markLate()

console.log(firstStudent.fullName())
console.log(secondStudent.fullName())
console.log(secondStudent.markLate())

[replit連結：](https://replit.com/@bobyin22/class-ex3#index.js)
<br>

範例六 人姓名(用class設計 ＋ addscore方法 ＋ 參數)
---

class Student {
    constructor(firstName, lastName, year) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.grade = year;
        this.lateTime = 0;
        this.scores = []
    }
    fullName(){
        return `Your full name is ${this.firstName} ${this.lastName}`
    }
    markLate() {
        this.lateTime += 1;
        return `${this.firstName} ${this.lastName} has been late ${this.lateTime} times`
    }
    addScore(score){
        this.scores.push(score)
        return this.scores
    }
}

let firstStudent = new Student("Colt", "Steele");
let secondStudent = new Student("Blue", "Steele");


console.log(firstStudent.fullName())
console.log(secondStudent.fullName())
console.log(secondStudent.markLate())
console.log(secondStudent.addScore(89))
console.log(secondStudent.addScore(99))

[replit連結：](https://replit.com/@bobyin22/class-ex4#index.js)
<br>

範例七 座標距離計算 class寫法 ES2015
---

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.hypot(dx, dy) //√dx^2 + dy^2
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(p1)
console.log(p2)
console.log(Point.distance(p1, p2))

[replit連結：](https://replit.com/@bobyin22/class-ex1-1#index.js)
<br>

[參考連結：udemy 資料結構與演算法 (JavaScript) wilson](https://www.udemy.com/course/algorithm-data-structure/)

[參考連結：udemy 資料結構與演算法 JavaScript Algorithms and Data Structures Masterclass]([/NHOqLIkkQiuG_m4E93Z1Wg](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/learn/lecture/11266624#notes))

###### tags: `[JS]`