1.面向?qū)ο蟮母拍?/h2>

1.1什么是面向?qū)ο螅?/h3>

1 .面向?qū)ο笫且环N思維方法
2.面向?qū)ο笫且环N編程方法
3.面向?qū)ο蟛⒉恢会槍δ骋环N編程語言

1.2面向?qū)ο蠛兔嫦蜻^程的區(qū)別

1.面向過程過程側(cè)重整個(gè)問題的解決步驟，著眼局部或者具體
2.面向?qū)ο髠?cè)重具體的功能，讓某個(gè)對象具有這樣的功能。更加側(cè)重于整體。

1.3面向?qū)ο蟮膶?shí)現(xiàn)方式

1.基于類的面向?qū)ο?br> 2.基于原型的面向?qū)ο?/p>

1.4訪問對象的屬性

訪問一個(gè)對象的屬性，我們可以直接通過 對象.屬性名 和 對象[屬性名] 來訪問。

alert(person.name);  // 訪問person對象的 name屬性值
person.age = 30;  //修改person對象的 age 屬性
person.eat();  //既然是調(diào)用方法(函數(shù)) 則一定還要添加 ()來表示方法的調(diào)用
alert(person["name"]);  //

兩種使用方式有一些不同的地方：

1. 對象.屬性名的方式，只適合知道了屬性的名字，可以直接寫。比如： person.age 。如果屬性名是個(gè)變量，則這種方法無效， 對象.變量名 會(huì)出現(xiàn)語法錯(cuò)誤。
2. 對象[屬性名]，這種方式使用無限制。如果是字符串常量，則應(yīng)該用""或''引起來，如果是變量，可以直接使用。

person.age = 100; // ok
var n = "age";
person.a = 101; //  no ok 語法錯(cuò)誤
person["age"] = 102; // ok
person[n] = 103;  //ok

1.5給對象添加屬性

//給person對象的屬性 girlFriend 賦值。在賦值的過程中，首先會(huì)判斷這個(gè)屬性在JavaScript中是否存在，如果存在就對這個(gè)
//屬性重寫賦值。如果不存在，就給這個(gè)對象添加這個(gè)屬性，并賦值。
person.girlFrient = "小麗";  

//給對象添加方法
person.play = funcion(){
    alert("打擊high起來");
}

1.6刪除對象屬性

使用 delete 操作符

// 使用delete操作關(guān)鍵字，刪除person對象的屬性age
delete person.age;
alert(person.age);  //彈出undefined。表示這個(gè)屬性沒有定義

1.7使用for...in遍歷對象的屬性

for...in 可以遍歷對象的所有屬性。

// 在用for...in遍歷的時(shí)候， in前面的變量pn指的是屬性的名稱。
for (pn in person) {
    alert(pn + " " + person[pn]);
}

2.創(chuàng)建對象的方式

2.1使用new Object()創(chuàng)建

<script type="text/javascript">
    //使用object創(chuàng)建一個(gè)對象    完全等同于 var person = {};
    var person = new Object();
    //給對象添加屬性
    person.name = "李四";
    //給對象添加方法
    person.eat = function () {
        alert("好好吃")
    }
</script>

2.2使用工廠模式創(chuàng)建

<script type="text/javascript">
    function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name);
        };
        return o;
    }
    var person1 = createPerson("張三", 29, "js開發(fā)者");
    var person2 = createPerson("李四", 27, "java開發(fā)者");
</script>

2.3構(gòu)造函數(shù)創(chuàng)建對象

<script type="text/javascript">
    function Person (name, age, sex) {
        this.name = name;
      
        this.age = age;
        this.sex = sex;
        
        this.eat = function () {
            alert(this.name + "在吃東西");
        }
    }
    var p1 = new Person("張三", 20, "男");
    p1.eat();   //張三在在吃東西
    var p1 = new Person("李四", 30, "男");
    p1.eat();   //李四在在吃東西
    alert(p1 instanceof Person);    //
</script>

說明：

1. 使用構(gòu)造函數(shù)創(chuàng)建對象，必須使用關(guān)鍵字new ，后面跟著構(gòu)造函數(shù)的名，根據(jù)需要傳入相應(yīng)的參數(shù)。
2. 其實(shí)使用 new 構(gòu)造函數(shù)() 的方式創(chuàng)建對象，經(jīng)歷了下面幾個(gè)步驟。
   • 創(chuàng)建出來一個(gè)新的對象
   • 將構(gòu)造函數(shù)的作用域賦給新對象。意味著這個(gè)時(shí)候 this就代表了這個(gè)新對象。
   • 執(zhí)行構(gòu)造函數(shù)中的代碼。 在本例中就是給新對象添加屬性，并給屬性初始化值。
   • 構(gòu)造函數(shù)執(zhí)行完畢之后，默認(rèn)返回新對象。 所以外面就可以拿到這個(gè)剛剛創(chuàng)建的新對象了。

2.3.1構(gòu)造函數(shù)與普通函數(shù)的關(guān)系

1. 他們都是函數(shù)。構(gòu)造函數(shù)也是函數(shù)，也可以像普通的函數(shù)一樣進(jìn)行調(diào)用。 做普通函數(shù)調(diào)用的時(shí)候，因?yàn)闆]有創(chuàng)建新的對象，所以this其實(shí)指向了window對象。

function Person(){
    this.name = "張三";   // 把name屬性添加到了window對象上面
    alert(this === window);  //如果不作為構(gòu)造方法調(diào)用，則 是true
}
Person();  // 把構(gòu)造函數(shù)當(dāng)做普通方法調(diào)用。這個(gè)時(shí)候內(nèi)部的this指向了weindow
alert(window.name);  //張三
function Human(){
    this.name = "王五";
    alert(this instanceof window);  // false
    alert(this instanceof Human);  //true
}
var h = new Human();  //當(dāng)做構(gòu)造函數(shù)來調(diào)用，創(chuàng)建一個(gè)對象
alert(h.name);

2. 構(gòu)造函數(shù)和普通函數(shù)僅僅也僅僅是調(diào)用方式的不同。也就是說，隨便一個(gè)函數(shù)你如果用new 的方式去使用，那么他就是一個(gè)構(gòu)造函數(shù)。
3. 為了區(qū)別，如果一個(gè)函數(shù)想作為構(gòu)造函數(shù)，作為國際慣例，最好把這個(gè)構(gòu)造函數(shù)的首字母大寫。

3.理解原型

3.1 函數(shù)的原型對象

? 在JavaScript中，我們創(chuàng)建一個(gè)函數(shù)A(就是聲明一個(gè)函數(shù)), 那么瀏覽器就會(huì)在內(nèi)存中創(chuàng)建一個(gè)對象B，而且每個(gè)函數(shù)都默認(rèn)會(huì)有一個(gè)屬性 prototype 指向了這個(gè)對象( 即：prototype的屬性的值是這個(gè)對象 )。這個(gè)對象B就是函數(shù)A的原型對象，簡稱函數(shù)的原型。這個(gè)原型對象B 默認(rèn)會(huì)有一個(gè)屬性 constructor 指向了這個(gè)函數(shù)A ( 意思就是說：constructor屬性的值是函數(shù)A )。

? 看下面的代碼：

<body>
    <script type="text/javascript">
        /*
            聲明一個(gè)函數(shù)，則這個(gè)函數(shù)默認(rèn)會(huì)有一個(gè)屬性叫 prototype 。而且瀏覽器會(huì)自動(dòng)按照一定的規(guī)則
            創(chuàng)建一個(gè)對象，這個(gè)對象就是這個(gè)函數(shù)的原型對象，prototype屬性指向這個(gè)原型對象。這個(gè)原型對象
            有一個(gè)屬性叫constructor 指向了這個(gè)函數(shù)
            
            注意：原型對象默認(rèn)只有屬性：constructor。其他都是從Object繼承而來，暫且不用考慮。
        */
        function Person () {
            
        }       
    </script>
</body>

3.2使用構(gòu)造函數(shù)創(chuàng)建對象

? 當(dāng)把一個(gè)函數(shù)作為構(gòu)造函數(shù) (理論上任何函數(shù)都可以作為構(gòu)造函數(shù)) 使用new創(chuàng)建對象的時(shí)候，那么這個(gè)對象就會(huì)存在一個(gè)默認(rèn)的不可見的屬性，來指向了構(gòu)造函數(shù)的原型對象。 這個(gè)不可見的屬性我們一般用 [[proto]] 來表示，只是這個(gè)屬性沒有辦法直接訪問到。

? 看下面的代碼：

<body>
    <script type="text/javascript">
        function Person () {
            
        }   
        /*
            利用構(gòu)造函數(shù)創(chuàng)建一個(gè)對象，則這個(gè)對象會(huì)自動(dòng)添加一個(gè)不可見的屬性 [[proto]], 而且這個(gè)屬性
            指向了構(gòu)造函數(shù)的原型對象。
        */
        var p1 = new Person();
    </script>
</body>

觀察下面的示意圖：

說明：

1. 從上面的圖示中可以看到，創(chuàng)建p1對象雖然使用的是Person構(gòu)造函數(shù)，但是對象創(chuàng)建出來之后，這個(gè)p1對象其實(shí)已經(jīng)與Person構(gòu)造函數(shù)沒有任何關(guān)系了，p1對象的[[ proto ]]屬性指向的是Person構(gòu)造函數(shù)的原型對象。
2. 如果使用new Person()創(chuàng)建多個(gè)對象，則多個(gè)對象都會(huì)同時(shí)指向Person構(gòu)造函數(shù)的原型對象。
3. 我們可以手動(dòng)給這個(gè)原型對象添加屬性和方法，那么p1,p2,p3...這些對象就會(huì)共享這些在原型中添加的屬性和方法。
4. 如果我們訪問p1中的一個(gè)屬性name，如果在p1對象中找到，則直接返回。如果p1對象中沒有找到，則直接去p1對象的[[proto]]屬性指向的原型對象中查找，如果查找到則返回。(如果原型中也沒有找到，則繼續(xù)向上找原型的原型---原型鏈。 后面再講)。
5. 如果通過p1對象添加了一個(gè)屬性name，則對p1對象來說就屏蔽了原型中的屬性name。 換句話說：在p1中就沒有辦法訪問到原型的屬性name了。
6. 通過p1對象只能讀取原型中的屬性name的值，而不能修改原型中的屬性name的值。 p1.name = "李四"; 并不是修改了原型中的值，而是在p1對象中給添加了一個(gè)屬性name。

看下面的代碼：

<body>
    <script type="text/javascript">
        function Person () {        
        }
        // 可以使用Person.prototype 直接訪問到原型對象
        //給Person函數(shù)的原型對象中添加一個(gè)屬性 name并且值是 "張三"
        Person.prototype.name = "張三";
        Person.prototype.age = 20;

        var p1 = new Person();
        /*
            訪問p1對象的屬性name，雖然在p1對象中我們并沒有明確的添加屬性name，但是
            p1的 [[prototype]] 屬性指向的原型中有name屬性，所以這個(gè)地方可以訪問到屬性name
            就值。
            注意：這個(gè)時(shí)候不能通過p1對象刪除name屬性，因?yàn)橹荒軇h除在p1中刪除的對象。
        */
        alert(p1.name);  // 張三

        var p2 = new Person();
        alert(p2.name);  // 張三  都是從原型中找到的，所以一樣。

        alert(p1.name === p2.name);  // true

        // 由于不能修改原型中的值，則這種方法就直接在p1中添加了一個(gè)新的屬性name，然后在p1中無法再訪問到
        //原型中的屬性。
        p1.name = "李四";
        alert("p1：" + p1.name);
        // 由于p2中沒有name屬性，則對p2來說仍然是訪問的原型中的屬性。    
        alert("p2:" + p2.name);  // 張三  
    </script>
</body>

3.3與原型有關(guān)的幾個(gè)屬性和方法

3.3.1prototype屬性

prototype存在于構(gòu)造函數(shù)中，它指向于構(gòu)造函數(shù)的原型對象。

3.3.2 constructor屬性

constructor屬性存在于原型對象中，他指向了構(gòu)造函數(shù)

看下面的代碼：

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判斷一個(gè)對象的類型。  
    //typeof一般用來獲取簡單類型和函數(shù)。而引用類型一般使用instanceof，因?yàn)橐妙愋陀胻ypeof 總是返回objece。
    alert(p1 instanceof Person);    // true
    alert(typeof p1); // object
</script>

3.3.3 hasOwnProperty()方法

hasOwnProperty方法用來判斷一個(gè)屬性是否來自對象本身。

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex屬性是直接在p1屬性中添加，所以是true
    alert("sex屬性是對象本身的：" + p1.hasOwnProperty("sex"));
    // name屬性是在原型中添加的，所以是false
    alert("name屬性是對象本身的：" + p1.hasOwnProperty("name"));
    //  age 屬性不存在，所以也是false
    alert("age屬性是存在于對象本身：" + p1.hasOwnProperty("age"));
    
</script>

3.3.4 in操作符

in 操作符用來判斷一個(gè)屬性是否存在于這個(gè)對象中。但是在查找這個(gè)屬性時(shí)候，先在對象本身中找，如果對象找不到再去原型中找。換句話說，只要對象和原型中有一個(gè)地方存在這個(gè)屬性，就返回true

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 對象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //對象和原型中都不存在，所以false
    
</script>

回到前面的問題，如何判斷一個(gè)屬性是否存在于原型中：

如果一個(gè)屬性存在，但是沒有在對象本身中，則一定存在于原型中。

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    
    //定義一個(gè)函數(shù)去判斷原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "屬性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "屬性存在于對象中");
        }else {
            alert(prop + "對象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script

3.4組合使用原型模型和構(gòu)造函數(shù)模型創(chuàng)建對象

? 原型模式適合封裝方法，構(gòu)造方法模式適合封裝屬性，綜合兩種模式的優(yōu)點(diǎn)就有了組合模式。

<script type="text/javascript">
    //在構(gòu)造方法內(nèi)部封裝屬性
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //在原型對象內(nèi)封裝方法
    Person.prototype.eat = function (food) {
        alert(this.name + "愛吃" + food);
    }
    Person.prototype.play = function (playName) {
        alert(this.name + "愛玩" + playName);
    }
    
    var p1 = new Person("李四", 20);
    var p2 = new Person("張三", 30);
    p1.eat("蘋果");
    p2.eat("香蕉");
    p1.play("志玲");
    p2.play("鳳姐");
</script>

3.5動(dòng)態(tài)原型模式創(chuàng)建對象

前面講到的組合模式，也并非完美無缺，有一點(diǎn)也是感覺不是很完美。把構(gòu)造方法和原型分開寫，總讓人感覺不舒服，應(yīng)該想辦法把構(gòu)造方法和原型封裝在一起，所以就有了動(dòng)態(tài)原型模式。

? 動(dòng)態(tài)原型模式把所有的屬性和方法都封裝在構(gòu)造方法中，而僅僅在需要的時(shí)候才去在構(gòu)造方法中初始化原型，又保持了同時(shí)使用構(gòu)造函數(shù)和原型的優(yōu)點(diǎn)。

看下面的代碼：

<script type="text/javascript">
    //構(gòu)造方法內(nèi)部封裝屬性
    function Person(name, age) {
        //每個(gè)對象都添加自己的屬性
        this.name = name;
        this.age = age;
        /*
            判斷this.eat這個(gè)屬性是不是function，如果不是function則證明是第一次創(chuàng)建對象，
            則把這個(gè)funcion添加到原型中。
            如果是function，則代表原型中已經(jīng)有了這個(gè)方法，則不需要再添加。
            perfect！完美解決了性能和代碼的封裝問題。
        */
        if(typeof this.eat !== "function"){
            Person.prototype.eat = function () {
                alert(this.name + " 在吃");
            }
        }
    }
    var p1 = new Person("志玲", 40);
    p1.eat();   
</script>

說明：

• 組合模式和動(dòng)態(tài)原型模式是JavaScript中使用比較多的兩種創(chuàng)建對象的方式。
• 建議以后使用動(dòng)態(tài)原型模式。他解決了組合模式的封裝不徹底的缺點(diǎn)。

4 繼承