markdown5.md

JavaScript 的物件導向 最簡單的物件 範例： people.js

var People={ 
  name:"john", 
  age:30,
  print:function() {
    console.log("name=", this.name, "age=", this.age);
  } 
}

People.print();

執行結果：

$ node people.js 
name= john age= 30

圓形物件
範例： circle.js

var circle = {
  r:3, 
  area:function() {
    return 3.14*this.r*this.r;
  }
}

console.log("circle.r=%d", circle.r);

console.log("circle.area()=%d", circle.area());

執行結果

NQU-192-168-60-101:ccc csienqu$ node circle.js
circle.r=3
circle.area()=28.259999999999998

圓形類別 (ES6 新語法）
class Circle {
  constructor(r) {
    this.r = r
  }
  area() {
    return 3.14*this.r*this.r;
  }
}

var c1 = new Circle(1)
console.log("c1.r=%d", c1.r);
console.log("c1.area()=%d", c1.area());
var c2 = new Circle(2)
console.log("c2.area()=%d", c2.area());
執行結果

csienqu-teacher:object csienqu$ node circleClass
c1.r=1
c1.area()=3.14
c2.area()=12.56

複數的範例 ES6 新版的類別寫法 檔案： ComplexClass.js

 class Complex {
    constructor(r,i) {
        this.r = r; 
        this.i = i;
    }

    add(c2) {
        return new Complex(this.r+c2.r, this.i+c2.i);
    }
    
    sub(c2) {
        return new Complex(this.r-c2.r, this.i-c2.i);
    }
    
    mul(c2) {
        return new Complex(this.r*c2.r-this.i*c2.i, 
                           this.r*c2.i+this.i*c2.r);
    }
    toString() { 
        return this.r+"+"+this.i+"i" 
    }
}

var a=new Complex(1,2), b=new Complex(2,1);

var x = a.add(b).sub(b).mul(b);

console.log("a=%s", a);
console.log("b=%s", b);
console.log("a.add(b)=%s", a.add(b));
console.log("a.sub(b)=%s", a.sub(b));
console.log("a.mul(b)=%s", a.mul(b));
console.log("x=%s", x);

執行結果：

$ node ComplexClass.js 
a=1+2i
b=2+1i
a.add(b)=3+3i
a.sub(b)=-1+1i
a.mul(b)=0+5i
x=0+5i

不管你總共建立了多少 Complex 物件， Complex 的 prototype 都只會有一份，因此這種寫法會比前一種寫法更省記憶體。

而這種寫法，也是最經典的 javascript 物件導向寫法。

在一般的物件導向語言裡，會有《繼承》的機制，但是在 javascript 的早期版本 (ES6 之前) 裡面，並沒有《繼承》的機制。

但是、javascript 仍然可以做到類似《繼承》的功能，方法是在原型裏再塞入原型，這種原型裡面還可以有原型的做法，真的是非常美妙的一種設計阿！
(JavaScript 的物件導向)[https://programmermedia.org/root/%E9%99%B3%E9%8D%BE%E8%AA%A0/%E6%9B%B8%E7%B1%8D/JavaScript/%E5%9F%BA%E7%A4%8E/oo.md]