es6 提供了更接近傳統語言的寫法,引入了 class(類)這個概念,作為物件的模板。通過class
關鍵字,可以定義類。
基本上,es6 的class
可以看作只是乙個語法糖,它的絕大部分功能,es5 都可以做到,新的class
寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法而已。
物件導向class給預設值//傳統物件導向寫法
function person(name,age)
person.prototype.showname = function();
person.prototype.showage = function();
var p1 = new person('allen',28);
var p2 = new person('nana',24);
console.log(p1.showname()); // allen
console.log(p2.showage()); // 24
console.log(p1.showname === p2.showname); // true
console.log(p1.constructor == person); // true
//es6物件導向寫法
class person
showname()
showage()
}var p1 = new person('aaa',18);
var p2 = new person('bbb',20);
console.log(p1.name); // aaa
console.log(p1.showname()); // aaa
console.log(p2.showage()); // 20
console.log(p1.showage == p2.showage); // true
console.log(p1.constructor == person); // true
繼承傳統寫法原型繼承class person
showname()
showage()
}var p1 = new person();
console.log(p1.name); // 構造器裡面給的預設值 default
console.log(p1.age); // 構造器裡面給的預設值 0
es6中物件導向實現類繼承// 定義乙個動物類
function animal (name)
}// 原型方法
animal.prototype.eat = function(food) ;
//通過呼叫父類構造,繼承父類的屬性並保留傳參的優點,然後通過將父類例項作為子類原型,實現函式復用
function cat(name)
cat.prototype = new animal();
// 組合繼承也是需要修復建構函式指向的。
= cat;
// test code
var cat = new cat("dog");
cat.sleep()
cat.eat("骨頭");
console.log(cat instanceof animal); // true
console.log(cat instanceof cat); // true
class可以通過extends關鍵字實現繼承,這比es5通過修改原型鏈實現繼承要清晰和方便很多。class animal
eat(food)
}class cat extends animal
showcolor()
}var cat=new cat("cat","white");
cat.eat("魚")
console.log(cat.showcolor());
上面的**定義了乙個colorpoint類,該類通過extends關鍵字,繼承了point類的所有屬性和方法。class point
class colorpoint extends point
子類必須在class point
tostring()
}class colorpoint extends point
tostring()
}
constructor
方法中呼叫super
方法,否則新建例項時會報錯。這是因為子類自己的this
物件,必須先通過父類的建構函式完成塑造,得到與父類同樣的例項屬性和方法,然後再對其進行加工,加上子類自己的例項屬性和方法。如果不呼叫super
方法,子類就得不到this
物件。
所以生成子類例項的**:
父類的靜態方法也會被子類繼承let cp=new colorpoint(10,24,'green');
cp instanceof colorpoint // true
cp instanceof point // true
super 關鍵字class a
}class b extends a
b.hello() // hello world
super
這個關鍵字,既可以當作函式使用,也可以當作物件使用。在這兩種情況下,它的用法完全不同。
第一種情況,super
作為函式呼叫時,代表父類的建構函式。es6 要求,子類的建構函式必須執行一次super
函式。
注意,class a {}
class b extends a
}
super
雖然代表了父類a
的建構函式,但是返回的是子類b
的例項,即super
內部的this
指的是b
,因此super()
在這裡相當於a.prototype.constructor.call(this)
。
第二種情況,class a
}class b extends a
}new a() // a
new b() // b
super
作為物件時,在普通方法中,指向父類的原型物件;在靜態方法中,指向父類。
上面**中,子類class a
}class b extends a
}let b = new b();
b
當中的super.p()
,就是將super
當作乙個物件使用。這時,super
在普通方法之中,指向a.prototype
,所以super.p()
就相當於a.prototype.p()
。
這裡需要注意,由於super
指向父類的原型物件,所以定義在父類例項上的方法或屬性,是無法通過super
呼叫的。
ES6的class和繼承
二.class 的繼承 function myfun x,y myfun.prototype.function var a newmyfun 1 2 class myfun 類的內部所有定義的方法,都是不可列舉的 object.keys myfun.prototype 1.所有的類都有乙個const...
ES6之 Class 的繼承(十二)
super關鍵字 class colorpoint extends point tostring 如果不呼叫super方法,子類就得不到this物件 class point class colorpoint extends point let cp newcolorpoint referenceer...
JS 學習ES6之 class 的繼承
class 可以通過extends關鍵字實現繼承。在子類繼承父類的時候,在constructor中必須首先呼叫super 方法,然後才能使用this。父類 class point tostring 子類 class colorpoint extends point tostring 子類必須在con...