詳解js面向對象編程

基本概念

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

類

在現實生活中，類似的對象之間每每都有一些共同的組成特徵。類，其實是對象的設計藍圖或者製做配方。咱們能基於相同的類建立出許多不一樣的對象，這些對象又會含有各自的屬性和方法。

封裝

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

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

建立對象

咱們能夠經過對象直接量、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」是一個值，表示元素將隱藏