ECMAScript6入門--Class對象

wayneli 發布于2019-08-20 16:05 / 2083人閱讀

摘要：中沒有類的概念，因此它的對象和基于類的語言中的對象有所不同。生成對象的傳統方法是通過構造函數來實現的上述這種方式因為和中聲明方法的形式一樣，所以對象和方法的區分并不明顯，很容易造成混淆。要求，子類的構造函數必須執行一次函數，否則就會報錯。

面向對象的語言有一個標志，那就是他們都有類的概念，通過類可以創建任意多個具有相同屬性和方法的對象。

ECMAScript5中沒有類的概念，因此它的對象和基于類的語言中的對象有所不同。

Javascript生成對象的傳統方法是通過構造函數來實現的

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        return "Hello "+ this.name;
    }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

上述這種方式因為和Javascript中聲明方法的形式一樣，所以對象和方法的區分并不明顯，很容易造成混淆。

ES6引入了Class(類)的概念，我們通過ES6的語法進行創建對象的時候，可以像Java語法一樣，使用關鍵字class，用來定義類。當然，這種語法的功能，通過ES5也都可以實現，它只是讓類的定義更加清晰，更容易理解。

//類的定義
class Person {
    //ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //實例方法
    sayName() {
        console.log("我的名字叫"+ this.name);
    }
}
//類的繼承
class Programmer extends Person {
    constructor(name) {
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        cosnole.log("這是我的地盤");
    }
}
//運行測試
var person = new Person("lingxiao");
var coder = new Programmer("coder");

person.sayName();
//我的名字叫lingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//這是我的地盤

下面來注意講述一下上述代碼中出現的語法。

constructor

constructor是類的默認方法，就像Java中的main方法一樣，每個類都必須有constructor方法。

在通過new實例化對象的時候，就會自動調用constructor方法，得到的也就是constructor返回的值。constructor默認返回當前類的實例對象（this），但是我們也可以指定另外一個對象，當然，這樣就會導致實例化出來的對象，并不是當前類的實例。

class Person {
    constructor(){
        var ob = new Object();
        return Ob;
    }
    sayHello(){
        return "Hello World"
    }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

我們在實例化對象的時候，ES6規定我使用new關鍵字，如果直接調用，會當成函數來調用。

class Person {
    constructor(name){
        this.name = name;
    }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without "new"

this

在最開始的代碼中，我們看到了this，this在類中指向的就是實例本身，但是如果我們在類的方法中使用了this，多帶帶調用此方法的時候，就會出現錯誤。

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello() {
        return "Hello "+this.name
    }
}
var person  =  new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property "name" of undefined

針對這個我們可以很簡單的在構造方法中綁定this

class Person{
    constructor(name){
        this.name = name;
        this.sayHello = this.sayHello.call(this);
    }
    sayHello() {
        return "Hello "+this.name
    }
}

繼承extend

我們想要在一個類上擴展一些屬性，但又不想修改原類，就用到了繼承。

//類的繼承
class Programmer extends Person {
    constructor(name,age) {
        this.age = age;//報錯
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        cosnole.log("這是我的地盤");
    }
}

使用繼承的時候，需要用super關鍵字來調用父類，super(name)就呆逼啊調用父類的constructor方法。

另外，我們使用的繼承的時候，super關鍵字也幫我們改變了this的指向，所以我們必須要先調用super方法，然后才能使用this。ES6要求，子類的構造函數必須執行一次super函數，否則就會報錯。

最后

class關鍵字的出現，也讓Javascript看上去更加像一個面向對象語言，愿Javascript越變越好越易用。

云服務器 GPU云服務器編程對象c++class java class對象 ECMAScript6 Class

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

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

ECMAScript6標準入門（一）新增變量與數據結構

摘要：一簡介與的關系是的規格，是的一種實現另外的方言還有和轉碼器命令行環境安裝直接運行代碼命令將轉換成命令瀏覽器環境加入，代碼用環境安裝，，根目錄建立文件加載為的一個鉤子設置完文件后，在應用入口加入若有使用，等全局對象及上方法安裝一、ECMAScript6 簡介 (1) 與JavaScript的關系 ES是JS的規格，JS是ES的一種實現（另外的ECMAScript方言還有Jscript和...

Tangpj 2019-08-21 14:26 評論0 收藏0
【前端】ES6入門基礎知識

摘要：關于的入門了解新增模板字符串為提供了簡單的字符串插值功能箭頭函數操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值。將對象納入規范，提供了原生的對象。增加了和命令，用來聲明變量。關于ES6的入門了解新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數（操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 評論0 收藏0
Vue.js新手入門指南[轉載]

摘要：就是一個用于搭建類似于網頁版知乎這種表單項繁多，且內容需要根據用戶的操作進行修改的網頁版應用。單頁應用程序顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。最近在逛各大網站，論壇，以及像SegmentFault等編程問答社區，發現Vue.js異常火爆，重復性的提問和內容也很多，樓主自己也趁著這個大前端的熱潮，著手學習了一...

MartinHan 2019-08-23 11:50 評論0 收藏0
ECMAScript6學習筆記

摘要：筆記和和是塊作用域的，是聲明常量用的。一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。這種方式會訪問注冊表，其中存儲了已經存在的一系列。這種方式與通過定義的獨立不同，注冊表中的是共享的。 ECMAScript6 筆記 let 和 const let和const是塊作用域的，const是聲明常量用的。 {let a = 10;} a ...

CODING 2019-08-21 10:47 評論0 收藏0