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的綁定問(wèn)題，可以大概簡(jiǎn)化為：

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

那么接下來(lái)看例子吧：

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)物類

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

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() // 一給我咧giao2.繼承

回到繼承這個(gè)問(wèn)題，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)用了一遍而已。雖然屬性他們沒(méi)有原型鏈的鏈?zhǔn)铰?lián)通，但是代碼拿過(guò)來(lái)給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來(lái)新建這個(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的語(yǔ)法，將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)于方法的問(wèn)題，自然就不用擔(dān)心了，extends自動(dòng)就處理好了，就不用再去用prototype亂指了.

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