JS基础2-object

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. 原型对象：https://www.jianshu.com/p/dee9f8b14771

   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所对应的网页各项资源，输出可视化的结果的过程

   https://www.cnblogs.com/jaysonguo/p/7382318.html

     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();