ES6/核心内容(上)

来源:互联网 发布:淘宝功能介绍百度百科 编辑:程序博客网 时间:2024/05/18 05:12
/***let块级作用域***/
            // let name = 'lijiaxiong';
            // while(true){
            //     let name = 'huajiang'
            //     console.log(name);
            //     break;
            // }
            // console.log(name);


            // var a = []
            // for(let i = 0; i < 10; i++){
            //     a[i] = function () {
            //         console.log(i);
            //     }
            // }


            // a[8]();


            /***const 也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变***/


            // const PI01 = Math.PI;


            // const pI = 23;
            // console.log(pI);    


            // const monent = require('monent');


            /***class, extends, super***/  
            /***原型、构造函数,继承...***/


            // class Animal{
            //     constructor(){
            //         this.type = 'animal';
            //     }
            //     says(params){
            //         console.log(this.type + '--says:' + params);
            //     }
            // }


            // let animal = new Animal();
            // animal.says('hello');  


            // class Cat extends Animal{
            //     constructor(){
            //         super();
            //         this.type = 'cat';
            //     }
            // }


            // let cat = new Cat();
            // cat.says('Hi');
            /*可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。*/
            /*Class之间可以通过extends关键字实现继承,继承了Animal类的所有属性和方法*/
            /*super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。*/


            /***箭头函数***/
            // class My{
            //     constructor(){
            //         this.type = 'lili'
            //     }
            //     sets(sets){
            //             setTimeout(() => {
            //                     console.log(this.type + '和' + sets + '走啦');
            //             },1000)         
            //     }
            // }


            // let my = new My();    
            // my.sets('xiaoxiao');    


            /*当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。*/


           /***template string***/
           // var boxs = document.querySelector('#boxs');
           
           // boxs.innerHTML=`
           //              <div class="box_in" style='color:red'>
           //               <h2>这里是标题</h2>
           //                  <p> 里,看着那些幻化的空灵翩跹着灵魂的萌动,看着你来过的痕迹,这又怎能不是一种幸福!为了你,我甘情绪愿就此成论,我愿意在你赋予的一寸圈地蜗居一世,即便是只能在臆想里期遇,即便只能是</p>
           //              </div> 
           //      `;


           /*字符串中嵌入变量
                var name = "Bob", time = "today";
            `Hello ${name}, how are you ${time}?*/






            /***destructuring解构***/
            /*ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)*/


            // let cat = 'ken';
            // let dog = 'lili';


            // let zoo = {cat,dog}
            // console.log(zoo);
            // console.log(zoo.cat);


            // let dog = {type : 'animal',many : 2};
            // let {type,many} = dog;


            // console.log(type,many);




            /***default, rest***/
            /*default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。*/
            // function animal(type) {
            //     type = type || 'cat'
            //     console.log(type);
            // }
            // animal();


            /*如果用ES6我们而已直接这么写:*/
            function animal2(type = 'cat') {
                console.log(type);
            }
            animal2();


            /*rest语法也很简单*/
            function animalws(...types){ //特别注意
                console.log(types);
            }
            animalws('cat','bbc','fish');
            //["cat", "bbc", "fish"]
原创粉丝点击