ES6學習總結（三）

baoxl 發布于2019-08-21 11:55 / 1379人閱讀

摘要：不同于其他面向對象語言，以前的中中沒有類的概念，主要是通過原型的方式來實現繼承，中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一

不同于其他面向對象語言，ES6以前的JavaScript中中沒有class類的概念，主要是通過原型的方式來實現繼承，JavaScript中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，JavaScript中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一個實例便可以獲得后一個實例原型對象的屬性和方法，例如：

function Father(){
  this.age=30;
}
Father.prototype.work=function(){
  return "hard work";
}
function Child(){
  this.age=10;
}
//將child的原型指向Father構造函數的實例
Child.prototype=new Father();

Child.prototype.play=function(){
  return "play";                
}

var child=new Child();

console.log(child.play()) // play
console.log(child.work()) // work

看完了上面的JavaScript典型的原型繼承，要回到ES6上面了，ES6中引入了類class 的概念，實際上是語法糖，很多都與構造函數相關，先看個例子：

// var Man =class{ 這么寫也是可以的
class Man{
  constructor(age) {
    this.age=age;
  }
  grow(){
    return this.age+1;
  }
}
var cala=new Man(22);
console.log(cala.grow()); // 23

上面是一個簡單的ES6寫class的例子，可以看到的是，用class關鍵字定義類，里面的constructor指的是構造函數，在構造函數中定義私有屬性，然后接著定義了一個grow方法，最后通過new關鍵字來實例化一個對象

在JavaScript中定義類和定義函數很相似，不過兩者還是有些不同，函數聲明可以提升，但是類聲明則不行

var cala=new Man();
class Man{} // Man is not defined

ES6中的類使用 extends創建子類，每個類里面都會有一個constructor構造函數，實例化的時候必須用new關鍵字來調用類的構造函數，一個構造函數可以通過super來調用另一個構造函數

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

class Cala extends Man{
  constructor(age){
    super(age);
  }
  grow(){
    return this.age+1;
  }
}

var cala=new Cala(22);
console.log(cala.grow()) // 23

ES6中的class支持類支持在原型上定義訪問器get，set屬性

class Man{
  constructor(age) {
    this.age=age;
  }
  get getAge(){
    return this.age;
  }
  set setAge(age){
    this.age=age;
  }
}
var cala=new Man(22);
console.log(cala.getAge) // 22

cala.setAge=33;
console.log(cala.getAge) // 33

ES6的class中支持靜態方法，用關鍵字static來定義，熟悉面向類與對象的童鞋大多知道，靜態方法屬于類本身，是通過類來調用，不能通過實例來調用

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

console.log(Man.work()); // hard work

var cala=new Man(22);
console.log(cala.work()); // cala.work is not a function

結合上面JavaScript典型的原型繼承和下面的ES6的類，可以看出在使用new關鍵字實例化對象的時候，實際上是調用了prototype上的構造函數，ES6的class本質就是語法糖，對于傳統的寫法來說，也是可以在ES6中適用的，類上的方法其實也就相當于定義在prototype上面

云服務器 GPU云服務器大學三年php總結機器學習學習總結機器學習總結 javascript學習總結

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

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

ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
教你如何打好根基快速入手react，vue，node

摘要：謹記，請勿犯這樣的錯誤。由于在之前的教程中，積累了堅實的基礎。其實，這是有緣由的其復雜度在早期的學習過程中，將會帶來災難性的影響。該如何應對對于來說，雖然有大量的學習計劃需要采取，且有大量的東西需要學習。前言倘若你正在建造一間房子，那么為了能快點完成，你是否會跳過建造過程中的部分步驟？如在具體建設前先鋪設好部分石頭？或直接在一塊裸露的土地上先建立起墻面？又假如你是在堆砌一個結婚蛋糕...

ddongjian0000 2019-08-23 13:39 評論0 收藏0
教你如何打好根基快速入手react，vue，node

摘要：謹記，請勿犯這樣的錯誤。由于在之前的教程中，積累了堅實的基礎。其實，這是有緣由的其復雜度在早期的學習過程中，將會帶來災難性的影響。該如何應對對于來說，雖然有大量的學習計劃需要采取，且有大量的東西需要學習。前言倘若你正在建造一間房子，那么為了能快點完成，你是否會跳過建造過程中的部分步驟？如在具體建設前先鋪設好部分石頭？或直接在一塊裸露的土地上先建立起墻面？又假如你是在堆砌一個結婚蛋糕...

LiangJ 2019-07-25 14:32 評論0 收藏0