物件導向

使用共同物件,做出其他很多的類似物件,簡化物件數

Object Types

聯想:貓咪有不同毛色,品種,但他們都是動物

1  建立基盤:改寫物件為建構子函數constrator function

//物件形式
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 100,
    "y": 200
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 200
};

//建構子形式,改寫上方資料如下
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

2  建構資料:用new 呼叫建構子函數

//物件形式
/*****************
var winstonTeen = {
    "nickname": "Winsteen",
    "age": 15,
    "x": 20,
    "y": 50
};
var winstonAdult = {
    "nickname": "Mr. Winst-a-lot",
    "age": 30,
    "x": 229,
    "y": 50
};
****************/

//建構子函數
var Winston = function(nickname, age, x, y) {
    this.nickname = nickname;
    this.age = age;
    this.x = x;
    this.y = y;
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);
//之後可以用WinstonTeen/winstonAdult呼叫物件資料
//Winston.nickname→"Winsteen"

現在物件資料模型建構完成了,但還沒有連接上畫圖函數,所以看不到東西

Object Methods

聯想:貓咪除了會鳴叫還會吃飯

Methods:利用prototype原型,連接建構子與畫圖(或其他)函數,使資料具現化

//建構子←資料屬性
var Winston = function(nickname, age, x, y) {
 this.nickname = nickname;
 this.age = age + "yrs old";
 this.x = x;
 this.y = y;
};

background(255, 255, 255);
//1.1 prototype 連接建構子與畫圖函數←行為
//1.2 裡面的物件資料要用this指定
Winston.prototype.draw = function() {
 // face
 fill(255, 255, 0);
 ellipse(this.x, this.y, 90, 90);
 fill(46, 46, 41);
 // eyes
 ellipse(this.x - 20, this.y - 20, 15, 15);
 ellipse(this.x + 24, this.y - 25, 15, 15);
 fill(252, 65, 65);
 // mouth
 ellipse(this.x + 13, this.y + 18, 40, 40);

 //txt
 var txt = this.nickname + ", " + this.age;
 text(txt, this.x - 40, this.y - 60);
};

//3 嘗試接其他函數:talk
Winston.prototype.talk = function() {
 text("I'm Winston!", this.x - 30, this.y + 70);
};

//new 呼叫建構子函數
var winstonTeen = new Winston("Winsteen", 15, 100, 200);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 200);

//2 prototype接好後,呼叫draw
winstonTeen.draw();
winstonAdult.draw();

//4 呼叫talk函數
winstonTeen.talk();
winstonAdult.talk();
Display

參考:ProcessingJS呈現在網頁的方法
12345678999999999999999999999999999999999999999

See the Pen OOD by Ian Chen (@ianchen0419) on CodePen.

Object Inheritance

聯想:貓咪會鳴叫,狗狗會吠叫,但他們都是相似動物,一樣會吃飯,睡覺,有年齡。

ood

  1. 建立母親建構子(共同資料屬性)
  2. 母親建構子的Method(共同行為)
  3. 建立小孩1建構子,用call宣告繼承母親的資料屬性
  4. 補足小孩1的獨特資料屬性
  5. create宣告繼承母親的Method行為
  6. 補足小孩1的獨特Method行為
  7. 同3456,建立小孩2建構子
  8. 資料建構完畢,開始印出來
  9. 用new呼叫各小孩自己的建構子
canvas#mycanvas
   /************************
   ****母親區Creature*******
   ************************/
  background(255, 255, 255);
  //1 Creature 共通資料屬性母建構子
  var Creature = function(nickname, age, x, y) {
   this.nickname = nickname;
   this.age = age + "yrs old";
   this.x = x;
   this.y = y;
  };
  //2 Creature Method  母建構子的共通行為
  Creature.prototype.talk = function() {
   text("SUPPP!?!?!?!??!", this.x - 40, this.y + 70);
  };

  /************************
   ****小孩1區Hopper********
   ************************/

  //3 繼承母資料屬性
  var Hopper = function(nickname, age, x, y) {
   //call後面是母資料屬性的資料
   Creature.call(this, nickname, age, x, y);

   //4 省略小孩獨特資料屬性
   //補充:增加小孩獨特資料屬性方法
   //this.cover = cover;
  };
  //5 繼承母行為method
  Hopper.prototype = Object.create(Creature.prototype);

  //6.1 增加小孩獨特行為method
  Hopper.prototype.draw = function() {

   //face
   fill(230, 230, 250);
   ellipse(this.x, this.y, 60, 100);

   //eyes
   fill(0, 0, 0);
   line(this.x + 10, this.y - 25, this.x + 25, this.y - 25);
   line(this.x - 10, this.y - 25, this.x + 5, this.y - 25);

   //month
   fill(252, 65, 65);
   triangle(this.x, this.y + 20, this.x + 10, this.y + 10, this.x + 20, this.y + 20);
   //txt
   fill(0, 0, 139);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 40, this.y - 60);
  };
  //6.2 增加小孩獨特行為2
  Hopper.prototype.hooray = function() {
   text("Hooooray!!!", this.x - 30, this.y + 70);
  };

  /************************
   ****小孩2區Winston********
   ************************/

  //3 繼承母資料屬性
  var Winston = function(nickname, age, x, y) {
   Creature.call(this, nickname, age, x, y);
  };

  //4 省略小孩獨特資料屬性
  //5 繼承母行為method
  Winston.prototype = Object.create(Creature.prototype);

  //6 增加小孩獨特行為method
  Winston.prototype.draw = function() {
   // face
   fill(255, 255, 0);
   ellipse(this.x, this.y, 90, 90);
   // eyes
   fill(46, 46, 41);
   ellipse(this.x - 20, this.y - 20, 15, 15);
   ellipse(this.x + 24, this.y - 25, 15, 15);
   // mouth
   fill(252, 65, 65);
   ellipse(this.x + 13, this.y + 18, 40, 40);
   var txt = this.nickname + ", " + this.age;
   text(txt, this.x - 50, this.y - 60);
  };

  /**********資料建構完畢,下面印出來*************/

  /******呼叫Hopper跟Hopper2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var lilHopper = new Hopper("Little Hopper", 15, 50, 240);
  var bigHopper = new Hopper("Big Hopper", 30, 50 + 200, 240);
  //B 呼叫行為(實體化)
  bigHopper.draw();
  bigHopper.hooray();
  lilHopper.draw();
  lilHopper.talk();

  /******呼叫Winston跟Winston2.0*********/

  //A 呼叫資料(等於建立小孩的物件資料)
  var winstonTeen = new Winston("Winsteen", 15, 50, 70);
  var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 50 + 200, 70);
  //B 呼叫行為(實體化)
  winstonTeen.draw();
  winstonTeen.talk();
  winstonAdult.draw();
Display

See the Pen OOD2 by Ian Chen (@ianchen0419) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *