1.class
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 defined
class 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>2.繼續-extends
繼續
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>3.自定義屬性
自定義事宜
建立: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>