介紹

物件導向(Object Oriented Programming, 後面都已OOP簡寫, 因為我懶)是比較進階的程式概念, 我覺得很多人把OOP講的很複雜而且也寫得很複雜, 讓很多新手看得不要不要的.

我這一篇文章我要試著用我的的方式來解釋OOP, 讓新手可以馬上可以上手.

所以廢話不多說, let's do it.

物件導向, Object Oriented Programming, wtf?

我們先看一下mozilla 跟 wikipedia 官方的定義

mozilla:連結
物件導向程式設計 (Object-oriented programming, OOP) 是一種使用 abstraction 概念表達現實世界的程式設計方式。物件導向程式設計運用數個先前所建立的技術所組成，包含模組化 (modularity)、多型 (polymorphism) 以及封裝 (encapsulation) 。直到今天許多主流的程式語言 (如 Java, JavaScript, C#, C++, Python, PHP, Ruby 與 Objective-C) 也都支援物件導向程式設計。

wiki: 連結

物件導向程式設計（英語：Object-oriented programming，縮寫：OOP）是種具有物件概念的程式編程典範，同時也是一種程式開發的抽象方針。它可能包含資料、屬性、程式碼與方法。物件則指的是類別的例項。它將物件作為程式的基本單元，將程式和資料封裝其中，以提高軟體的重用性、靈活性和擴充功能性，物件裡的程式可以存取及經常修改物件相關連的資料。在物件導向程式編程裡，電腦程式會被設計成彼此相關的物件

看完這兩個定義,你應該會是

所以看完兩個官方說法, 這樣懂嗎? 如果懂, 那下面就可以不用看了. 如果不懂, 別擔心. 哥也是過來人, 哥教你.

說真的物件導向說真的就是一種整理程式碼的方式. 就這樣而已, 不要想的太複雜.

那我現在來教你怎麼整理你的code 變物件導向.

教學

我們先看範例, 再來講解. 這是昨天的例子(只是我把每段功能整理成函式function)

var todoList = []; 

// 2. 使用者可以顯示代辦清單
function displayTodos {
    console.log(todoList)
}

// 3. 使用者可以增加代辦事項
function addTodo(todo){
    todoList.push(todo)
}


//4. 使用者可以更改代辦事項
function changeTodo(position, todoText) {
    todoList[position] = todoText 
}


//5. 使用者可以刪除代辦事項
function deleteTodo(position) {
    todoList.splice(position,1) 
}

接下來我們把以上的變數(Variable)跟函式(function), 寫在一個object 裡面就好了. So Easy.

var todoList = {
  todos: ['item1', 'item2', 'item3'],
  displayTodos: function() {
    console.log('My todos', this.todos);
  },
  addTodo: function(todo){
    this.todos.push(todo);
    this.displayTodos()
  },
  changeTodo: function(position, todoText){
    this.todos[position] = todoText;
    this.displayTodos();
  },
  deleteTodo: function (position){
    this.todos.splice(position, 1);
    this.displayTodos();
  }
};

有一些東西要注意.

1. 當我們把變數跟函式寫在物件裡面, 變數就要改名叫屬性, 函式改成...中文好像還是函式(但是英文改成property)
2. 當我們在物件裡面我們要呼叫屬性或函式, 前面要加 this. 當我們在一個物件裡面 this 就是指這個物件.

結論: 物件導向把相關的變數跟函式打包在一起在一個物件裡面, 讓以後方便維護還有可擴展性.