class es6 中 为 关键字用来声明 一个 类
1.只能通过new调用2.不存在变量提升3.多个方法之间直接书写,不需要,隔开4.类的方法是直接定义在类的原型上的5.定义在类中的方法不可枚举6.Object.keys() 和 Object.values()下面是详细解释
1.只能通过new调用
<script>//--------------- class ------------------ class Fn{}//Fn(); //直接调用会报错 var f=new Fn();//必须通过new调用 console.log(f);//Fn?{}//--------------- function ------------------ function go() {} go();//函数可以直接调用</script>2.不存在变量提升
<script>//---------------function解析时，会放到前面。所以不会报错-------------go(); // 函数声明 可以 先调用 再声明function go() {}// 函数声明//---------------class解析时，不会放到前面。所以会报错-------------var f=new Fn();//报错 Fn is not definedclass Fn{}</script>3.多个方法之间直接书写 不需要,隔开
<script> class Fn{ constructor(name,age){ this.name=name; this.age=age; } say(){ console.log("我会说话"); } } var f=new Fn("kite","18"); console.log(f.name);//kite console.log(f.age);//18</script>解析：其中constructor方法和say方法之间并没有用逗给开。因为不是对象，所以不需要用逗号隔开。
4.类的方法是直接定义在类的原型上的
<script> class Fn{ constructor(name,age){ this.name=name; this.age=age; } say(){ console.log("我是"+this.name); } } var f1=new Fn("kite","18"); var f2=new Fn("Mary","28"); f1.say();//我是kite f2.say();//我是Mary console.log(f1.say===f2.say);// true console.log(f1.hasOwnProperty("say"));//false 表示不是自身 身上的方法</script>5.定义在类中的方法不可枚举
class P { constructor(name,age){ this.name = name; this.age = age; } say(){ // 这个say 是 挂在 P 类 的原型上的方法 console.log("我会说话.我的名字叫:"+this.name); } }; var p1 = new P("kite",29); for( var attr in p1 ){ console.log( attr ); //运行结果为 //name //age }6.Object.keys()和Object.values()
除了通过for in来遍历对象中的属性，可以通过Object.keys()得到对象的属性名，可以通过Object.keys()得到对象的属性值
<script>class P { constructor(name,age){ this.name = name; this.age = age; } say(){ // 这个say 是 挂在 P 类 的原型上的方法 console.log("我会说话.我的名字叫:"+this.name); } }; var p1 = new P("kite",29); console.log( Object.keys( p1 ) ); //["name", "age"] console.log( Object.values( p1 ) ); //["kite", 29]</script>继承 extends注意: 构造函数中调用super 举例说明
<script> //父类 class Fn{ constructor(name,age){ this.name=name; this.age=age; } say(){ console.log("我的名字是"+this.name); } } //子类 class F extends Fn{ constructor(name,age,job){ super(name,age); this.job=job; } say(){ console.log("我的名字是"+this.name,"我的工作是"+this.job); } eat(){ console.log("我喜欢吃西瓜"); } } //子类实例化 var f=new F("zm",18,"worker"); f.say();//我的名字是zm 我的工作是worker f.eat();//我喜欢吃西瓜</script>自定义事件创建:new CustomEvent(事件名,事件对象设置参数);事件对象设置参数 {bubbles:true}//是否设置冒泡绑定:元素.addEventListener触发:元素.dispatchEvent(自定义事件实例,事件名)举例说明：
<body><div id="box">box</div><script> var box = document.getElementById("box"); //创建自定义属性 var c = new CustomEvent("abc", {bubbles: true}); //自定义属性绑定 box.addEventListener("abc", function () { console.log(1); }); box.addEventListener("abc", function () { console.log(2); }); //自定义属性触发 box.dispatchEvent(c, "abc");</script></body>通过函数模拟自定义函数：
<script> var obj={}; //addFn函数作用： // 用空对象存储 事件名 和 函数// 以以下这种方式存储// {// abc:[fn1,fn2];// cfd:[fb1,fb2];// } function addFn( EventName,fn ) { if(!obj[ EventName]){ obj[ EventName]=[]; } obj[ EventName].push(fn); } //trigger函数作用： //通过for循环触发函数 function trigger(EventName) { for(var i=0;i<obj[ EventName].length;i++){ obj[ EventName][i](); } } addFn("abc",function () {console.log(1);}); addFn("abc",function () {console.log(2);}); addFn("abc",function () {console.log(3);}); trigger("abc");</script>以面向对象的方式 写 自定义事件：
<script> class CustomEv{ constructor(){ this.obj = {}; } addFn( EventName,fn ) { if(!this.obj[ EventName]){ this.obj[ EventName]=[]; } this.obj[ EventName].push(fn); } trigger(EventName) { for (var i = 0; i < this.obj[EventName].length; i++) { this.obj[EventName][i](); } } } var c=new CustomEv(); c.addFn("abc",function () {console.log(1);}); c.addFn("abc",function () {console.log(2);}); c.addFn("abc",function () {console.log(3);}); c.trigger("abc");</script>
