[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 的值。
```
附上一張數組的思維導圖:

- JavaScript手冊
- Array函數
- String函數
- Date函數
- Mach函數
- Regexp函數
- Location函數
- Window 函數
- Other函數
- History函數
- Navigator函數
- Event函數
- Dom函數
- Json函數
- Sea.js手冊
- JavaScript學習總結
- 1.基礎部分
- 2.對象部分
- 3.BOM和DOM詳解
- 4.function函數部分
- 5.原型和原型鏈詳解
- 6.數據類型和JSON格式
- 7.Ajax和Http狀態字
- 8.正則表達式
- 9.事件詳解
- 前端相關網址
- 前端干貨文章
- JavaScript字符串常用的一些方法
- 前端開發知識體系
- JavaScript速成課
- 移動端開發技巧
- 移動端Web頁面問題解決方案
- 20個常用的CSS技巧
- 學習JavaScript設計模式
- 前端開發學習總結