寒假学习——ES6（4）

寒假学习——ES6（4）

class

• 

<script>
        class Paopao{
           constructor(name,age){
               this.name=name;
               this.age=age;
           }
           eat(){
               console.log("吃吧");
           }
        }
        let hong=new Paopao("lv",98);
        console.log(hong);
    </script>

• static标注的属性和方法属于类不属于实例对象，要用类名调用

<script>
        class Phone{
            static name="手机";
            static change(){
                console.log("我可以改变世界");
            }
        }
        let huawei=new Phone();
        console.log(huawei.name);//undefined
        console.log(Phone.name);//手机
    </script>

• class的类继承

 <script>
        class Phone{
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            call(){
                console.log("用我打电话");
            }
        }
        class smartPhone extends Phone{
            constructor(brand,price,color){
                super(brand,price);//先将父类的构造函数初始化
                this.color=color;
            }
            photo(){
                console.log("拍照");
            }
        }
        const apple=new smartPhone("iphone",6100,"black");
        console.log(apple);
        apple.call();
    </script>

class的get set方法

//注意就是有一个隐含的不用声明的成员属性
<script>
        class Phone{
            get price(){
                console.log("价格属性被读取");
                return 'i love the new phone';
            }

            set price(value){
                console.log("价格属性被修改");
            }
        }
        
    
        let p=new Phone();
        p.price;//直接执行里面的语句
        console.log(p.price);//整个的结果是return的结果
        p.price='free';
        console.log(p);
    </script>

数值扩展

<script>
        //二进制0b开头八进制0o开头十六进制0x开头
        let b=0b1010;
        let o=0o222;
        let x=0xfff;
        Number.EPSILON//表示最小精度如果2个数差值小于这个误差那么2个数可以看成相等
        Number.isFinite(100)//判断100是否有限
        Number.isNaN(123)//判断是否为NaN
        Number.parseInt('123ll')//字符串转化成整数和java的包装器类似
        Number.isInteger//判断是否是整数
        Number.trunc(3.5);//将小数抹掉
        Math.sign//判断是正数还是负数还是0

    </script>

对象方法扩展

 <script>
        //1——Object.is判断2个值是否完全相等
        console.log(Object.is(22,22));//true,和全等号类似，但是它NAN也是相等的，全等号不是
        //2——Object.assign()对象的合并,后面那个与前面那个重名的被覆盖，不同的并起来
        const config1={
            host:'localhost8080',
            port:3306,
            name:'root',
            pass:'123',
            test:'test'
        };
        const config2={
            host:'http://123.com',
            port:33063,
            name:'123.com',
            pass:'123456',
            test2:'test2'
        }
        console.log(Object.assign(config1,config2));
        //3——Object.setPrototypeOf设置原型对象
        
    </script>

• 

模块化介绍

• 概念：将一个大的程序文件拆分成很多小的文件然后将小文件组合起来
• 模块化的优势
  • 防止命名冲突
  • 代码复用
  • 高维护性
• 模块功能：
  • 2个命令组成：export和import
    • export命令用于规定模块对外的接口（在需要暴露的数据前面加上export即可）
    • import命令用于输入其他模块提供的功能

 <script type="module">
        import * as newm from "./newm.js";
        console.log(newm);
    </script>


//分别暴露
export let paopao='哈哈哈2048';
export function chui(){
    console.log("吹泡泡");
}

//统一暴露
export{paopao,chui};


//默认暴露
export default{
	paopao='哈哈哈2048';
	chui:function(){
		console.log("吹泡泡");
	}
}

• 

• 引入模块

//通用导入
import * as newm from "./newm.js";

//解构赋值形式
import {paopao,chui}  from "./newm.js";//as后面的是别名
import {default as m2} from "./m3.js"

//简便形式，针对默认暴露
import m3 from "./m3.js"

• 浏览器使用es6模块

//在index页面写入js文件的引入标签,即利用src属性引入一个入口文件
<script src="./test.js" type="module"></script>

//test.js中直接用import语句即可