ES6深入淺出 Classes

array_huang 發布于2019-08-23 10:45 / 2357人閱讀

摘要：一步，一步前進一步深入淺出之。是構造函數，可在里面初始化我們想初始化的東西。類靜態方法大多數情況下，類是有靜態方法的。中添加類方法十分容易類方法和靜態方法是同一個東西在的語法中，我們可以使用關鍵字修飾方法，進而得到靜態方法。

一步，一步前進の一步

ES6深入淺出之Classes。翻譯的同時亂加個人見解，強烈推薦閱讀原作者的文章，言簡意賅。es6-classes-in-depth

類語法本質

JS 是基于原型的語言，那么ES6里的classes是什么東西？classes 是原型繼承的語法糖------主要是用來勾引不太理解 JS 原型鏈語法的其他語言使用者。ES6有好多新的特性本質上就是語法糖，classes也不例外。我會向你證明 classes 是語法糖，因為classes 的語法很容易使用 ES5的語法實現出來，classes 并不是JS 語法的一個變革，它存在的目的僅僅是使原型繼承變得簡單。

ES5和 ES6的類實現對比

那么，我假設你已經很好的理解了原型繼承的原理,畢竟你已經在閱讀ES6這么高級的東西了。下面代碼定義車的類，可被實例化,加油,移動。

function Car () {
  this.fuel = 0;
  this.distance = 0;
}

Car.prototype.move = function () {
  if (this.fuel < 1) {
    throw new RangeError("Fuel tank is depleted")
  }
  this.fuel--
  this.distance += 2
}

Car.prototype.addFuel = function () {
  if (this.fuel >= 60) {
    throw new RangeError("Fuel tank is full")
  }
  this.fuel++
}

使用下面的代碼使車跑起來吧：

var car = new Car()
car.addFuel()
car.move()
car.move()
// <- RangeError: "Fuel tank is depleted"

上面的代碼都是 ES5，那么 ES6該如何實現呢？類聲明的書寫和對象的寫法十分相似，花括號前面只多了 class Name,類方法我們將采用方法名簡寫的形式。contrustor 是構造函數，可在里面初始化我們想初始化的東西。

class Car {
  constructor () {
    this.fuel = 0
    this.distance = 0
  }
  move () {
    if (this.fuel < 1) {
      throw new RangeError("Fuel tank is depleted")
    }
    this.fuel--
    this.distance += 2
  }
  addFuel () {
    if (this.fuel >= 60) {
      throw new RangeError("Fuel tank is full")
    }
    this.fuel++
  }
}

需要強調的是：類和對象聲明寫起來是很像，但是在類中屬性及方法間是不允許使用逗號分隔的，分號倒是沒問題。

類靜態方法

大多數情況下，類是有靜態方法的。回想一下我們日常使用最多的數組，常見的實例方法有.filter、 .reduce、 .map,類方法有Array.isArray。ES5中添加類方法十分容易(類方法和靜態方法是同一個東西)：

// es5
function Car () {
  this.topSpeed = Math.random()
}
Car.isFaster = function (left, right) {
  return left.topSpeed > right.topSpeed
}

在 ES6的 class 語法中，我們可以使用static關鍵字修飾方法，進而得到靜態方法。

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
  static isFaster (left, right) {
    return left.topSpeed > right.topSpeed
  }
}

那么既然說classes是語法糖，那我們同樣可以使用如下方式實現靜態方法：

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
}
Car.isFaster = (left, right) => {
    return left.topSpeed > right.topSpeed;
}

目前 ES6還不支持使用 static 來修飾屬性，若想獲得類的靜態屬性，該如何實現？請參考上面代碼，給出答案，可以在評論區做答?
提供另一種思路使用 get、set實現靜態屬性，try it.

類繼承

classes不僅使類聲明變得簡單，它讓繼承變得更加可讀，容易。ES6中的 extends支持從基類衍生出更具個性化的子類。眾所周知，特斯拉較其他汽車比較省油,特斯拉是啥。那么，我們基于上面的 Car來實現Tesla類。下面的代碼的意思是 Tesla 類繼承 Car,并復寫 Car 爸爸的 move 方法進而行駛更遠的距離。

class Tesla extends Car {
  move () {
    super.move()
    this.distance += 4
  }
}

var car = new Tesla()
car.addFuel()
car.move()
console.log(car.distance)

關于繼承，有一點需要特別注意，當子類想要實現特有的構造函數 constructor 時，首行必須使用 super(...)調用父類的構造函數，先得到父類的this作為自己的 this。此處的理論有一點點深，有機會再講。

class Car {
  constructor (speed) {
    this.speed = speed
  }
}
class Tesla extends Car {
  constructor (speed) {
    // 不調用 super 的話，會報錯
    super(speed * 2)
    // 做其他初始化工作 。。。
  }
}

知識點總結

classes 只是語法糖，使類聲明和繼承書寫變的容易

子類 constructor 要么有，要么首行調用super

靜態方法static修飾

子類會覆蓋父類的同名方法，但是可以使用 super.xxxx 方法調用父類方法。

一步本人作了個決定，把Nicolás Bevacqua es6-in-depth都給翻譯了，如果侵權了我就立刻刪除

云服務器 GPU云服務器 Classes ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96655.html

React類，方法綁定（第三部分）

摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

livem 2019-08-20 17:59 評論0 收藏0
深入理解 JavaScript 中的 class

摘要：在規范中，引入了的概念。使用中的聲明一個類，是非常簡單的事。中面向對象實例化的背后原理，實際上就是原型對象。與區別理解上述原理后，還需要注意與屬性的區別。實際上，在中，類繼承的本質依舊是原型對象。在 ES6 規范中，引入了 class 的概念。使得 JS 開發者終于告別了，直接使用原型對象模仿面向對象中的類和類繼承時代。但是JS 中并沒有一個真正的 class 原始類型， clas...

Vicky 2019-08-20 14:16 評論0 收藏0
ES6學習筆記之Classes

摘要：靜態方法靜態方法直接用類名來調用就可以了，熟悉面向對象編程的同學應該都不陌生。在中，一個類不能繼承多個類。為了解決這個問題，可以使用。當類表達式有命名時，該命名僅作為類內部使用。本文同步自我得博客：http://www.joeray61.com 簡介 ES6的Classes是在原型鏈繼承的基礎上，由語言本身提供的語法糖，并非是一種全新的繼承模式。這使得Javascript有一種更加簡...

MSchumi 2019-08-19 18:15 評論0 收藏0
es6的classes

摘要：的構造方法我會跑宋澤打印宋澤。我會跑去讀書宋澤大胖獲取加賦值。和的方法名相同，而且可以同名方法重載方法覆蓋我會跑宋澤我一直在跑老師男我會跑我一直在跑注釋雖然子類繼承了父類的方法，但是子類會把父類的方法給覆蓋掉，這個就是方法覆蓋。 es6的classes 構造方法： class Student{ constructor (name,age){ this.name=...

NickZhou 2019-08-20 18:05 評論0 收藏0
Vue.js 的注意事項與技巧

摘要：需要注意的是，同樣的行為也適用于。這意味著我們必須重新綁定每個事件。組件的由調用它的父組件提供，這意味著所有事件都應該與父組件相關聯。原文鏈接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一個很棒的框架。然而，當你開始構建...

lsxiao 2019-08-26 13:39 評論0 收藏0