JavaScript 的 對象

學習目標:可以說出爲何須要對象javascript

                  可以使用字面量建立對象java

                  可以使用構造函數建立對象數組

                  可以說出new的執行過程服務器

                  可以遍歷對象函數

1.對象學習

     1.1萬物皆對象,對象是一個具體的事物 在程序裏面,一個服務器,一張網頁,一個遠程服務器的鏈接也能夠是對象。this

      Javascript中對象是一組無序的相關屬性和方法的集合,全部事物都是對象,例如字符串,數值,數組,函數。spa

      對象是由屬性方法組成的code

      屬性:事物的特徵,在對象中用屬性來表示。(經常使用名詞)對象

      方法: 是事物的行爲,在對象中用方法來表示  (經常使用動詞)

       1.2爲何須要對象

       保存一個值,可使用變量,保存多個值(一組值),可使用數組,若是要保存一我的的完整信息呢?

       js二點對象表達結構更清晰,更強大。張三峯的我的信息再對象中表達結構以下:

        張三峯.姓名 = '張三峯';

        張三峯.性別 = ’男‘;

        張三峯.年齡 = 128;

        張三峯.身高 = 154;

2.建立對象的三種方法:(object):

       利用字面量建立對象: 花括號{ }表達了具體事物(對象)的屬性和方法

       利用 new object建立對象

       利用構造函數建立對象

字面量建立對象實例:

     var obj = {
           uname:'張三峯',
           age: 18,
           sex: '男',
           sayHi: function(){
               console.log('hi-');
           }
       }

New Object 建立對象

  <script>
        //利用NewObject建立對象
        var obj = new Obeject(); //建立了一個空的對象。
        obj.uname = '張三峯';
        obj.age = 18 ;
        obj.sex = '男';
        obj.sayHi = function(){
           console.log('hi-');
        }
        //(1)咱們利用等號 = 賦值的方法 添加對象的屬性和方法
        //(2)每一個屬性和方法之間用分號結束
        console.log(obj.uname);
        console.log(obj[uname]);


        var obj1 = new Object();
        obj1.name = '鳴人';
        obj1.sex = '男';
        obj.age  = '19歲';
        obj.skill = function(){
            console.log('影分身術');
        }
    </script>

咱們爲何須要構造函數?

    <script>
        //咱們爲何須要構造函數
        //就是由於咱們前面兩種建立對象的方式只能建立一個對象
        var ldh = {
            uname: '劉德華',
            age: 55,
            sing: function(){
                console.log('冰雨');
            }
        }
        //由於咱們一次建立一個函數,裏面不少的屬性和方法是大量相同的 咱們只能複製
        //所以咱們能夠利用函數的方法 重複這些相同的代碼 咱們就把這個函數稱爲構造函數
        //又由於這個函數不同 裏賣弄封裝的不是普通代碼 而是 對象
        //構造函數 就是把咱們對象裏面的一些相同的屬性和方法抽象出來封裝到函數裏面
        
    </script>

3.利用構造函數建立對象

   <script>
        //構造幻術的基本格式
        //四大天王的對象 相同的屬性:名字,年齡,性別 相同的特色:唱歌
        // function 構造函數名(){
        //     this.屬性 = 值;
        //     this.方法 = function(){}
        // }
        //new 構造函數名();
        function Star(uname,age,sex){
            this.uname =uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }

        var ldh = new Star('劉德華',18,'男') //調用函數返回的是一個對象

        ldh.sing('冰雨');
        //console.log(typeof ldh)
        console.log(ldh.uname);
        console.log(ldh['sex']);
        var zxy = new Star('張學友',20 ,'男');
        console.log(zxy.uname);
        console.log(zxy.age);
        //1.構造函數的名字首字母要大寫

        //1.構造函數首字母要大寫
        //2.咱們構造函數不須要return就能夠返回結果
        //3.咱們調用構造函數 必須適應 new
        //4.只要咱們new star() 調用函數就建立一個對象lbw {}
        //5.咱們的屬性和方法前面必須添加this

        function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        var lianpo = new Hero('廉頗','力量型','500血量');
        lianpo.attack('近戰');
        console.log(lianpo.name);

        var houyi = new Hero('後裔','射手型','100血量');
        console.log(houyi.name);
        
        houyi.attack('遠程');
    </script>

4.構造函數和對象的相互聯繫

    <script>
        //構造函數和對象
        //1.構造函數 明星 泛指的某一大類 它相似於java語言的類(class)
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        //2.對象 特指某一個 是一個具體的事物 劉德華 
        var lianpo = new Hero('廉頗','力量型','500血量');
        lianpo.attack('近戰');
        console.log(lianpo.name);
        //3.咱們利用構造函數建立對象的過程咱們也稱爲對象的實例化  構造函數也能夠建立對象。
    </script>

5.new對象的執行過程

  <script>
        //new 關鍵詞的執行過程
        //1.new 構造函數能夠在內存中建立一個空對象
        //2.this 就會指向剛纔建立的空對象
        //3.執行構造函數裏面的代碼 給這個空對象添加屬性和方法
        //4.返回這個對象(因此構造函數不須要return)
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        } 
        var lianpo = new Hero('廉頗','力量型','500血量');
        lianpo.attack('近戰');
        console.log(lianpo.name);  
    </script>

6.javascript 遍歷對象屬性

 

for (var k in obj){
            console.log(k); //k 變量 ,輸出獲得的是屬性名     
            console.log(obj[k]);   //obj[k]獲得的是屬性值   obj[k]
 }

 

    <script>
        //遍歷對象
        var obj = {
            name: '原雪峯',
            age:   '18',
            sex:    '男',
            fn:   function(){
                console.log('fff');
                
            }
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        //如何一次性打印?SSS
        // for in 遍歷咱們的對象
        /* for (變量 in 對象)
        {

        } */
        for (var k in obj){
            console.log(k); //k 變量 ,輸出獲得的是屬性名     
            console.log(obj[k]);   //obj[k]獲得的是屬性值   obj[k]
        }
        //咱們使用for in 裏面的變量 咱們喜歡 k 或者 key
    </script>

7.JavaScript小結:

1.對象可讓代碼結構更清晰

2.對象複雜數據類型object

3.本質:對象就是一組無序的相關屬性和方法的集合

4.構造函數泛指一大類,好比蘋果,無論紅色青色 都是蘋果

5.對象特指一個實例 

6.for (var k in object)進行循環遍歷對象

相關文章
相關標籤/搜索