[toc] ##對象部分 ### Object類型 `Object` 是一個無序的集合，可以存放任意類型對象，所有其他對象都繼承自這個對象。 創建`Object`類型有兩種，一種是使用`new`運算符，一種是字面量表示法。 1.使用new運算符創建Object ``` var?obj =?new?Object();//注意大寫，也可以直接寫成Object() ``` 注意，通過`new Object()` 的寫法生成新對象，與字面量的寫法 `obj = {}` 是等價的。 2. 使用字面量方式創建： ``` var obj = { name : 'trigkit4', age : 21 };//分號最好加上 ``` 在使用字面量聲明`Object`對象時，不會調用`Object()`構造函數（FF除外） ### Object.prototype對象 所有構造函數都有一個`prototype`屬性，指向一個原型對象。 ``` Object.prototype.print = function(){ console.log(this)}; var obj = new Object(); obj.print() // Object ``` 實例`obj`直接繼承了`Object.prototype`的屬性和方法 ``` 1.對象只是一種特殊的數據。對象擁有屬性和方法。 JavaScript 是面向對象的語言，但 JavaScript 不使用類。 JavaScript 基于 [prototype][1]，而不是基于類的。 2.屬性：是隸屬于某個特定對象的變量。方法：是只有某個特定對象才能調用的函數。 3.js對象是屬性和方法的集合。一個方法就是一個函數，是對象的成員。屬性是一個值或一組值（以數組或對象的形式），是對象的成員。 4.js對象是基于構造器函數的，使用構造器函數創建一個新對象時，就可以說是實例化了一個新對象。屬性是構造器函數內部的變量。 ``` 使用構造器函數實例化的對象： ``` cat = new Animal(); ``` `Javascript`是一種基于對象（objectbased）的語言，你遇到的所有東西幾乎都是對象。但是，它又不是一種真正的面向對象編程（OOP）語言，因為它的語法中沒有class（類）。 ``` <script type="text/javascript"> //對象是名/值對的集合 var browser = { //對象是由花括號括起來的 name:"Firefox", kernel:"Gecko" }; </script> ``` ``` //通過點號（.）或“[]”來訪問對象的屬性 browser.name //"Firefox" browser["kernel"] //"Gecko" ``` 對象（objct）是屬性（property）的集合，每個屬性都由“名/值對”構成，js同樣定義了一個特殊的對象——數組，它是帶有編號的值的有序集合。 `js`還定義了一個特殊的對象，函數是具有與他相關聯的可執行代碼的對象，通過調用函數來執行代碼，并返回運算結果。 JS中沒有[類][3]()，但是它取了一個新的名字叫“`原型對象`”，因此"類==原型對象" ### 二：類(原型對象)和對象(實例)的區別與聯系 ``` 1.類(原型對象)是抽象，是概念的，代表一類事物。 2.對象是具體的，實際的，代表一個具體的事物。 3.類(原型對象)是對象實例的模板，對象實例是類的一個個體。 ``` 一個常見的誤解是數字的字面值（literal）不是對象。這是因為 JavaScript 解析器的一個錯誤，它試圖將點操作符解析為浮點數字面值的一部分。 有很多變通方法可以讓數字的字面值看起來像對象。 ``` 2..toString(); // 第二個點號可以正常解析 2 .toString(); // 注意點號前面的空格 (2).toString(); // 2先被計算 ``` ### 刪除屬性 刪除屬性的唯一方法是使用 delete 操作符；設置屬性為 `undefined` 或者 `null` 并不能真正的刪除屬性，而僅僅是移除了屬性和值的關聯。 ### JavaScript面向對象三大特征 ``` 封裝：不考慮內部實現，只考慮功能使用 繼承：從已有對象上，繼承出新的對象 多態：所謂多態，就是指一個引用在不同情況下的多種狀態， ``` ### 1.封裝 封裝就是要把屬于同一類事物的共性(包括屬性與行為)歸到一個類中,以方便使用.比如人這個東東,可用下面的方式封裝: 人{ ``` 年齡(屬性一) 身高(屬性二) 性別(屬性三) 做事(行為之一) 走路(行為之二) 說話(行為之三) ``` } 封裝的好處： ``` 封裝保護了內部數據的完整性； 封裝使對象的重構更輕松； 弱化模塊間的耦合，提高對象的可重用性； 有助于避免命名空間沖突； ``` 看下面一個例子： ``` <script type="text/javascript"> //創建一個空對象 var boy = {}; //按照原型對象的屬性賦值 boy.name = "小明"; boy.age = 12; var girl = {}; girl.name = "小紅"; girl.age = 10; </script> ``` 這就是最簡單的封裝了，把兩個屬性封裝在一個對象里面。但是，這樣的寫法有兩個缺點，一是如果多生成幾個實例，寫起來就非常麻煩；二是實例與原型之間，沒有任何辦法，可以看出有什么聯系。 ### 構造函數模式 為了解決從原型對象生成實例的問題，Javascript提供了一個構造函數（`Constructor`）模式。 所謂"`構造函數`"，其實就是一個普通函數，但是內部使用了`this`變量。對構造函數使用new運算符，就能生成實例，并且`this`變量會綁定在實例對象上。 比如`boy`和`girl`的現在就可以這樣寫： ``` <script type="text/javascript"> function Person(name,age){ this.name = name; this.age = age; } </script> ``` 我們現在就可以生成實例對象了。 ``` <script type="text/javascript"> var boy = new Person("小明",12); var girl = new Person("小紅",10); alert(boy.name); //小明 alert(boy.age); //12 </script> ``` 這時`boy`和`girl`會自動含有一個`constructor`屬性，指向它們的構造函數。 ``` alert(boy.constructor == Person); //true alert(girl.constructor); //輸出整串構造函數代碼，自己試試吧 ``` `Prototype`模式 `Javascript`規定，每一個構造函數都有一個`prototype`屬性，指向另一個對象。這個對象的所有屬性和方法，都會被構造函數的實例繼承。 這意味著，我們可以把那些不變的屬性和方法，直接定義在`prototype`對象上。 ``` <script type="text/javascript"> function Person(name,age){ this.name = name; this.age = age; } Person.prototype.type = "人類"; Person.prototype.eat = function(){ alert("吃米飯"); } ``` 然后，生成實例: ``` <script type="text/javascript"> var boy = new Person("小明","12"); var girl = new Person("小紅","10"); alert(boy.type); // 人類 // boy.eat(); // 吃飯 </script> ``` 這時所有實例的`type`屬性和`eat()`方法，其實都是同一個內存地址，指向`prototype`對象，因此就提高了運行效率。 ``` alert(boy.eat == girl.eat);?//true ``` 原型屬性是一個內置屬性，它指定了對象所擴展的構造器函數。 下面的代碼為`Animal`構造器函數添加一個新的屬性`size`，這個新屬性是`cat`對象的原型屬性。通過使用原型屬性，所有擴展`Animal`構造器函數的對象就可以訪問`size`屬性 ``` cat = new Animal("feline","meow", "walk/run"); cat.prototype.size = "fat"; ``` 在這種情況下，所有的`Animal`對象的`size`屬性都是“fat”。原型默認為`Object`的新實例, 由于仍是對象, 故可以給該對象添加新的屬性。就好像`style`是`javascript`的一個對象一樣，也可以往`style`后繼續添加屬性。 ``` <script type="text/javascript"> /*定義一個Person類*/ function Person(_name,_age,_salary) { //Person類的公開屬性，類的公開屬性的定義方式是：”this.屬性名“ this.Name = _name; //Person類的私有屬性，類的私有屬性的定義方式是：”var 屬性名“ var Age = _age; var Salary = _salary; //定義Person類的公開方法(特權方法)，類的公開方法的定義方式是：”this.functionName=function(){.....}“ this.Show = function () { alert("Age=" + Age + "\t" + "Salary=" + Salary);//在公開方法里面訪問類的私有屬性是允許的 }; } </script> ``` 對象在查找某個屬性的時候，會首先遍歷自身的屬性，如果沒有則會繼續查找`[[Prototype]]`引用的對象，如果再沒有則繼續查找`[[Prototype]].[[Prototype]]`引用的對象，依次類推，直到`[[Prototype]].….[[Prototype]]`為`undefined`（`Object`的`[[Prototype]]`就是`undefined`） 簡單說就是通過對象的`[[Prototype]]`保存對另一個對象的引用，通過這個引用往上進行屬性的查找，這就是原型鏈。 ### null 對象 `js`給變量賦`null`值的作用在于： 賦值一個空指針，容易讓人理解這個變量是準備用來存放對象的。也方便調錯 ### 全局的window對象 `JavaScript`中的任何一個全局函數或變量都是`window`的屬性。 `self`對象與`window`對象完全相同，`self`通常用于確認就是在當前的窗體內。 window的主對象主要有如下幾個： ``` JavaScript document 對象 JavaScript frames 對象 JavaScript history 對象 JavaScript location 對象 JavaScript navigator 對象 JavaScript screen 對象 ``` ### 幾個常用方法 ``` valueof()方法：返回指定對象的原始值 split() 方法將字符串分割為字符串數組，并返回此數組。 indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。 substring() 方法用于提取字符串中介于兩個指定下標之間的字符。 substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。 join()方法用于把數組中的所有元素放入一個字符串。 arrayObject.join(分隔符) reverse() 方法用于顛倒數組中元素的順序。 slice() 方法可從已有的數組中返回選定的元素。 ``` ##對象字面量 對象字面量是用于創建包含大量屬性的過程，如下所示： ``` <script type="text/javascript"> var company = { name : "Microsoft", ages : 39, employees : 99000, CEO : "Nadella" }; </script> ``` 這里需要注意的是屬性和屬性值以冒號(`:`)隔開；多個屬性用逗號(`,`)隔開。對象字面量亦可以定義方法，只需在這個對象的屬性上寫上`function`就行，這是一個匿名函數，調用它只需要寫上他的`方法名()`即可。 ``` <script type="text/javascript"> var dog = { name:"husky", age:2, run:function(){ return "123"; } } alert(dog.run());//如果輸入dog.run,那么會彈出它后面的function部分的代碼 </script> ``` ##基本值類型包裝器 `js`有五種基本的值類型：`number、string、Boolean、null和undefined`。除了`null和undefined`外，其他三個都具有所謂的基本包裝對象。可以使用內置構造函數`Number()`、`String()`和`Boolean()`創建包裝對象。 ``` var num = new Number(10); console.log(typeof num);//object ``` ##Object()方法 ``` Object() // 返回一個空對象 Object(undefined) // 返回一個空對象 Object(null) // 返回一個空對象 Object(1) // 等同于 new Number(1) Object('foo') // 等同于 new String('foo') Object(true) // 等同于 new Boolean(true) Object([]) // 返回原數組 Object({}) // 返回原對象 Object(function(){}) // 返回原函數 ``` ##數組部分 ### 1.Array 對象 `Array` 對象：提供對創建任何數據類型的數組的支持。 ``` arrayObj = new Array() arrayObj = new Array([size]) arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) ``` 定義：`var arr = [2,3,45,6]; var arr = new Array(2,4,5,7)` 兩者是定義沒有任何差別，`[]`的性能高，因為代碼短。 使用數組和對象字面量：var aTest = `[]`；創建數組時，使用數組字面量是個好選擇；類似的，對象字面量也可用于節省空間。以下兩行是相等的，但是使用對象字面量的更加簡短： ``` var oTest = new Object; //盡量不用 var oTest = { }; //最好的選擇，或者var 0Test = [ ]; ``` 遍歷為了達到遍歷數組的最佳性能，推薦使用經典的 `for` 循環。 ``` var list = [1, 2, 3, 4, 5, ...... 100000000]; for(var i = 0, l = list.length; i < l; i++) { console.log(list[i]); } ``` 上面代碼有一個處理，就是通過 `l = list.length` 來緩存數組的長度。 ### Array 構造函數 由于 `Array` 的構造函數在如何處理參數時有點模棱兩可，因此總是推薦使用數組的字面語法 `[]` 來創建數組。 因此下面的代碼將會使人很迷惑： ``` new Array(3, 4, 5); // 結果: [3, 4, 5] new Array(3) // 結果: []，此數組長度為 3 ``` 應該盡量避免使用數組構造函數創建新數組。推薦使用數組的字面語法。它們更加短小和簡潔，因此增加了代碼的可讀性。 ##Array數組的屬性 Array數組的3個屬性：`length屬性、prototype屬性、constructor屬性` ### 1.length屬性 Length屬性表示數組的長度，即其中元素的個數。因為數組的索引總是由0開始，所以一個數組的上下限分別是：0和length1。和其他大多數語言不同的是，JavaScript數組的length屬性是可變的，這一點需要特別注意。 ### 2.prototype屬性 返回對象類型原型的引用。`prototype`屬性是`object`共有的。 對于`Array`數組對象，以以下例子說明`prototype`屬性的用途。 給數組對象添加返回數組中最大元素值的方法。要完成這一點，聲明一個函數，將它加入`Array.prototype`，并使用它。 ``` function array\_max() { var i,max=this[0]; for(i=1;i<this.length;i++) { if(max<this[i]) max=this[i]; } return max; } Array.prototype.max=array_max; var x=new Array(1,2,3,4,5,6); var y=x.max(); ``` *該代碼執行后，y保存數組x中的最大值，或說6。* ### 3.constructor屬性 表示創建對象的函數。說明：`constructor`屬性是所有具有`prototype`的對象的成員。它們包括除`Global`和`Math`對象以外的所有`JScript`固有對象。`constructor`屬性保存了對構造特定對象實例的函數的引用。 例如： ``` x = new String("Hi"); if(x.constructor==String) //進行處理（條件為真）。 //或 function MyFunc{ //函數體。 } y=new MyFunc; if(y.constructor==MyFunc)//進行處理（條件為真）。 ``` 對于數組來說： ``` y = new Array(); ``` ##Array 對象方法 方法描述concat()連接兩個或更多的數組，并返回結果。join()把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。pop()刪除并返回數組的最后一個元素push()向數組的末尾添加一個或更多元素，并返回新的長度。reverse()顛倒數組中元素的順序。shift()刪除并返回數組的第一個元素slice()從某個已有的數組返回選定的元素sort()對數組的元素進行排序splice()刪除元素，并向數組添加新元素。toSource()返回該對象的源代碼。toString()把數組轉換為字符串，并返回結果。toLocaleString()把數組轉換為本地數組，并返回結果。unshift()向數組的開頭添加一個或更多元素，并返回新的長度。valueOf()返回數組對象的原始值 ### sort()方法 語法 ``` arrayObject.sort(sortby) ``` `sortby`可選。規定排序順序。必須是函數。 ``` var arr = [11,2,28,4,5,1]; console.log(arr.sort());//return [1, 11, 2, 28, 4, 5] ``` 為毛這里的11、28沒有按照順序來排列呢？這是因為不帶參數的`sort`是按照字符編碼的順序進行排序的。 那么，如果要讓數組元素按照從小到大排序呢？看下面代碼： ``` var arr = [11,2,28,4,5,1]; console.log(arr.sort(function(a,b){ return ab;//return [1, 2, 4, 5, 11, 28] })); ``` 如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下： ``` 若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。 若 a 等于 b，則返回 0。 若 a 大于 b，則返回一個大于 0 的值。 ``` 附上一張數組的思維導圖：