寫在前面:
在ES6中,class (類)作爲對象的模板被引入,可以通過 class 關鍵字定義類。
class 的本質是 function。
它可以看作一個語法糖,讓對象原型的寫法更加清晰、更像面向對象編程的語法。
在本文中我們將學習如何創建一個類和對象
,如何在類中添加方法
,類的繼承
,super關鍵字
,類和對象的三個注意點。
一.如何創建類和對象
class Star{
//類的共有屬性放在constructor 裏面
constructor(name,age){
this.name=name;
this.age=age;
}
}
//利用類創建對象new
var ldh =new Star("劉德華",19);
var zxy =new Star('張學友',18);
console.log(ldh);
console.log(zxy);
這裏講一下程序是怎麼執行的,首先class關鍵字創建了一個Star類自動生成了constractor函數,這個函數接收傳遞的參數,返回實例。接着創建一個對象同時自動調用cconstractor函數。new實例化一個對象,那麼現在劉德華和張學友就是一個實例,這兩個實例傳遞給name,name接着傳值給this.name,this指向的是創建的實例。
二.在類中添加方法
下面我們子啊原有的基礎上添加一個sing方法
/* jshint esversion: 6 */
// JavaScript Document
//創建一個類 創建一個明星類
class Star{
//類的共有屬性放在constructor 裏面
constructor(name,age){
this.name=name;
this.age=age;
}
sing(song){
console.log(this.name+ song);
}
}
//利用類創建對象new
var ldh = new Star('劉德華','8');
console.log(ldh);
ldh.sing('冰雨');
輸出:
(1)我們類裏面所有的函數不需要寫function
(2)多個函數方法之間不需要添加逗號分割
三.類的繼承
class Father{
//自動生成constructor函數
constructor(){
}
money(){
console.log(100);
}
}
class Son extends Father{
}
var son =new Son();
son.money();
這裏使用extends子類繼承了父類的方法和屬性
四.super 關鍵字
super關鍵字用於訪問和調用父類上的函數,可以用來調用父類的構造函數和普通函數。
但是子類在構造函數中使用super關鍵字必須放在this前面(必須先調用父類的構造方法再使用子類的構造方法)
調用構造函數
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
class Son extends Father{
constructor(x,y){
super(x,y);//調用父類的構造方法
}
}
var son=new Son(1,2);
son.sum();
這裏也稍微講一下執行流程,首先我們用new關鍵字實例化son,實例化子類,把裏面的1和2傳給了子類的constructor裏面的x,y,接着super調用了父類的constructor所以就相當於父類的constructor裏x和y是1和2,接下去this.x=1,this.y=2;在接下去sum方法中就是1+2了所以輸出結果是3;
注意:
在繼承中,如果實例化子類輸出一個方法,先看子類有沒有這個方法,如果有先執行子類的。
繼承中,如果子類裏面沒有,就直接去父類找有沒有這個方法,如果有就執行父類(就近原則)
調用普通函數
class Father{
say(){
return "我是爸爸";
}
}
class Son extends Father{
say(){
console.log(super.say()+"的兒子");
//super.say()就是調用父類中的普通函數say()
}
}
var son=new Son();
son.say();
五.注意點
1.在ES6中沒有變量提升,所以必須先定義類,才能通過類實例化對象
2.類中有共同屬性和方法一定要加this
3.constructor裏面的this指向實例,方法裏面的this指向方法的調用者;
本次介紹就到這,學習愉快 😃