快捷導(dǎo)航

JS快速掌握ES6的class用法

更新時間：2021年05月06日 10:56:56 作者：淺笑·

這篇文章主要介紹了JS快速掌握ES6的class用法，想了解ES6的同學(xué)，一定要看一下

1.如何構(gòu)造？

先復(fù)習(xí)一下es5常用的構(gòu)建類的方法：首先es5的寫法使用原型進(jìn)行對象的方法的，為什么不在構(gòu)造函數(shù)里添加方法呢？因為實例化對象的時候，會重復(fù)的建立好多相同的方法，浪費資源。所以需要把對象的方法掛載到prtotype里。

關(guān)于new和this的綁定問題，可以大概簡化為：

首先通過new生成一個新的對象
然后讓這個對象綁定到構(gòu)造函數(shù)的this中去
然后綁定這個構(gòu)造對象的原型對象上
最后把這個對象返回給前面定義的對象

那么接下來看例子吧：

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為了修改陋習(xí)，和let和const一樣，class不會提升.

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

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

另外class還添加了靜態(tài)方法，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("我現(xiàn)在是一個動物類")
  }
}

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

// 靜態(tài)方法
Animal.introuduce() // 我現(xiàn)在是一個動物類

再說繼承之前補充個小知識點，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)就是相當(dāng)于把Animal這個函數(shù)在Dog的構(gòu)造函數(shù)里調(diào)用了一遍而已。雖然屬性他們沒有原型鏈的鏈?zhǔn)铰?lián)通，但是代碼拿過來給Dog都跑了一遍，所以自然就繼承了Animal的name屬性。

Animal.call(this,name)

方法的繼承是原型式繼承，眾所周知，一個函數(shù)會在創(chuàng)建的時候生成一個原型對象，這個函數(shù)的的一個protoype屬性指向他的原型對象，原型對象的constructor屬性指向這個函數(shù)。如果用new來新建這個函數(shù)的實例，這個實例會有一個__proto__的屬性指向函數(shù)的原型對象。所以借用函數(shù)實例會指向函數(shù)原型對象這個特性，我們將被繼承的函數(shù)實例化，然后將這個實例化的對象賦給繼承的構(gòu)造函數(shù)的prototype屬性，這樣就構(gòu)成了一種鏈?zhǔn)浇Y(jié)構(gòu)。但同被繼承的函數(shù)實例化是不具備constructor這個屬性的，我們需要將他的constructor指向繼承的構(gòu)造函數(shù)。

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

所以按照這個套路，我們用es5的語法，將dog函數(shù)繼承了Animal函數(shù)的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
  }
}

現(xiàn)在只需要在聲明Dog類的時候加一個extends Animal，然后再在constructor構(gòu)造函數(shù)里加一個super就好了。

這個super(name)就相當(dāng)于Animal.call(this,name)了。然后關(guān)于方法的問題，自然就不用擔(dān)心了，extends自動就處理好了，就不用再去用prototype亂指了.

以上就是JS快速掌握ES6的class用法的詳細(xì)內(nèi)容，更多關(guān)于JS ES6的class用法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: