ES6

luck 發布于2019-08-23 15:32 / 3444人閱讀

摘要：繼承實現繼承的核心在于使用表明繼承自哪個父類，并且在子類構造函數中必須調用，因為這段代碼可以看成。

原型繼承和 Class 繼承 原型如何實現繼承？Class 如何實現繼承？Class 本質是什么？

首先先來講下 class，其實在 JS 中并不存在類，class 只是語法糖，本質還是函數。

那讓我們來實現一下繼承

組合繼承

組合繼承是最常用的繼承方式，

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = new Parent()

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

以上繼承的方式核心是在子類的構造函數中通過 Parent.call(this) 繼承父類的屬性，然后改變子類的原型為 new Parent() 來繼承父類的函數。
這種繼承方式優點在于構造函數可以傳參，不會與父類引用屬性共享，可以復用父類的函數，但是也存在一個缺點就是在繼承父類函數的時候調用了父類構造函數，導致子類的原型上多了不需要的父類屬性，存在內存上的浪費。

寄生組合繼承

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}

function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

以上繼承實現的核心就是將父類的原型賦值給了子類，并且將構造函數設置為子類，這樣既解決了無用的父類屬性問題，還能正確的找到子類的構造函數。

Class 繼承

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 實現繼承的核心在于使用 extends 表明繼承自哪個父類，并且在子類構造函數中必須調用 super，因為這段代碼可以看成 Parent.call(this, value)。

模塊化 為什么要使用模塊化？都有哪幾種方式可以實現模塊化，各有什么特點？

解決命名沖突

提高代碼的可復用性

提高代碼的可維護性

立即執行函數

以作用域的方式來解決命名沖突的問題

Module

// 引入模塊 API
import XXX from "./a.js"
import { XXX } from "./a.js"
// 導出模塊 API
export function a() {}
export default function() {}

Proxy Proxy 可以實現什么功能？

Proxy 是 ES6 中新增的功能，它可以用來自定義對象中的操作。

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

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

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

使用ES6新特性開發微信小程序

摘要：使用新特性開發微信小程序國際化與本地化新特性國際化與本地化新增了很多對于國際化的支持，比如時間格式，貨幣格式，數字格式等。 ECMAScript 6（簡稱ES6）是JavaScript語言的最新標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。微信小程序支持絕大部分ES6的新增特性。使用ES6新特性開發微信小程序（1） ES6新特性：Cons...

Backache 2019-08-21 11:26 評論0 收藏0
ES6-前世今生（0）

摘要：更新了個版本，最新正式版是語言的下一代標準，早已在年月正式發布。基本不支持移動端瀏覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有著怎樣的關系？ 1996 年 11 月，Netscape 創造了javascript并將其提交給了標準化組織 ECMA，次年，ECMA 發布 262 號標準文件（ECMA-...

LeviDing 2019-08-26 13:41 評論0 收藏0
給React初學者的10分鐘ES6教程

摘要：但是在中，可以通過關鍵字來實現類的繼承的使用可以使得繼承意義更加明確并且值得一提的是，如果你使用來定義的組件，那么可以在類的構造器里面，用簡單的的聲明方式來替代方法。原文：The 10 min ES6 course for the beginner React Developer譯者：Jim Xiao 著名的80/20定律可以用來解釋React和ES6的關系。因為ES6增加了超過75...

Awbeci 2019-08-22 18:04 評論0 收藏0
10個最佳ES6特性

摘要：，正式名稱是，但是這個名稱更加簡潔。已經不再是最新的標準，但是它已經廣泛用于編程實踐中。而制定了模塊功能。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件等眾多知名用戶的認可。譯者按: 人生苦短，我用ES6。原文: Top 10 ES6 Features Every Busy JavaScript Developer Must Know 譯者: Fundebug 為了保...

codeKK 2019-08-20 19:01 評論0 收藏0
為什么都說js 里面任何對象最終都繼承了Object對象

摘要：今天閑來無事，看見幾行小字。又說所有對象，繼承終是。強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網上看到了任何對象都是從對象繼承而來的這句話。一時興起，便去驗證這句話。今天閑來無事，看見幾行小字。又說所有對象，繼承終是Obj。—— 強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網上看到了任何對象都是從Object對象繼承而來的這句話。一時興...

Gemini 2019-08-26 10:29 評論0 收藏0