詳解js面向對象編程

轉自：http://segmentfault.com/a/1190000000713346

基本概念

ECMA關於對象的定義是：”無序屬性的集合，其屬性可以包含基本值、對象或者函數。“對象的每個屬性或方法都有一個名字，而每個名字都映射到一個值。

類

在現實生活中，相似的對象之間往往都有一些共同的組成特征。類，實際上是對象的設計藍圖或者制作配方。我們能基於相同的類創建出許多不同的對象，這些對象又會含有各自的屬性和方法。

封裝

封裝主要用於闡述對象中所包含（或封裝的內容），它通常由兩部分組成：

1. 相關的數據（用於存儲屬性）
2. 基於這些數據所能做的事（所能調用的方法）

聚合

聚合是指我們將現有對象合並成一個新對象的過程。例如：Book是由一個或多個author對象，publisher對象、若干chapter對象等組合而成的對象。

繼承

通過繼承這種方式，我們可以非常優雅地實現對現有代碼的重用。例如：我們定義了一個Person對象，他包含了wolk()，sleep(),speak(),eat()等方法，也包含了age,height,weight等屬性，這時當我們再定義一個coder對象的時候，你不必將上述的屬性和方法都重寫一遍，你只需繼承他即可，然后你只需將coder這個對象屬於他自己的那部分特殊功能寫出來。

多態

上述實例中，我們的coder對象繼承了person對象的一些屬性和方法，這意味着這兩個對象都實現了"speak"等方法，現在，我們的代碼中有一個叫做James的變量，即便是我們不知道它是一個person對象還是一個coder對象的情況下，也依然可以直接調用該對象的"speak"方法
。類似這種不同對象通過相同的方法調用實現各自行為的能力，我們就稱之為“多態”

創建對象

我們可以通過對象直接量、new關鍵字和object.create()函數來創建。

對象直接量

創建對象最簡單的方法就是在js中使用對象直接量，它是由若干名/值對組成的映射表，名/值對中間用冒號分隔，多個名/值對用逗號分隔。整個映射表用花括號（{}）括起來。

var empty = {};//沒有任何屬性的對象 var fruits = {apple:big , orange:yellow}; var company = { CEO : "Tim Cook",//屬性名字里有空格，必須用字符串表示 Designer:"Ive"; "for":"all audiences",//"for"是保留字，必須用引號 employees:{ firstname:"David", //這里的屬性名都沒有引號 lastname:"fill" //這個屬性的值是一個對象 } }; 

對象里還可以嵌套對象（company里嵌套了employees對象）

new關鍵字創建對象

關鍵字new后面跟隨一個函數調用，這個函數稱為構造函數（constructor），javascript語言核心的原始類型都包含內置的構造函數。

<script type="text/javascript"> var obj = new Object();//創建一個空對象，和{}一樣 var arr = new Array();//創建一個空數組，和[]一樣 </script> 

js原型->參照：javascript學習總結（五）原型和原型鏈詳解

工廠模式

由於ECMAScript中無法創建類，因此，開發人員發明了一種函數，用函數來封裝以特定接口創建對象的細節：

<script type="text/javascript"> var Car = (function(){ var Car = function(model,year,miles){ this.model = model; this.year = year; this.miles = miles; }; return function(model,year,miles){ return new Car(model,year,miles); } })(); var Benz = new Car("Benz",2014,1000); var Audi = new Car("Audi",2013,800); </script> 

什么時候使用工廠模式?

以下幾種情景下工廠模式特別有用：

對象的構建十分復雜
需要依賴具體環境創建不同實例
處理大量具有相同屬性的小對象

元素、屬性和方法

說到數組，我們常說其中包含的是元素，而當說到對象的時候，我們常會說其中包含的是屬性。另外，對象的屬性也可以是一個函數，因為函數本身也是一種數據，在這種情況下，我們會稱該屬性為方法：

<script type="text/javascript"> var wolf = { name :wolffy； run:function(){ alert("wolf,wolf!"); } } </script> 

調用對象方法

<script type="text/javascript"> var parrot = { name : "bage", hair : "brown", say : function(){ alert( 'I am ' + parrot.name); } } parrot.say(); </script> 

注：

 1. 盡量使用點號表示法來訪問對象的屬性和方法。
 2. 不要在對象中使用帶引號的屬性標示。

構造器函數

另外，我們還可以使用構造器函數的方式來創建對象。看下面一個例子：

<script type="text/javascript"> function Person(name,age,occupation){ this.name = name; this.age = age; this.occupation = occupation; this.sayName = function(){ alert(this.name); } } var person1 = new Person("trigkit4",21,"student"); var person2 = new Person("Jack",25,"Engineer"); </script> 

優點

使用構造器函數的好處在於，它可以在創建對象時接收一些參數。按照慣例，構造函數的函數名應始終以一個大寫字母開頭，以區分普通函數。

區別

構造函數與普通函數的區別在於調用的方式不同，任何函數，只要通過new操作符來調用，那它就可以作為構造函數。

缺點

使用構造函數的主要問題是，每個方法都要在每個實例上重新創建一遍。

擴展閱讀：javascript學習總結（五）原型和原型鏈詳解

全局對象

事實上，程序所在的宿主環境一般都會為其提供一個全局對象，而所謂的全局變量其實都只不過是該對象的屬性罷了。

例如，當程序所在的宿主環境是web瀏覽器時，它所提供的全局對象就是window了。

內建對象

內建對象大致分為三組：

• 數據封裝類對象——包括Object、Array、Boolean、Number和String。這些對象代表着javascript中不同的數據類型，並且都擁有各自不同的typeof返回值，以及undefined和null狀態
• 工具類對象——包括Math、Date、RegExp等用於提供遍歷的對象
• 錯誤類對象——包括一般性錯誤對象及其它各種更特殊的錯誤類對象

Object是js中所有對象的父級對象，這意味着我們創建的所有對象都繼承於此。

所謂的空對象實際上並不是完全無用的，它還是包含了一些屬性和方法的：

• 返回構造器函數的構造器屬性
• 返回對象描述字符串的toString()方法
• 返回對象單值描述信息的valueOf()方法

例如：

var o = new Object(); o.toString();//[object Object] 

Array

Array()是一個用來構建數組的內建構造器函數。數組主要由如下三種創建方式：

array = new Array() array = new Array([size]) array = new Array(element0, element1, ..., elementN) 

---

Array 對象方法
方法                 描述

concat()    連接兩個或更多的數組，並返回結果。
join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。 pop() 刪除並返回數組的最后一個元素 push() 向數組的末尾添加一個或更多元素，並返回新的長度。 reverse() 顛倒數組中元素的順序。 shift() 刪除並返回數組的第一個元素 slice() 從某個已有的數組返回選定的元素 sort() 對數組的元素進行排序 splice() 刪除元素，並向數組添加新元素。 toSource() 返回該對象的源代碼。 toString() 把數組轉換為字符串，並返回結果。 toLocaleString() 把數組轉換為本地數組，並返回結果。 unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。 valueOf() 返回數組對象的原始值 

concat()方法：合並數組

[1,2]concat([3,4],[5,6]);//[1,2,3,4,5,6] 

join()方法：

<script type="text/javascript"> var a = [1,2,3]; a.join("");// =>"123" </script> 

pop()方法：移除數組最后一個元素，並將其返回

<script type="text/javascript"> var fruits = ['apple','banana','pineapple']; fruits.pop();// pineapple console.log(fruits);//["apple","banana"] </script> 

shift()方法：刪除並返回數組的第一個元素。

<script type="text/javascript"> var a = [1,2,3]; a.shift();//1 console.log(a);//[2,3] </script> 

slice(start,end)方法：截取數組的某一部分，不會對原數組進行任何修改

<script type="text/javascript"> var num = ['a','b','c','d','e']; console.log(num.slice(1,4));//["b","c","d"] console.log(num);//["a","b","c","d","e"] </script> 

splice(start,delete_count,i1,i2…)方法：刪除數組元素的同時添加新的元素。i1,i2為要插入的新元素

<script type="text/javascript"> var arr = ['js','css','html','php','c']; arr.splice(1, 2,'python','jquery');//["css","html"] console.log(arr);//["js","python","jquery""php","c"] </script> 

---

Array對象屬性
屬性              描述
constructor     返回對創建此對象的數組函數的引用。
length 設置或返回數組中元素的數目。 prototype 使您有能力向對象添加屬性和方法。 

DOM和BOM

window對象是BOM的頂層(核心)對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象

有關BOM和DOM的討論，詳見我這篇文章：javascript學習總結（三）BOM和DOM詳解

函數

有關函數部分的討論，詳見我這篇文章：javascript學習總結（四）function函數部分

---

這里討論下幾個js的內建函數：

parseInt() 函數可解析一個字符串，並返回一個整數。

parseInt(string, radix) 

radix:進制基數，其默認值是10（即十進制）。

parseInt('10e+3');//10 parseInt('FF');//NaN parseInt('FF',16)//255 

parseFloat():將接受的參數轉換成浮點值並返回。

parseFloat('123.456t');//123.456 

isNaN()：該函數是“is Not a Number”的縮寫，用於判斷其參數是否是一個有效數字，如果是就返回true，否則返回false。

補充：

自執行函數：保證全局命名空間不被污染的模式。通過把代碼裝在一個匿名函數中並立刻自行調用。如此一來，該函數中的所有變量都是局部的（假設使用了var關鍵字）。

（function(){ //code })();//最后一個圓括號用於執行 

有關這部分，也可參加我的另一篇文章：詳解js閉包

JSON

詳見：javascript學習總結（六）數據類型和JSON格式

style對象

style.display = ""；是清除`display`樣式，`display`將使用默認值（塊元素會變成block，內聯元素會變成inline） style.display="none"； 中“none”是一個值，表示元素將隱藏