TOP

10.1 ES6 的新增特性以及简单语法

ES6 的新增特性以及简单语法 

  • let 和 const
  • 模板字符串
  • 箭头函数
  • 对象单体模式
  • es6面向对象
  • 模块化

 let 和 const

  之前一直用 var 来声明变量,ES6 新增 let 和 const

script type="text/javascript">

    // let声明变量块级作用域,不能重复声明
    // let声明的变量 是块级作用域,不能重复声明
    // {
    //     // let a = 12;
    //     let a  = 12;
    //     let a  = 13;
    // }
   
    // console.log(a);
    
   // var 的坑 ,循环的时候会按照最后一次的赋值
    // var a = [];
    // for (var i = 0; i < 10; i++) {    //这里的 var i 换成 let i 即可解决
    //  a[i] = function () {
    //     console.log(i);
    // };
    // }
    // a[6](); // var 10 ,let 6
    
    // var 会发生变量提升
    console.log(foo); // 输出undefined
    var foo = 2;
    // let  不发生变量提升 
    console.log(foo); // 报错 ReferenceError
    let foo = 2;

    // const 声明常量,一旦声明,立即初始化,不能重复声明。
    const foo; // 没立即赋值,会报错
    // const 声明是只读常量,不可更改
    const P = 1
    P = 2 // 报错无法更改
</script>

 

模板字符串

  更加的简单的拼接字符串 用 ${} 来填入

<script>
    var a = 1;
    var b = 2;

    // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
    // ` xxx${}xxxx${}xxx`  注意反引号 
    var str = `哈哈哈哈${a}嘿嘿嘿${b}`;     
    console.log(str);
</script>

 

 箭头函数

  操作更加简单了,但是改变了特性造成了不便

<script>
    // function(){} --等同于--- ()=>{}

    // 1.this的指向发生改变,指向了定义对象时的对象
            // function(){} 的时候相当于 self 
            // ()=>{} 的时候相当于 windows对象
    // 2.arguments不能使用,无法再通过 arguments 拿所有的参数
    var person = {
        name:'张三',
        age: 18,
       
        fav:()=>{ 
            console.log(this);     // windows
            console.log(arguments);  // 报错不存在 
            } 
          } 
          person.fav();
</script>

 

 对象单体模式

  为了解决箭头函数的问题

  (){} 完全等同于 function(){} 不再有上面的困扰了

<script>
    var person = {
        name:'张三',
        age: 18,
       
        fav(){
            console.log(this);
            console.log(arguments);
        }
    }
    person.fav();
</script>

 

 ES6的面向对象

 

<script>
    // 构造函数的方式创建对象
    //  function Animal(name,age){
    //      this.name = name;
    //      this.age = age;
        
    //  }
    //  Animal.prototype.showName = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName2 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName3 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName4 = function(){
    //      console.log(this.name);
    //  }
    //  var dog = new Animal('日天',18)



    class Animal{
        constructor(name,age){ //  必须要 constructor 初始化属性 类似于 init 
            this.name = name;
            this.age = age;
        }  // 这一行一定不要加逗号
        showName(){
            console.log(this.name)
        }
    }
    var d = new Animal('张三',19);
    d.showName();
</script>

 

posted @ 2019-01-07 09:00  羊驼之歌  阅读(308)  评论(0编辑  收藏  举报