面向物件：不瞭解原理的情況下，會使用功能。

物件：黑盒子，不瞭解內部的結構，知道表面的各種操作。對外提供和一些操作。

JS中的面向物件

• 面向物件程式設計(OOP)的特點
•           抽象：抓住核心問題。（抽：把最主要的特徵、跟問題相關的特徵抽出來）
•           封裝：不考慮內部實現，只考慮功能使用。
•           繼承：從已有物件上，繼承出新的物件。（遺傳）從父類繼承出一些方法、屬性，子類又有一些自己的特性。
•                      多重繼承：一人有多個爹。
•                      多型

• 物件的組成
•      方法——函式：過程、動態的
•      屬性——變數：狀態、靜態的

<script>
        //變數和屬性是一個東西
        var a=12;//變數：自由的，不屬於任何人
        alert(a);
        
        var arr=[1,2,3,4,5,6];
        arr.a=12;//屬性：屬於一個物件的。
        alert(arr.a);
    </script>

  </script>
        function aaa(){             //函式：自由
            alert('abc');
        }

        var arr=[1,2,3,4];
        arr.aaa=function(){       //方法：屬於一個物件
            alert('abc');
        }

        aaa();
        arr.aaa();
    </script>
 

• 為物件新增方法和屬性
•            this:當前發生事件的物件。當前的方法屬於誰。

    <script> 
        var arr=[1,2,3,4,5,6];
        arr.a=12;
        arr.show=function(){
            alert(this.a)
        }

        oDiv.onclick=function(){
            alert(this);
        }
        arr.show();

    </script>

<script>        
        function show(){
            alert(this);//window。全域性的方法屬於window之下的。
        }
        //上面相當於下面。show是屬於window的。
        window.show=function(){
            alert(this);
        }
        show();
</script> 
 

•      不能在系統物件中隨意附加方法、屬性。否則會覆蓋已有方法、屬性。
•      object    空白的物件。沒有功能。我們可以往這裡面加物件。

 <script>
        var obj=new Object();
        obj.name='blue';
        obj.qq='1234567';

        obj.showName=function(){
            alert("我的名字是："+obj.name);
        }
        obj.showQQ=function(){
            alert("我的QQ號是："+obj.qq);
        }
        obj.showName();
        obj.showQQ();
 </script>

 跟普通函式一樣，但是功能不一樣。所以稱為建構函式。

//工廠方式  
<script>
        function createPerson(name,qq){//建構函式：構造一個物件。
            //原料
            var obj=new Object();
            //加工
            obj.name=name;
            obj.qq=qq;

            obj.showName=function(){
                alert("我的名字叫："+this.name);
            }
            obj.showQQ=function(){
                alert("我的QQ是："+this.qq);
            }
            //出廠
            return obj;
        }

        var obj=createPerson('blue','32554435346');
        obj.showName();
        obj.showQQ();
       var obj2=createPerson('zhangsan','43256346');
       obj2.showName();
       obj2.showQQ();
    </script>

alert(obj.showName==obj2.showName);//false

每個物件都有一套自己的函式，但是明明兩個東西是一樣的。

工廠方式缺點：

• 沒有new
• 函式重複——資源浪費