es6筆記7^_^class

来源:http://www.cnblogs.com/puyongsong/archive/2017/01/21/6290850.html
-Advertisement-
Play Games

1.定義類 2.類聲明 3.變數提升 4.類表達式 匿名的 命名的 5.原型方法 6.靜態方法 7.類繼承 8.Species 9.super 關鍵字可以用來調用其父類的構造器或者類方法 上面代碼首先用class定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而thi ...


　　ES6提供了更接近傳統語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。

　　部分來自JavaScript ES6 class指南、mozilla  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes

1.定義類

　　讓我們回想一下在ES5中定義一個類的方式。通過不是很常用的Object.defineProperty方法，我可以定義一些只讀的屬性。
function Vehicle1(make, year) {
    Object.defineProperty(this, 'make', {
        get: function() { return make; }
    });

    Object.defineProperty(this, 'year', {
        get: function() { return year; }
    });
}
Vehicle1.prototype.toString = function() {
    return this.make + ' ' + this.year;
}
var vehicle1 = new Vehicle1('Toyota Corolla', 2009);
console.log(vehicle1.make); // Toyota Corolla
vehicle1.make = 'Ford Mustang';
console.log(vehicle1.toString()) // Toyota Corolla 2009
　　很簡單，我們定義了一個有兩個只讀屬性和一個自定義toString方法的Vehicle類。讓我們在ES6中來做一樣的事情：
class Vehicle {
    constructor(make, year) {
        this._make = make;
        this._year = year;
    }
    get make() {
        return this._make;
    }
    get year() {
        return this._year;
    }
    toString() {
        return `${this.make} ${this.year}`;
    }
}
var vehicle = new Vehicle('Toyota Corolla', 2009);
console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009
　　上面兩個例子中定義的類有一個不同的地方。我們為了享受新的get語法帶來的好處，所以只是將make和year定義成了普通的屬性。這使它們可以被外部所改變。如果你確實需要一個嚴格的私有屬性，還是請繼續使用defineProperty。

2.類聲明

　　類聲明是定義類的一種方式，就像下麵這樣，使用 class 關鍵字後跟一個類名（這裡是 Polygon），就可以定義一個類。
class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

3.變數提升

　　類聲明和函數聲明不同的一點是，函數聲明存在變數提升現象，而類聲明不會。
　　也就是說，你必須先聲明類，然後才能使用它，否則代碼會拋出 ReferenceError 異常，像下麵這樣：
var p = new Polygon(); // ReferenceError
class Polygon {}

4.類表達式

類表達式是定義類的另外一種方式。在類表達式中，類名是可有可無的。如果定義了類名，則該類名只有在類體內部才能訪問到。

匿名的

var Polygon1 = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};

命名的

var Polygon2 = class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};
註意: 類表達式和類聲明一樣也不會有提升的現象。

5.原型方法

class Polygon3 {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    get area() {
        return this.calcArea()
    }
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Polygon3(10, 10);
console.log(square.area);// 100

6.靜態方法

　　static 關鍵字用來定義類的靜態方法。靜態方法是指那些不需要對類進行實例化，使用類名就可以直接訪問的方法，需要註意的是靜態方法不能被實例化的對象調用。靜態方法經常用來作為工具函數。
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));

7.類繼承

使用 extends 創建子類
　　extends 關鍵字可以用在類聲明或者類表達式中來創建一個繼承了某個類的子類。
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Dog extends Animal {
    speak() {
        console.log(this.name + ' barks.');
    }
}
var d = new Dog('Mitzie');
d.speak();// 'Mitzie barks.'

//同樣也可以用於原有的原型繼承的“類”：
function Animal2 (name) {
    this.name = name;
}
Animal2.prototype.speak = function () {
    console.log(this.name + ' makes a noise.');
}
class Dog2 extends Animal2 {
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
var d2 = new Dog2('Mitzie');
d2.speak();

//需要註意的是類不能繼承一般（非構造的）對象。如果你想要創建的類繼承某個一般對象的話，你要使用 Object.setPrototypeOf()：
var Animal3 = {
    speak() {
        console.log(this.name + ' makes a noise.');
    }
};
class Dog3 {
    constructor(name) {
        this.name = name;
    }
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
Object.setPrototypeOf(Dog3.prototype, Animal3);
var d3 = new Dog3('Mitzie');
d3.speak();

8.Species

　　你可能想要數組類 MyArray 返回的是 Array 對象。這個 species 模式能讓你重寫預設的構造器。
　　例如，當使用像 map() 這樣的方法來返回預設的構造器時，你想要這個方法返回父級的 Array 對象，而不是 MyArray 對象。Symbol.species 能實現：
class MyArray extends Array {
    // Overwrite species to the parent Array constructor
    static get [Symbol.species]() { return Array; }
}
var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

9.super 關鍵字可以用來調用其父類的構造器或者類方法

class Cat {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Lion extends Cat {
    speak() {
        super.speak();
        console.log(this.name + ' roars.');
    }
}
new Lion('nick').speak();
//再看個重要的例子
class Animal4 {
    constructor(){
        this.type = 'animal';
    }
    says(say){
        console.log(this.type + ' says ' + say);
    }
}
let animal4 = new Animal4();
animal4.says('hello') //animal says hello
class Cat4 extends Animal4 {
    constructor(){
        super();
        this.type = 'cat';
        // 1.子類定義constructor;
        // 2.調用super();
        // 3.this就會指向子類實例cat4，否則constructor內this報錯或子類方法內this指向父類實例
    }
}
let cat4 = new Cat4();
cat4.says('hello'); //cat says hello

　　上面代碼首先用class定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。
簡單地說，constructor內定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實例對象可以共用的。
Class之間可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。
上面定義了一個Cat類，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法。
　　super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。
這是因為子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象。
ES6的繼承機制，實質是先創造父類的實例對象this（所以必須先調用super方法），然後再用子類的構造函數修改this。

es6暫終


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • spring學習-4
    bean的作用域 使用bean的 scope 屬性來配置bean的作用域 scope="singleton" ： 預設是單例模式 即容器初始化創建bean實例，在整個容器的生命周期內只創建這一個bean； scope="prototype" : 原型的 ，即容器初始化時不創建bean的實例，而在每次 ...
  • 2、微信小程式之彈幕的實現（無後臺）
    對彈幕功能主要利用環信來實現的，讀者也許對環信這個東西很陌生，請先自行瞭解這環信再來看這文章。 環信開發文檔：http://docs.easemob.com/im/400webimintegration/10webimintro 請大家看文檔看WebIM這個模塊，環信官網也提供了小程式的demo，建 ...
  • DXVA2解碼數據用texture紋理渲染
    FFmpeg DXVA2解碼得到的數據使用surface來承載的，surface限制很多，如果能用紋理來渲染的話，那我們就可以充分開發D3D，比如可以用坐標變換來實現電子放大的功能，還可以用坐標變換來實現視頻圖像任意角度的旋轉等功能。而對於我來說，最重要的是紋理渲染可以使得解碼後的數據能夠用像素著色... ...
  • 建造者模式（11）
    今天，我們來講一下建造者模式。 一、案例 我們來用winform畫一個小人，一個頭，一個身體，兩隻手，兩條腿。 我們一般想到的代碼如下： 運行的效果： 嗯，好，下麵，我們再畫一個稍微胖一點的小人。 代碼如下： 運行效果如下 咦，我們好像少花了條腿哦。 哈哈，像這樣粗心的情況我們經常出現 二、演繹 1 ...
  • .NET 通用高擴展性的細粒度許可權管理架構(webApi/Mvc)
    一. 許可權場景分析: 1. 系統具有角色概念, 部門概念, 且都具有相應不同的許可權 2. 用戶具有多個角色, 多個部門等關係, 並且能給單個用戶指派獨有的許可權 3. 具有細粒度許可權控制到資源的RBAC, 能控制頁面, 控制菜單, 控制邏輯, 控制單個操作, 控制到單一數據; 且具有一定的可擴展性 4 ...
  • ASP.NET Zero--15.一個例子（8）商品分類管理-許可權控制
    1.添加許可權常量 打開文件AppPermissions.cs 【..\MyCompanyName.AbpZeroTemplate.Core\Authorization\AppPermissions.cs】 在末尾添加如下常量： //分類管理許可權 public const string Pages_C ...
  • jQuery 滑動選項卡SmartTab
    Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy to implement. It has a lot of features that you wil ...
  • js和jquery獲取當前元素的內容
    html代碼 <div>測試文本</div>js:div.innerHTMLjQuery:div.html() ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類