JavaScript基礎之物件

阿新 • • 發佈：2021-11-14

1.物件

1.1什麼是物件？

在中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串、數值、陣列、函式等。

物件是由屬性和方法組成的

屬性：事物的特徵，在物件中用屬性來表示
方法：事物的行為，在物件中用方法來表示

1.2為什麼需要物件

儲存一個值時，可以使用變數，儲存（一組值）時，可以使用陣列。如果要儲存一個人的完整資訊呢？

例如，將張三的個人資訊儲存在陣列中的方式為：

var arr = ['張三','男',123,156];

用物件的方式將張三的個人資訊儲存下來，更為清晰一點。

2.建立物件的三種方式

2.1利用物件字面量建立物件{}

物件字面量：就是{ }裡面包含了表達這個具體事物的（物件）的屬性和方法。

    <script>
        //利用物件字面量建立物件{}
        var obj = {};//建立了一個空的物件
        var obj = {
            uname: '張三',age: 18,sex: '男',sayhi: function () {
                console.log('hi');
            }
        };
        //(1)裡面的屬性或方法我們採取鍵值對的形式 鍵 屬性名：  值 屬性值
        //(2)多個屬性或方法中間用逗號隔開
        //(3)方法後面跟的是一個匿名函式
        //2.使用物件
        //(1) 呼叫物件的屬性 我們採取 物件.屬性名的方式
        console.log(obj.uname);
        //(2)呼叫物件的屬性  物件名['屬性名']
        console.log(obj['age']);
        //(3)呼叫物件的方法   物件名.方法名
        obj.sayhi();
    </script>

2.2利用new Object建立物件

  // //利用new Object建立物件
        var obj = new Object();//建立了一個空的物件
        obj.uname = '張三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayhi = function () {
            console.log('hi~');
        }
        console.log(obj['uname']);
        console.log(obj.sex);
        obj.sayhi();
        //(1) 我們是利用 等號=賦值的方法 新增物件的屬性和方法
        //(2) 每個屬性和方法之間用 ; 結束
 
        //案例
        var Object = new Object();
        Object.uname = '鳴人';
        Object.sex = '男';
        Object.age = 19;
        Object.skill = function () {
            console.log('影分身術');
        }
        console.log(Object.uname);
        Object.skill();

2.3 利用建構函式建立物件

 //我們為什麼需要使用建構函式
        //就是因為我們前兩種建立物件的方式一次只能建立一個物件
        //因為我們一次建立一個物件，裡面很多的屬性和方法是大量相同的 利用函式來實現程式碼的複用 這個函式就稱為 建構函式
        // 建構函式裡封裝的是 物件
        //建構函式 就是把我們物件裡面一些相同的屬性和方法抽象出來封裝到函式裡面

建構函式：是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總是與new運算子一起使用。我們可以把物件中一些公共的屬性和方法抽象出來，然後封裝到這個函式中。

    <script>
 
        //利用建構函式建立物件
        //建構函式的語法格式
        // function 建構函式名() {
        //     this.屬性 = 值;
        //     this.方法 = function() {}
        // }
        // new 建構函式名();
 
        function Star(uname,age,sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('劉德華',18,'男');//呼叫函式返回的是一個物件
        console.log(typeowww.cppcns.comf ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('張學友',36,'男');
        console.log(zxy.name);
        console.log(zxy['sex']);
        zxy.sing('李香蘭');
            //1.建構函式名字首字母要大寫
            //2.我們建構函式不需要return 就可以返回結果
            //3.我們呼叫建構函式 必須使用 new
            //4.我們只要new Srart() 呼叫函式就建立了一個物件
            //5.我們的屬性和方法前面必須加this
   </script>