亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

ES6深入淺出 Classes

array_huang / 2414人閱讀

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

一步，一步前進(jìn)の一步

ES6深入淺出之Classes。翻譯的同時(shí)亂加個(gè)人見解，強(qiáng)烈推薦閱讀原作者的文章，言簡(jiǎn)意賅。es6-classes-in-depth

類語法本質(zhì)

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

ES5和 ES6的類實(shí)現(xiàn)對(duì)比

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

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該如何實(shí)現(xiàn)呢？類聲明的書寫和對(duì)象的寫法十分相似，花括號(hào)前面只多了 class Name,類方法我們將采用方法名簡(jiǎn)寫的形式。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++
  }
}

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

類靜態(tài)方法

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

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

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

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

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

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

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

類繼承

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96655.html

相關(guān)文章

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

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

    livem 評(píng)論0 收藏0

  • 深入理解 JavaScript 中的 class

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

    Vicky 評(píng)論0 收藏0

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

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

    MSchumi 評(píng)論0 收藏0

  • es6的classes

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

    NickZhou 評(píng)論0 收藏0

  • Vue.js 的注意事項(xiàng)與技巧

    摘要：需要注意的是，同樣的行為也適用于。這意味著我們必須重新綁定每個(gè)事件。組件的由調(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è)很棒的框架。然而，當(dāng)你開始構(gòu)建...

    lsxiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<