成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6深入淺出 Classes

array_huang / 2364人閱讀

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

一步，一步前進の一步

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

類語法本質(zhì)

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

ES5和 ES6的類實現(xiàn)對比

那么，我假設(shè)你已經(jīng)很好的理解了原型繼承的原理,畢竟你已經(jīng)在閱讀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該如何實現(xiàn)呢？類聲明的書寫和對象的寫法十分相似，花括號前面只多了 class Name,類方法我們將采用方法名簡寫的形式。contrustor 是構(gòu)造函數(shù)，可在里面初始化我們想初始化的東西。

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++
  }
}

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

類靜態(tài)方法

大多數(shù)情況下，類是有靜態(tài)方法的?；叵胍幌挛覀?nèi)粘Ｊ褂米疃嗟臄?shù)組，常見的實例方法有.filter、 .reduce、 .map,類方法有Array.isArray。ES5中添加類方法十分容易(類方法和靜態(tài)方法是同一個東西)：

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

在 ES6的 class 語法中，我們可以使用static關(guān)鍵字修飾方法，進而得到靜態(tài)方法。

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

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

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

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

類繼承

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

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

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

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

class Car {
  constructor (speed) {
    this.speed = speed
  }
}
class Tesla extends Car {
  constructor (speed) {
    // 不調(diào)用 super 的話，會報錯
    super(speed * 2)
    // 做其他初始化工作 。。。
  }
}
知識點總結(jié)

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

子類 constructor 要么有，要么首行調(diào)用super

靜態(tài)方法static修飾

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96655.html

相關(guān)文章

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

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

    livem 評論0 收藏0

  • 深入理解 JavaScript 中的 class

    摘要：在規(guī)范中，引入了的概念。使用中的聲明一個類，是非常簡單的事。中面向?qū)ο髮嵗谋澈笤?，實際上就是原型對象。與區(qū)別理解上述原理后，還需要注意與屬性的區(qū)別。實際上，在中，類繼承的本質(zhì)依舊是原型對象。 在 ES6 規(guī)范中，引入了 class 的概念。使得 JS 開發(fā)者終于告別了，直接使用原型對象模仿面向?qū)ο笾械念惡皖惱^承時代。 但是JS 中并沒有一個真正的 class 原始類型， clas...

    Vicky 評論0 收藏0

  • ES6學(xué)習(xí)筆記之Classes

    摘要：靜態(tài)方法靜態(tài)方法直接用類名來調(diào)用就可以了，熟悉面向?qū)ο缶幊痰耐瑢W(xué)應(yīng)該都不陌生。在中，一個類不能繼承多個類。為了解決這個問題，可以使用。當類表達式有命名時，該命名僅作為類內(nèi)部使用。 本文同步自我得博客：http://www.joeray61.com 簡介 ES6的Classes是在原型鏈繼承的基礎(chǔ)上，由語言本身提供的語法糖，并非是一種全新的繼承模式。這使得Javascript有一種更加簡...

    MSchumi 評論0 收藏0

  • es6的classes

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

    NickZhou 評論0 收藏0

  • Vue.js 的注意事項與技巧

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

    lsxiao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<