第八周第一天笔记

2018-09-07 本文已影响0人果木山

es6语法

1 箭头函数

表达式
- 格式：var 函数名 = 参数 => 返回值;
- var fn=p=>p;
- var fn=()=>"我没有参数";
- var fn=(n,m)=>n+m;
函数体
- 格式：var 函数名 = 参数 =>{ return 返回值 };
- var fn=p=>{ return p };
- var fn=()=>{ return "我没有参数" };
- var fn=(n,m)=>{ return n+m };
- var fn=(name,age)=>{ return { name1:name,age1:age } }返回值为对象；

箭头函数中的this指向

箭头函数中的this指向与父级中的this指向相同
普通函数中的this指向，一般看函数调用时，点前面是谁，this指向谁；

 <script>
  var fn=()=>{
      console.log("外面的this："+this);//打印结果为：外面的this：[object Window]
      return {
          //普通函数
          getThis:function () {
              console.log("里面的this："+this);//this指向fn
          },
          //es6中普通函数的简写
          getThis1() {
              console.log("里面的this："+this);//this指向fn
          },
          //箭头函数
          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]，即箭头函数this指向等于父级函数中的this;
 </script>

复习this指向
- 自执行函数中的this指向window;
- 回调函数中的this一般指向window;
- 函数调用执行时，点前面是谁，this指向谁，如果没有，指向window;
- 当遇到函数类原型上的方法call(),bind(),apply(),this指向会改变
- 当元素身上添加事件后，事件发生时，函数中的this指向当前元素
- 箭头函数中的this指向，与父级函数中的this指向相同；

2 class创建类

类的创建

类创建的表达式：

 class 类名{
     constructor(){
         //写类的私有属性和方法，会继承给实例对象的私有属性和方法
     }
     getName(){
         //设置类原型上的属性和方法，即公有属性和方法
     }
     static  getAge(){
        //设置类作为对象角色使用的私有属性，也叫类的静态属性，与实例对象的属性没有关系，二者相互独立
     }
  }
 类名.xxx=xxx;//设置类的静态属性；

类创建的代码实例：

 <script>
  class F{
      //1 构造函数写在constructor里面，constructor里面的属性和方法都是类私有的属性和方法
      constructor(name,age){
          this.name=name;
          this.age=age;
      }
      //2 如下设置，就设置在类的prototype原型上，为公有属性和方法；
      getName(){
          console.log(this.name)//此时this指向实例对象
      }
      //3 类静态属性方法的写法
      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()在类函数的原型上，为公有方法；
  /*f1.getAge();//会报错：f1.getAge is not a function，说明getAge属性不是实例对象的属性；*/
  F.getAge();//结果为undefined，因为F类对象没有静态属性age；
  F.age=30;//设置F类对象的静态属性；
  F.getAge();//结果为30，证明打印了F类对象上的静态属性age;
 </script>

3 类的继承

类的继承：

知识点：
- super会继承私有属性，还可以将S类的原型作为F类的实例，进而通过原型链来获取F类的原型上的属性方法，但是又区别于原型链继承，在之前的原型链继承中会存在两个问题，一为：子类的原型上会存在父类的私有属性，二为：子类原型上的constructor不存在了；但是super获取的子类S类原型上不存在父类F类的私有属性，而且constructor也是S类的属性
- 子级类函数的__proto__属性，指向父级类函数；即父级类函数在子级类函数的原型链上，则子类函数就可以通过原型链调用父类函数的静态属性；子类函数上不存在父类函数的静态属性；
类继承的表达式：

 class S extends F{
      //S类继承F类的私有属性及F类的实例对象及F类的静态属性
      constructor(name,age,color){
          super(name,age);//继承F类的私有属性方法，作为S类的私有属性方法，继承F类的实例，作为S类的原型,继承F类的静态属性，作为S类的静态属性；
          this.color=color; //设置S类自己的私有属性方法
      }
      //设置S类自己的公有属性方法
      getSex(){ alert(1);}
      //设置S类自己的静态属性
      static getMan(){...};
  }

类继承的实例：

 <script>
  class F{
      //1 构造函数写在constructor里面，constructor里面的属性和方法都是类私有的属性和方法
      constructor(name,age){
          this.name=name;
          this.age=age;
      }
      //2 如下设置，就设置在类的prototype原型上，为公有属性和方法；
      getName(){
          console.log(this.name)
      }
      //3 类静态属性方法的写法
      static getAge(){
          console.log(this.age);//此时this指向类对象，就是F作为对象角色时，身上的属性age;
      }
  }
  //类的继承
  class S extends F{
      //S类继承F类的私有属性及F类的实例对象及F类的静态属性
      constructor(name,age,color){
          super(name,age);//既继承父类F类的私有属性，也将S类的原型作为F类的实例，进而通过__proto__来找到F类的原型，获取其公有属性方法，而且不存在原型链继承的两个问题；
          this.color=color;//设置自己S类的私有属性
      }
      //设置S类自己的公有属性和方法
      getSex(){
          console.log("nan");
      }
      //设置S类自己的静态属性
      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类身上的静态属性；
  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;

注意点：在对象中如果属性名为函数名，属性值为一个函数，被解构出来，调用函数时，函数中的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循环中如果用var来声明变量时，不会形成私有作用域，可以重复设置var，不会报错，但是已经声明过的不再声明，会重新赋值
let：for循环中用let来设置，会形成私有作用域，里面的n是私有的n，不是全局n;所以全局不会变化；不能重复设置let，会报错，可以对变量重新赋值；
const:设置的为一个常量，不是变量，不能进行更改

三者的不同

var能进行预解释；而let和const不能进行预解释；
var针对同一变量可以重复设置声明，而let不能重复设置声明，会报错，但可以重新赋值；
let能形成一个块状作用域，与外界无关联；
const设置的为一个常量，不能进行更改；

 <script>
  //1 var 设置
  var n=10;
  for(var i=0; i<5; i++){
      var n=20;
  }
  console.log(n);//得到的值为20；
  //总结：for循环中如果用var来声明变量时，不会形成私有作用域，可以重复设置var，不会报错，但是已经声明过的不再声明，会重新赋值
  //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循环中用let来设置，会形成私有作用域，里面的n是私有的n，不是全局n;所以全局不会变化；不能重复设置let，会报错；
  //3 const设置
  const n=20;
  n=30;//此时会报错
  console.log(n);
  //总结：const设置的为一个常量，不是变量，不能进行更改
 </script>

7 箭头函数中的形参

设置默认的形参值：var fn=(a=3,b=5)=>{ console.log(a+b) }
- 箭头函数中如果没有传实参则按着默认值执行，如果传入实参，按照实参值执行；
```
 <script>
  var fn=(a=12,b=5)=>{
      console.log(a+b);
  };
  fn();//结果为17；
  fn(10,30);//结果为40；
 </script>
```

形参...keys设置，代表除了固定形参，其余的所有的实参值；

箭头函数中不能用arguments获取实参值
设置...keys后，在函数内获取剩下的实参时用keys，不加点；

 <script>
   var fn=(a,b,...keys)=>{
       console.log(`第一个参数为：${a}`);
       console.log(`第二个参数为：${b}`);
       console.log(`剩下的参数为：${keys}`);//此时直接用keys;
   };
   fn("tian","kong","fen","wai","lan");
   /*打印结果为：
   * 第一个参数为：tian
   *第二个参数为：kong
   * 剩下的参数为：fen,wai,lan
   * */
   fn("tian");
   /*打印结果为：
   * 第一个参数为：tian
   * 第二个参数为：undefined
   * 剩下的参数为：空
   * */
 </script>

8 扩展运算符

...数组名代表数组中的所有元素可以当成参数依次传入，与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实现
         /*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>