iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

Class

這是ES6 引入的概念,提供我們更簡潔的方式建立物件以及繼承,這樣我們不用一直寫重複的代碼。

類別是一種特殊函數
定義類別可以使用
*類別宣告
*類別敘述

類別宣告,使用關鍵字class 加上類別名稱

EX:

class aa{
constructor(name){
this.name=name;
}
}

*注意:類別宣告不會hoisting,否則會ReferenceError

類別敘述 可以有名字或是匿名

EX:

//有名字
var Name=class Name{
constructor(name){
this.name=name;
}
};

//匿名
var Name= class{
constructor(name){
 this.name=name;
}
}

constructor 建構子

它是一種用來初始化類別的方法,一個類別只能有一個建構子,如果多於一個會拋出SyntaxError
**可以用 super 關鍵字呼叫父類別建構子(可以看下面建構子的部分)
EX:

class Person{
//下面是建構子
constructor(name,age){
this.name=name;
this.age=age;
}

原型方法

EX:

class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
callName(){
 console.log(this.name);
}
}

var p1=new Person('Ivy');
p1.callName(); //Ivy

也可以在建構子中呼叫方法,如此在這個物件初始化時就可以執行此方法

EX:

class Person{
constructor(name,age){
this.name=name;
this.age=age;
this.callName();
}
callName(name){
 console.log(this.name);
}
}

var p1=new Person('My name is Ivy');
//VM480:8 My name is Ivy

靜態方法(不用實體化就可以呼叫)

使用static 關鍵字定義靜態方法
EX:

class Person{
constructor(aName){
this.aName=aName;
}
//下面是靜態方法
static callName(a){
console.log(a.aName);
}
}
var p1=new Person('111');
Person.callName(p1);

//VM289:6 111

使用 extends 關鍵字 繼承 Class,並使用 super 呼叫父類別

EX:

class Person{
consturctor(name){
this.name=name;
}
callName(){
 return 'Mr.Huang'
}
}

class Child extends Person {
 callName(){
  console.log('My Father is ' + super.callName() + ', and I\'m '+this.name+'.');
}
}
var 小孩1= new Child('Mark');
小孩1.callName();
//VM532:12 My Father is Mr.Huang, and I'm undefined.

參考文章:
MDN Classes
穿越過來的鍵盤手 | 深入理解 JavaScript 中的 class


上一篇
JavaScript Arrow Function(箭頭函式)
下一篇
JavaScript Array | 與其他程式語言很不同的陣列(上)
系列文
開始入坑網頁吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言