婷婷六月天激情,亚欧综合啪啪一区二区

es6語法

1 箭頭函數(shù)

表達式
- 格式：var 函數(shù)名 = 參數(shù) => 返回值;
- var fn=p=>p;
- var fn=()=>"我沒有參數(shù)";
- var fn=(n,m)=>n+m;
函數(shù)體
- 格式：var 函數(shù)名 = 參數(shù) =>{ return 返回值 };
- var fn=p=>{ return p };
- var fn=()=>{ return "我沒有參數(shù)" };
- var fn=(n,m)=>{ return n+m };
- var fn=(name,age)=>{ return { name1:name,age1:age } }返回值為對象；

箭頭函數(shù)中的this指向

箭頭函數(shù)中的this指向與父級中的this指向相同
普通函數(shù)中的this指向，一般看函數(shù)調用時，點前面是誰，this指向誰；

 <script>
  var fn=()=>{
      console.log("外面的this："+this);//打印結果為：外面的this：[object Window]
      return {
          //普通函數(shù)
          getThis:function () {
              console.log("里面的this："+this);//this指向fn
          },
          //es6中普通函數(shù)的簡寫
          getThis1() {
              console.log("里面的this："+this);//this指向fn
          },
          //箭頭函數(shù)
          getThis2:()=>{
              console.log("里面的this："+this);//this指向fn中的this,是window；
          }
      }
  };
  var obj=fn();
  obj.getThis();//結果為：里面的this：[object Object]，即this指向點前面的對象
  obj.getThis1();//結果為：里面的this：[object Object]，即this指向點前面的對象
  obj.getThis2();//結果為：里面的this：[object Window]，即箭頭函數(shù)this指向等于父級函數(shù)中的this;
 </script>

復習this指向
- 自執(zhí)行函數(shù)中的this指向window;
- 回調函數(shù)中的this一般指向window;
- 函數(shù)調用執(zhí)行時，點前面是誰，this指向誰，如果沒有，指向window;
- 當遇到函數(shù)類原型上的方法call(),bind(),apply(),this指向會改變
- 當元素身上添加事件后，事件發(fā)生時，函數(shù)中的this指向當前元素
- 箭頭函數(shù)中的this指向，與父級函數(shù)中的this指向相同；

2 class創(chuàng)建類

類的創(chuàng)建

類創(chuàng)建的表達式：

 class 類名{
     constructor(){
         //寫類的私有屬性和方法，會繼承給實例對象的私有屬性和方法
     }
     getName(){
         //設置類原型上的屬性和方法，即公有屬性和方法
     }
     static  getAge(){
        //設置類作為對象角色使用的私有屬性，也叫類的靜態(tài)屬性，與實例對象的屬性沒有關系，二者相互獨立
     }
  }
 類名.xxx=xxx;//設置類的靜態(tài)屬性；

類創(chuàng)建的代碼實例：

 <script>
  class F{
      //1 構造函數(shù)寫在constructor里面，constructor里面的屬性和方法都是類私有的屬性和方法
      constructor(name,age){
          this.name=name;
          this.age=age;
      }
      //2 如下設置，就設置在類的prototype原型上，為公有屬性和方法；
      getName(){
          console.log(this.name)//此時this指向實例對象
      }
      //3 類靜態(tài)屬性方法的寫法
      static getAge(){
          console.log(this.age);//此時this指向類對象，就是F作為對象角色時，身上的屬性age;
      }
  }
  var f1=new F("xiehe",3);
  var f2=new F("guobin",26);
  console.log(f1.getName===f2.getName);//結果為true，比較兩個實例上的getName地址是否一致，如果一致證明getName()在類函數(shù)的原型上，為公有方法；
  /*f1.getAge();//會報錯：f1.getAge is not a function，說明getAge屬性不是實例對象的屬性；*/
  F.getAge();//結果為undefined，因為F類對象沒有靜態(tài)屬性age；
  F.age=30;//設置F類對象的靜態(tài)屬性；
  F.getAge();//結果為30，證明打印了F類對象上的靜態(tài)屬性age;
 </script>

3 類的繼承

類的繼承：

知識點：
- super會繼承私有屬性，還可以將S類的原型作為F類的實例，進而通過原型鏈來獲取F類的原型上的屬性方法，但是又區(qū)別于原型鏈繼承，在之前的原型鏈繼承中會存在兩個問題，一為：子類的原型上會存在父類的私有屬性，二為：子類原型上的constructor不存在了；但是super獲取的子類S類原型上不存在父類F類的私有屬性，而且constructor也是S類的屬性
- 子級類函數(shù)的__proto__屬性，指向父級類函數(shù)；即父級類函數(shù)在子級類函數(shù)的原型鏈上，則子類函數(shù)就可以通過原型鏈調用父類函數(shù)的靜態(tài)屬性；子類函數(shù)上不存在父類函數(shù)的靜態(tài)屬性；
類繼承的表達式：

 class S extends F{
      //S類繼承F類的私有屬性及F類的實例對象及F類的靜態(tài)屬性
      constructor(name,age,color){
          super(name,age);//繼承F類的私有屬性方法，作為S類的私有屬性方法，繼承F類的實例，作為S類的原型,繼承F類的靜態(tài)屬性，作為S類的靜態(tài)屬性；
          this.color=color; //設置S類自己的私有屬性方法
      }
      //設置S類自己的公有屬性方法
      getSex(){ alert(1);}
      //設置S類自己的靜態(tài)屬性
      static getMan(){...};
  }

類繼承的實例：

 <script>
  class F{
      //1 構造函數(shù)寫在constructor里面，constructor里面的屬性和方法都是類私有的屬性和方法
      constructor(name,age){
          this.name=name;
          this.age=age;
      }
      //2 如下設置，就設置在類的prototype原型上，為公有屬性和方法；
      getName(){
          console.log(this.name)
      }
      //3 類靜態(tài)屬性方法的寫法
      static getAge(){
          console.log(this.age);//此時this指向類對象，就是F作為對象角色時，身上的屬性age;
      }
  }
  //類的繼承
  class S extends F{
      //S類繼承F類的私有屬性及F類的實例對象及F類的靜態(tài)屬性
      constructor(name,age,color){
          super(name,age);//既繼承父類F類的私有屬性，也將S類的原型作為F類的實例，進而通過__proto__來找到F類的原型，獲取其公有屬性方法，而且不存在原型鏈繼承的兩個問題；
          this.color=color;//設置自己S類的私有屬性
      }
      //設置S類自己的公有屬性和方法
      getSex(){
          console.log("nan");
      }
      //設置S類自己的靜態(tài)屬性
      static getTime(){
          console.log(this.time);
      }
  }
  var f1=new F("xiehe",3);
  F.age=100;
  F.getAge();//結果為100;
  var s1=new S("guobin",26,"red");
  console.dir(f1);
  console.dir(s1);
  s1.getSex();//結果為：nan
  S.getAge();//結果為100；代表S類可以通過自身的原型鏈調用F類身上的靜態(tài)屬性；
  S.time=200;
  S.getTime();//結果為200；
 </script>

類繼承實例打印結果圖

4 增強的對象字面量及字符串模板

增強的對象字面量

知識點：
- 增強的對象字面量，即若對象中的屬性名與屬性值賦值相同，則可以寫一個；
- 設置__proto__：obj，則將obj賦值到原型上；

 <script>
  var obj={ name:"xiehe", age: 3 };
  var obj1={ name:"xiehe", age: 3 };
  var eat="pingguo";
  var fn=p=>p;
  //增強的對象字面量，即若對象中的屬性名與屬性值賦值相同，則可以寫一個；
  //設置__proto__：obj，則將obj賦值到原型上；
  var objOther={obj,eat,fn};//將obj作為自己的私有屬性；
  var objOther2={__proto__:obj1,eat,fn};//將obj中的鍵值對作為自己原型上的屬性；
  
  objOther.obj.name="guobin";
  console.log(obj);//會將obj中的name改變；
  console.dir(objOther);
  
  objOther2.name="guobin";
  console.log(obj1);//不會改變，只是在objOther2上添加了私有屬性name;
  console.dir(objOther2);

 </script>

打印結果圖

字符串模板

知識點：字符串拼接時，用雙撇，變量字符串添加在${...}中；

 <script>
     var name="美好的一天";
     console.log("今天是"+name);//結果為：今天是美好的一天；
     console.log(`今天是${name}`);//結果為：今天是美好的一天；
 </script>

5 解構賦值

定義：將對象身上的屬性名解構出來，當使用時，直接使用屬性名，就能拿到屬性值，不用再使用對象點屬性名獲取；
表達式：{屬性名}=obj;

注意點：在對象中如果屬性名為函數(shù)名，屬性值為一個函數(shù)，被解構出來，調用函數(shù)時，函數(shù)中的this指向不再是對象，而是window；

 <script>
  var objn={
      name1:"xiehe",
      age:3,
      showName(){
          console.log("this指向為:"+this)
      }
  };
  var {name1,age,showName}=objn;
  console.log(name1);//結果為：xiehe
  console.log(age);//結果為3;
  showName();//結果為：this指向為:[object Window]
  objn.showName();//結果為：this指向為:[object Object]
  var {alert}=window;//從window對象上解構出alert屬性；
  alert(3);//彈出3
 </script>

6 let和const

var：for循環(huán)中如果用var來聲明變量時，不會形成私有作用域，可以重復設置var，不會報錯，但是已經(jīng)聲明過的不再聲明，會重新賦值
let：for循環(huán)中用let來設置，會形成私有作用域，里面的n是私有的n，不是全局n;所以全局不會變化；不能重復設置let，會報錯，可以對變量重新賦值；
const:設置的為一個常量，不是變量，不能進行更改

三者的不同

var能進行預解釋；而let和const不能進行預解釋；
var針對同一變量可以重復設置聲明，而let不能重復設置聲明，會報錯，但可以重新賦值；
let能形成一個塊狀作用域，與外界無關聯(lián)；
const設置的為一個常量，不能進行更改；

 <script>
  //1 var 設置
  var n=10;
  for(var i=0; i<5; i++){
      var n=20;
  }
  console.log(n);//得到的值為20；
  //總結：for循環(huán)中如果用var來聲明變量時，不會形成私有作用域，可以重復設置var，不會報錯，但是已經(jīng)聲明過的不再聲明，會重新賦值
  //2 let設置
  let n=10;
  for(let i=0; i<5; i++){
      let n=20;
      //let n=30;不能重復設置let;
      console.log(n);//得到的值為20；
  }
  console.log(n);//得到的值為10；
  //總結：for循環(huán)中用let來設置，會形成私有作用域，里面的n是私有的n，不是全局n;所以全局不會變化；不能重復設置let，會報錯；
  //3 const設置
  const n=20;
  n=30;//此時會報錯
  console.log(n);
  //總結：const設置的為一個常量，不是變量，不能進行更改
 </script>

7 箭頭函數(shù)中的形參

設置默認的形參值：var fn=(a=3,b=5)=>{ console.log(a+b) }
- 箭頭函數(shù)中如果沒有傳實參則按著默認值執(zhí)行，如果傳入實參，按照實參值執(zhí)行；
```
 <script>
  var fn=(a=12,b=5)=>{
      console.log(a+b);
  };
  fn();//結果為17；
  fn(10,30);//結果為40；
 </script>
```

形參...keys設置，代表除了固定形參，其余的所有的實參值；

箭頭函數(shù)中不能用arguments獲取實參值
設置...keys后，在函數(shù)內獲取剩下的實參時用keys，不加點；

 <script>
   var fn=(a,b,...keys)=>{
       console.log(`第一個參數(shù)為：${a}`);
       console.log(`第二個參數(shù)為：$`);
       console.log(`剩下的參數(shù)為：${keys}`);//此時直接用keys;
   };
   fn("tian","kong","fen","wai","lan");
   /*打印結果為：
   * 第一個參數(shù)為：tian
   *第二個參數(shù)為：kong
   * 剩下的參數(shù)為：fen,wai,lan
   * */
   fn("tian");
   /*打印結果為：
   * 第一個參數(shù)為：tian
   * 第二個參數(shù)為：undefined
   * 剩下的參數(shù)為：空
   * */
 </script>

8 擴展運算符

...數(shù)組名代表數(shù)組中的所有元素可以當成參數(shù)依次傳入，與apply相似；

 <script>
  var ary=[29,12,22];
  var ary1=[11,20,...ary];
  console.log(ary1);//結果為：[11, 20, 29, 12, 22]
  var Max=Math.max(...ary1);//求最大值傳入實參；
  console.log(Max);//打印29；
 </script>

9 運動實例

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>運動實例</title>
     <style>
         div{
             width: 60px;
             height: 60px;
             border-radius: 50%;
             margin-bottom: 10px;
         }
         .div1{
             background-color: red;
         }
         .div2{
             background-color: green;
         }
         .div3{
             background-color: yellow;
         }
     </style>
 </head>
 <body>
 <div class="div1" style="margin-left:0"></div>
 <div class="div2" style="margin-left:0"></div>
 <div class="div3" style="margin-left:0"></div>
 <script>
     var oDiv1=document.getElementsByTagName("div")[0];
     var oDiv2=document.getElementsByTagName("div")[1];
     var oDiv3=document.getElementsByTagName("div")[2];
     //ele:操作的元素；target：元素運動到的目的地；callback:到達目的地要干什么；
     function add(ele,target,callback) {
         setTimeout(function () {
             var n=parseFloat(ele.style.marginLeft);
             if(n===target){
                 callback();
             }else if(n<target){
                 n++;
                 ele.style.marginLeft=n+"px";
                 add(ele,target,callback);
             }else{
                 n--;
                 ele.style.marginLeft=n+"px";
                 add(ele,target,callback);
             }
         },10);
         //利用setInterval實現(xiàn)
         /*var timer=setInterval(function () {
             var n=parseFloat(ele.style.marginLeft);
             if(n===target){
                 clearInterval(timer);
                 callback();
             }else if(n<target){
                 n++;
                 ele.style.marginLeft=n+"px";
             }else{
                 n--;
                 ele.style.marginLeft=n+"px";
             }
         },10);*/
     }
     add(oDiv1,100,function () {
         add(oDiv2,200,function () {
             add(oDiv3,300,function () {
                 add(oDiv3,150,function () {
                     add(oDiv2,150,function () {
                         add(oDiv1,150,function () {
                               alert("運動結束");
                         })
                     })
                 })
             })
         })
     })
 </script>
 </body>
 </html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

第八周第一天筆記

第八周第一天筆記

es6語法

1 箭頭函數(shù)

2 class創(chuàng)建類

3 類的繼承

4 增強的對象字面量及字符串模板

5 解構賦值

6 let和const

7 箭頭函數(shù)中的形參

8 擴展運算符

9 運動實例

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

第八周第一天筆記

es6語法

1 箭頭函數(shù)

2 class創(chuàng)建類

3 類的繼承

4 增強的對象字面量及字符串模板

5 解構賦值

6 let和const

7 箭頭函數(shù)中的形參

8 擴展運算符

9 運動實例

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av