Ting's Square 程式寫作之路

[Day19] JS: javascript 物件導向程式

Total : 1601 words.

物件導向程式是一種程式設計的方法,讓我們透過擬物化的方式來看待程式碼,讓程式碼更容易被管理。


目錄:


物件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();

相關連結

HackMD筆記