js基礎-object

js中的所有事物都是物件：字串、數值、數值、函式...

js提供多個內建物件，比如String，Date，Array等。

物件只是帶有屬性和方法的特殊資料型別。屬性是與物件相關的值，方法是能夠在物件上執行的動作。

1. 建立物件

     var user={};
     user.name='tom';
     user.age=12;
   

   json物件(js物件簡譜)：輕量級資料交換格式

   ⑴ json格式：獲取到的資料全是字串

     var user={"name":"tom","age":12};//ket:value
     console.log(user.name);
     console.log(user['name']);
     for(var k in user){
       console.log(`${k}:${user[k]}`);//name name:tom age age:12
     }
    
   

   ⑵格式轉換

     //1.將json轉化為字串
     var str_user=JSON.stringify(user);
     //2.將字串轉換為json
     var json_user=JSON.parse(str_user);
   

   ⑶屬性可以賦多個值

     var goods=[
       {"id":"1","name":"iphone1","color":["grey","black"]},
       {"id":"2","name":"iphone2"},
       {"id":"3","name":"iphone3"},
       {"id":"4","name":"iphone4"}
   
     ]
     for(var good of goods){
       console.log(good.name);
     }
     console.log(goods[0].color); //iphone1 iphone2 iphone3 iphone4 Array(2)0:"grey"1:"black"
    
   

   ⑷簡易購物車顯示

     <div class="container">
       <div class="good-css">
         <table id="con_goods">
           <tr>
             <td>序號</td><td>名稱</td><td>單價</td><td>銷量</td>
           </tr>
           <tr>
             <td>001</td><td>iphone</td><td>6000</td><td>10000</td>
           </tr>
         </table>
       </div>
     </div>
     <script type="text/javascript">
       var goods=[
         {"id":"001","name":"iphone6","price":"2000","count":"10000"},
         {"id":"002","name":"iphone6","price":"2000","count":"10000"},
         {"id":"003","name":"iphone6","price":"2000","count":"10000"},
         {"id":"004","name":"iphone6","price":"2000","count":"10000"},
         {"id":"005","name":"iphone6","price":"2000","count":"10000"},
         {"id":"006","name":"iphone6","price":"2000","count":"10000"}
       ]
       //1.獲取容器
       var con=document.querySelector('#con_goods');
       //2.遍歷陣列
       for(var item of goods){
         con.innerHTML+=`
           <tr onclick="show(${item.id})">
             <td>${item.id}</td>
             <td>${item.name}</td>
             <td>${item.price}</td>
             <td>${item.count}</td>
           </tr> `
       }
       function show(id) {
         alert(id)
       }
     </script>
    
   

2. 函式物件

     function User(id,name) {
        this.id=id;
        this.name=name;
        this.show=function () {
        console.log(this.id + ">>>" + this.name);
        }
      }
      var u1=new User('001','tom');
      u1.show();
      var u2=new User('008','rose');
      u1.nation='china';
   

3. js是面向物件的語言，但js不使用類，js基於prototype，而不是基於類的

   每一個函式物件都有一個prototype屬性，指向函式的原型物件

   原型鏈：原型鏈：先在u1自己身上找再到prototype裡找再到object的prototype裡找

   類的行為和公共屬性放在原型裡

     User.prototype.nation='usa';  
   

   Date

     function dataFormat(date) {
       var year=date.getFullYear();
       var month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
       var day=date.getDate();
       var hour=date.getHours();
       var minute=date.getMinutes();
       var second=date.getSeconds();
       return year+'/'+month+'/'+day+''+hour+':'+minute+':'+second;
     }
     var date=new Date();
     dataFormat(date)
     Date.prototype.dataFormat=function(){
       var date=this;
       var year=date.getFullYear();
       var month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
       var day=date.getDate();
       var hour=date.getHours();
       var minute=date.getMinutes();
       var second=date.getSeconds();
       return year+'/'+month+'/'+day+''+hour+':'+minute+':'+second;
     }
     date.dataFormat()
   

4. 執行緒：js中只有一個執行緒（讀程式碼）,js是一種單執行緒，非同步的語言

   單執行緒：無法同時執行多段程式碼，當某一段程式碼正在執行的時候，所有後續的任務都必須等待，形成一個任務佇列。

   頁面渲染：簡單而言是從一個網頁的Url開始，根據Url所對應的網頁各項資源，輸出視覺化的結果的過程

     function show() {
       console.log('hello');
     }
     //2000毫秒後執行一次show
     var timeout=setTimeout(show,2000);//setTimeout只能等js空閒才會執行
     var inter=setInterval(show,2000);
   

     var t = true;
     window.setTimeout(function (){
         t = false;
     },1000);
   
     while (t){}
   
     alert('end');
   

   執行結果：程式陷入死迴圈 while (t) {} 導致 alert(‘end’);不會執行

   解析：JS是單執行緒的，所以會先執行while(t){}再alert，但這個迴圈體是死迴圈，所以永遠不會執行alert。 為什麼不執行setTimeout？是因為JS的工作機制是：當執行緒中沒有執行任何同步程式碼的前提下才會執行非同步程式碼，setTimeout是非同步程式碼，所以setTimeout只能等JS空閒才會執行，但死迴圈是永遠不會空閒的，所以setTimeout也永遠不會得到執行。

5. 回撥函式callback：就是將一個函式當作引數傳給另一個函式，被傳的函式叫做回撥函式，主要的用意就是當主函式完成後再去執行回撥函式。

     function add(m,n,callback) {
       setTimeout(function () {
       var c=m+n;
       callback(c);
     },3000)
     }
     add(30,40,function (res) {
       console.log(res);
     })
   

   例子：

     function a() { 
     div1.innerHTML += "a"; 
     } 
     function b() { 
     div1.innerHTML += "b"; 
     }  
     var div1; 
     window.onload = function () { 
     div1 = document.getElementById("div1"); 
     setTimeout("a();", 3000); 
     b(); 
     } 
     //輸出結果是：ba
     //如果改成這樣：
     function a(callback) 
     { 
     div1.innerHTML += "a"; 
       callback(); 
     } 
     function b(){ 
     div1.innerHTML+="b"; 
     } 
      
     var div1;
     window.onload = function () { 
     div1 = document.getElementById("div1"); 
     setTimeout("a(b);", 3000);
         }
     //輸出結果就是：ab
   

6. this：誰呼叫函式就表示誰

     var user={
       name:'tom',
       show:function () {
         var that=this;
         setTimeout(function () {
           console.log(that.name);
         },1000);
       }
     }
     user.show();