JS快速掌握ES6的class用法

Posted on by

1.如何構造？

先復習一下es5常用的構建類的方法：首先es5的寫法使用原型進行對象的方法的，為什麼不在構造函數裡添加方法呢？因為實例化對象的時候，會重復的建立好多相同的方法，浪費資源。所以需要把對象的方法掛載到prtotype裡。

關於new和this的綁定問題，可以大概簡化為：

  • 首先通過new生成一個新的對象
  • 然後讓這個對象綁定到構造函數的this中去
  • 然後綁定這個構造對象的原型對象上
  • 最後把這個對象返回給前面定義的對象

那麼接下來看例子吧：

fuction Animal(name,age){
  this.name = name
  this.age = age
  
  // 這樣是浪費資源的
  // this.eat = function(){
  //   console.log("今天我吃飯瞭")
  // }
}

// 正確做法
Animal.prototype.eat=function(){
  console.log("今天我吃飯瞭")
}

然後上ES6的class,class很明顯就簡化瞭這個操作

cosnt dog = new Animal("wangcai",2) // 會報錯，ES6為瞭修改陋習，和let和const一樣，class不會提升.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃飯瞭")
  }
}

cosnt dog = new Animal("wangcai",2)  //正確位置

另外class還添加瞭靜態方法，set，get等操作。

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃飯瞭")
  }
  

 set name(value){
    this.tempname ="老鐵"+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log("我現在是一個動物類")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) // 老鐵agiao

// 靜態方法
Animal.introuduce() // 我現在是一個動物類

再說繼承之前補充個小知識點，class的方法名可以通過計算屬性的操作來命名

let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log("一給我咧giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() // 一給我咧giao

2.繼承

回到繼承這個問題，es5是怎麼繼承的呢？

function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log("叫！")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

那麼這個叫組合繼承，怎麼個組合法呢？

屬性方面的繼承是借用繼承，可以看到Animal.call(this,name)就是相當於把Animal這個函數在Dog的構造函數裡調用瞭一遍而已。雖然屬性他們沒有原型鏈的鏈式聯通，但是代碼拿過來給Dog都跑瞭一遍，所以自然就繼承瞭Animal的name屬性。

Animal.call(this,name)

方法的繼承是原型式繼承，眾所周知，一個函數會在創建的時候生成一個原型對象，這個函數的的一個protoype屬性指向他的原型對象，原型對象的constructor屬性指向這個函數。如果用new來新建這個函數的實例，這個實例會有一個__proto__的屬性指向函數的原型對象。所以借用函數實例會指向函數原型對象這個特性，我們將被繼承的函數實例化，然後將這個實例化的對象賦給繼承的構造函數的prototype屬性，這樣就構成瞭一種鏈式結構。但同被繼承的函數實例化是不具備constructor這個屬性的，我們需要將他的constructor指向繼承的構造函數。

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

所以按照這個套路，我們用es5的語法，將dog函數繼承瞭Animal函數的name和break方法.

那麼ES6是怎麼做的呢？

class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log("叫！")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

現在隻需要在聲明Dog類的時候加一個extends Animal，然後再在constructor構造函數裡加一個super就好瞭。

這個super(name)就相當於Animal.call(this,name)瞭。然後關於方法的問題，自然就不用擔心瞭，extends自動就處理好瞭，就不用再去用prototype亂指瞭.

以上就是JS快速掌握ES6的class用法的詳細內容，更多關於JS ES6的class用法的資料請關註WalkonNet其它相關文章！

推薦閱讀：