es6的class是幹什麼的
es6的class關鍵字用於快速地定義「類」；class的本質是function，它可以看作一個語法糖，讓物件原型的寫法更加清晰、更像物件導向程式設計的語法。提升class不存在變數提升，類的所有方法都定義在類的prototype屬性上面，在類的範例上面呼叫方法，其實就是呼叫原型上的方法。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
基礎
es6引入了Class（類）這個概念，class關鍵字用於快速地定義「類」。新的class寫法讓物件原型的寫法更加清晰、更像物件導向程式設計的語法，也更加通俗易懂。
實際上背後依然使用的 原型和建構函式的概念。
嚴格模式 不需要使用use strict因為只要程式碼寫在類和模組內，就只能使用嚴格模式。
提升class不存在變數提升 (由於繼承有關 必須確保子類在父類別之後定義)。
類的所有方法都定義在類的prototype屬性上面，在類的範例上面呼叫方法，其實就是呼叫原型上的方法 原型方法可以通過範例物件呼叫，但不能通過類名呼叫，會報錯
class 為es6用來定義一個類
實際上 class只是一個語法糖 是建構函式的另一種寫法
(語法糖 是一種為避免編碼出錯 和提高效率編碼而生的語法層面的優雅解決方案 簡單說 一種便攜寫法 而已)
看程式碼
class Person{
}
console.log(typeof Person) //funciton
console.log(Person.prototype.constructor === Person) //true登入後複製使用看程式碼
用法和使用 建構函式一樣 通過new 來生成物件範例
class person2 {
}
let json = new person2;登入後複製屬性和方法
定義在constructor 內的屬性和方法 即呼叫在this上 屬於範例屬性和方法 否則屬於原型屬性和方法
class Person {
constructor (name) {
this.name = name //constructor內定義的方法和屬性是範例物件自己的，
}
say () { //而constructor外定義的方法和屬性則是所有範例物件可以共用的 注意!
console.log('hello')
}
}
let jon = new Person()
jon.hasOwnPrototype('name') //true
jon.hasOwnPrototype('say') //false登入後複製靜態方法
不需要通過範例物件，可以直接通過類來呼叫的方法，其中的 this 指向類本身
class Person {
static doSay () {
this.say()
}
static say () {
console.log('hello')
}
}
Person.doSay() //hello
***********************************************************************************************
//靜態方法可以被子類繼承
class Sub extends Person {
}
Sub.doSay() // hello
//靜態方法可以通過類名呼叫，不能通過範例物件呼叫，否則會報錯
class Person {
static sum(a, b) {
console.log(a + b)
}
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function登入後複製name屬性
name 屬性返回了類的名字 即緊跟在class後面的名字。
class Person {
}
Person.name // Person登入後複製this 預設指向類的範例。
類的方法內部如果含有this 坑兒 一但單獨使用該方法 很可能就會報錯
如果 this指向不對 1使用箭頭函數 2在構造方法中繫結this
取值函數（getter）和存值函數（setter）
class Person {
get name () {
return 'getter'
}
set name(val) {
console.log('setter' + val)
}
}
let jon = new Person()
jon.name = 'jon' // setter jon
jon.name // getter登入後複製//類宣告不可以重複
class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared
constructor關鍵字
- constructor 方法
- constructor 方法是類的預設方法，通過 new 命令生成物件範例時，自動呼叫該方法（預設返回範例物件 this）。
- 一個類必須有 constructor 方法，如果沒有顯式定義，一個空的 constructor 方法會被預設新增。
- 一個類只能擁有一個名為 「constructor」 的特殊方法，如果類包含多個 constructor 的方法，則將丟擲 一個 SyntaxError 。
class Person {
constructor(x, y) {
this.x = x //預設返回範例物件 this
this.y = y
}
toString() {
console.log(this.x + ', ' + this.y)
}
}登入後複製constructor 啥子?
每一個類必須要由一個constructor 如果沒有顯示宣告 js引擎會自動新增一個空的建構函式
class person3 {
}
//等於
class person3 {
constructor(){}
}登入後複製注意 在類中宣告方法的時候，方法前不加 function 關鍵字 方法之間不要用逗號分隔，否則會報錯 類的內部所有定義的方法，都是不可列舉的（non-enumerable）
注意 與es5一樣 範例的屬性除非 顯示定義在其本身(即this物件)上 否則都是定義在原型上面
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return `this.x + this.y`;
}
}
var point = new Point();
point.toString() //(2,3)
point.hasOwnProperty("x") //true
point.hasOwnProperty("y") //true 在這x&&y都是範例物件point自身的屬性(因為定義在this變數上) // 所以返回true
point.hasOwnProperty("toString") //false toString是原型物件的屬性 (因為定義在Point類上) //所以返回false
point._proto_.hasOwnProperty("toString") //true
//加兩個範例
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_ //true 這個不建議使用
//上面程式碼中 p1和p2 都是point的範例 他們的原型都是Point.prototype 所以 _proto_屬性是相等的
//即是說 可以通過範例的_proto_ 屬性為 "類" 新增方法登入後複製super關鍵字
super關鍵字用於存取和呼叫 父類別上的函數，可以呼叫父類別的建構函式 也可以呼叫父類別的普通函數
class Father {
constructor (surname){
this.surname = surname
}
say(){
console.log("你的名字" + this.surname) //你的名字錘子
}
}
//在這裡 子繼承父類別
class Son extends Father {
constructor(surname,name){
super(surname)
this.name = name
}
say(){
super.say()
console.log('呼叫普通' + this.name) //呼叫普通鐵的
}
}
var son = new Son('錘子',"鐵的")
son.say()
console.log(son) //列印 {surname: "錘子", name: "鐵的"
//在子類別建構函式如果使用 super 呼叫父類別的建構函式 必須寫在 this之前
//還可以 呼叫父類別的普通方法
//在es6中 類沒變數提升 必須先定義 才能通過範例化物件類裡面的 共有屬性 和方法 通過this 呼叫
//類 裡面的this 代表什麼
//constructor 裡面this指向範例物件
// 方法裡面this 代表 方法的 呼叫者登入後複製extends繼承
繼承即子承父業現實中 程式中子類可以繼承父類別中的一些 方法和屬性
繼承時物件導向的 一大特性 可以減少程式碼的編寫 方便公共內容的抽取 關鍵字extends
class Father {
constructor (surname){
this.surname = surname
}
say(){ //父級Father裡面有一個方法 say()
console.log("你的名字" + this.surname)
}
}
class Son extends Father { //在這裡Son 繼承了 Father父級裡面的方法 關鍵字extends
}
var son = new Son('錘子') //new 出來範例
son.say() //列印 你的名字錘子登入後複製類的方法
class Person {
constructor(name, age) {
// 建構函式，接收一個name和age
this.name = name
this.age = age
}
say(){
// 一個方法 //注意類裡面的方法不加function關鍵字 方法與方法之間不用,號隔開
console.log("你好",this.name)
}
// ....sayWhat(){} saySome(){}
}
var person = new Person('老王',44)
//呼叫方法
person.say() //老王
//在類的範例上呼叫方法 其實就是呼叫 原型上的方法登入後複製類的表示式
與函數一樣 calss 也可以使用表示式的形式定義 採用class表示式 可以寫出立即執行的Class!!
注意與函數表示式類似 類表示式在他們被求值前也不能使用(即賦值變數 之前呼叫) 但 與函數定義不同 雖然函數宣告可以提升 但類不能
類表示式（類定義）
類表示式可以是被命名的或匿名的
匿名類
let Person = class {
constructor(x, y) {
this.x = x
this.y = y
}
}登入後複製命名的類
let Person = class Person {
constructor(x, y) {
this.x = x
this.y = y
}
}
const Mycalss = class Me {
getClassName(){
return Me.name;
}
}; //這裡用 表示式(即賦值變數一個)
//注意! 這個類的名字是Mycalss而不是 Me Me只在Class的內部程式碼可用 指代當前類
let inst = new Mycalss();
inst.getClassName() //Me
Me.name //報錯 Me只在Class內部有定義登入後複製採用class表示式 可以寫出立即執行的Class!!
let person = new class {
constructor(name) {
this.name = this.name;
}
sayname(){
console.log(this.name);
}
}("常東東") //這段程式碼中class是立即執行的範例登入後複製補充案例
class Animal { //class定義了一個「類」
constructor(){
this.type = 'animal' //有一個constructor方法，這就是構造方法 //this關鍵字則代表範例物件
} //constructor內定義的方法和屬性是範例物件自己的，而constructor外定義的方法和屬性則是所有範例物件可以共用的 注意!
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal { //通過extends關鍵字實現繼承 //定義了一個Cat類，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法。
constructor(){
super() //super關鍵字 它指代父類別的範例（即父類別的this物件）子類必須在constructor方法中呼叫super方法，否則新建範例時會報錯。
this.type = 'cat' //這是因為子類沒有自己的this物件，而是繼承父類別的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件。
}
}
let cat = new Cat()
cat.says('hello') //cat says hello登入後複製【相關推薦：、】
以上就是es6的class是幹什麼的的詳細內容，更多請關注TW511.COM其它相關文章！
