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>