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