owned this note
owned this note
Published
Linked with GitHub
---
title: javascript 6.9 OOP 物件導向程式
tags: javascript, 5x
---
6.9 0326 javascript OOP 物件導向程式
===
物件導向程式: 一種設計方法
透過擬物化的方式來看待程式碼
物件`object` = 屬性`property`(形容詞)+ 行為`behavior`(動詞)
目的：讓程式碼更容易被管理
# OOP的特性
## 封裝
e.g.遙控器
按下遙控器上的不同按鈕，切換頻道、調音量
e.g.你知道貓會叫，但是你不知道牠是怎麼叫出聲音的
## 繼承
可以把共同的屬性或行為定義在上一層
e.g. 界門綱目科屬種
靈長目：都有兩手對握的功能
e.g. 所有動物都會吃東西
貓和狗都是動物，都會吃東西
# 物件
## 1.使用`Object()`函數, `[]`
`key` - `value`的組合
`hero1['name']` = `'孫悟空'`;
等號 - 分號
javascript
```javascript=
var hero1 = new Object();
/* 中括號 */
hero1['name'] = '孫悟空';
hero1['skill'] = ['龜派氣功', '元氣玉', '瞬間移動'];
hero1['power'] = 100000;
/* console 印出 */
console.log(hero1);
console.log(hero1['name']); //"孫悟空" 中括弧
console.log(hero1.name); //"孫悟空" 小數點
console.log(hero1.skill[0]); //"龜派氣功"
```
console
```bash=
[object Object] {
name: "孫悟空",
power: 100000,
skill: ["龜派氣功", "元氣玉", "瞬間移動"]
}
"孫悟空"
"孫悟空"
"龜派氣功"
```
## 2. 用`{}` <推薦使用>
`key` - `value`的組合
`name`: `'皮卡丘'`,
冒號 - 逗號
javascript
```javascript=
var hero2 = {
name: '皮卡丘',
skill: ['十萬伏特', '鋼鐵尾巴'],
power: '100000伏特'
}
console.log(hero2);
```
console
```bash=
[object Object] {
name: "皮卡丘",
power: "100000伏特",
skill: ["十萬伏特", "鋼鐵尾巴"]
}
```
## 物件裡面再包物件
### 1. 屬性裡加入更多屬性
```javascript=
var hero2 = {
name: '皮卡丘',
skill: ['十萬伏特', '鋼鐵尾巴'],
power: '100000伏特',
location: {
planet: '地球',
address: '日本'
}
}
console.log(hero2); // 整個物件
console.log(hero2.skill[0]); //"十萬伏特"
console.log(hero2.location.address); //"日本"
```
console
```bash=
[object Object] {
location: [object Object] {
address: "日本",
planet: "地球"
},
name: "皮卡丘",
power: "100000伏特",
skill: ["十萬伏特", "鋼鐵尾巴"]
}
"十萬伏特"
"日本"
```
### 2. 屬性裡加入可以回傳值的`function` (行為)
javascript
```javascript=
var hero3 = {
name: '小火龍',
skill: ['噴射火焰', '火花'],
power: '1000度',
location: {
planet: '火星',
address: '平原'
},
finalSkill: function() {
return this.skill[0]; // this: hero3本身
}
}
console.log(hero3.location.planet);
console.log(hero3.finalSkill());
```
console
```bash
"火星"
"噴射火焰"
```
### 3. 屬性裡印出的`function`, 並用`物件.行為`呼叫
javascript
```javascript=
var hero2 = {
name: '皮卡丘',
skill: ['十萬伏特', '鋼鐵尾巴'],
power: '100000伏特',
location: {
planet: '地球',
address: '日本'
},
attack: function() {
console.log('攻擊!!' + this.power);
}
}
hero2.attack();
```
console
```bash
"攻擊!!100000伏特"
```
# function constructor 函式建構式
## 函式建構式：作為樣板，產生新物件
`var 新物件 = new 樣板(參數);`
e.g. 製作雞蛋糕的烤盤，呈現出不同模型（類別）
```javascript=
//烤盤
function Pokemon(name, skill) {
this.name = name; //帶的任何參數進來，指定給this.name
this.skill = skill;
}
//雞蛋糕
var pikachu = new Pokemon('皮卡丘', '十萬伏特');
var firedragon = new Pokemon('小火龍','噴射火焰');
console.log(pikachu.skill);
console.log(firedragon.skill);
```
console
```bash
"十萬伏特"
"噴射火焰"
```
## 如果建立新物件時忘了加new
```javascript=
var turtle = Pokemon('傑尼龜','水槍');
console.log(turtle); //undefined
```
沒有`new`新物件, 等於一個沒做任何事的function，回傳undefined
```javascript=
function hello(a, b) {
return undefined;
}
hello(1, 2);
```
有new與忘了new的比較：
javascript
```javascript=
var frog = new Pokemon('妙蛙種子','藤鞭');
var turtle = Pokemon('傑尼龜','水槍');
console.log(frog);
console.log(turtle); //undefined
```
console
```bash=
[object Object] {
name: "妙蛙種子",
skill: "藤鞭"
}
undefined
```
## 函數建構式在new的當下已被`執行`
```javascript=
//烤盤
function Pokemon(name, skill) {
this.name = name; //帶的任何參數進來，指定給this.name
this.skill = skill;
console.log('new時順便執行');
}
var pikachu = new Pokemon('皮卡丘', '十萬伏特');
```
```bash
"new時順便執行"
```
# 幫Pokemon增加攻擊招式
## 寫在建構函式
範例:
javascript
```javascript=
//烤盤
function Pokemon(name, skill) {
this.name = name; //帶的任何參數進來，指定給this.name
this.skill = skill;
this.attack = function() {
var sound = this.name.slice(0, 2).repeat(2); //拿自己的名字前2個字元,重複2次
console.log('攻擊吧!' + this.name + '使用' + this.skill + '～' + sound);
//不可寫this.sound 因為sound變數是在attack function裡面
}
}
var pikachu = new Pokemon('皮卡丘', '十萬伏特');
var turtle = new Pokemon('傑尼龜','水槍');
pikachu.attack();
turtle.attack();
```
console
```bash
"攻擊吧!皮卡丘使用十萬伏特～皮卡皮卡"
"攻擊吧!傑尼龜使用水槍～傑尼傑尼"
```
## 寫在prototype 函式
function裡的function，可提出來變成prototype寫在外面
```javascript=
function Pokemon(name, skill) {
this.attack = function(){
}
}
```
改寫成這一段:
```javascript
Pokemon.prototype.attack = function(){
}
```
範例:
javascript
```javascript=
function Pokemon(name, skill) {
this.name = name; //帶的任何參數進來，指定給this.name
this.skill = skill;
// this.attack = function() {
// var sound = this.name.slice(0, 2).repeat(2); //拿自己的名字前2個字元,重複2次
// console.log('攻擊吧!' + this.name + '使用' + this.skill + '～' + sound);}
}
Pokemon.prototype.attack = function(){
var sound = this.name.slice(0, 2).repeat(2); //拿自己的名字前2個字元,重複2次
console.log('攻擊吧!' + this.name + '使用' + this.skill + '～' + sound);
}
var pikachu = new Pokemon('皮卡丘', '十萬伏特');
var turtle = new Pokemon('傑尼龜','水槍');
pikachu.attack();
turtle.attack();
```
Google Drive
Gist
Clipboard
Sign in with Wallet
