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

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

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

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

那么接下來看例子吧：

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

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

然后上ES6的class,class很明顯就簡(jiǎn)化了這個(gè)操作

cosnt dog = new Animal("wangcai",2) // 會(huì)報(bào)錯(cuò)，ES6為了修改陋習(xí)，和let和const一樣，class不會(huì)提升.

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)在是一個(gè)動(dòng)物類")
  }
}

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

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

再說繼承之前補(bǔ)充個(gè)小知識(shí)點(diǎn)，class的方法名可以通過計(jì)算屬性的操作來命名

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.繼承

回到繼承這個(gè)問題，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

那么這個(gè)叫組合繼承，怎么個(gè)組合法呢？

屬性方面的繼承是借用繼承，可以看到Animal.call(this,name)就是相當(dāng)于把Animal這個(gè)函數(shù)在Dog的構(gòu)造函數(shù)里調(diào)用了一遍而已。雖然屬性他們沒有原型鏈的鏈?zhǔn)铰?lián)通，但是代碼拿過來給Dog都跑了一遍，所以自然就繼承了Animal的name屬性。

Animal.call(this,name)

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

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

所以按照這個(gè)套路，我們用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類的時(shí)候加一個(gè)extends Animal，然后再在constructor構(gòu)造函數(shù)里加一個(gè)super就好了。

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

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

最新評(píng)論