這篇文章主要為大家展示了“ECMAScript6中Class對象的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ECMAScript6中Class對象的示例分析”這篇文章吧。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網絡空間、營銷軟件、網站建設、海城網站維護、網站推廣。

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

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

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

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中聲明方法的形式一樣，所以對象和方法的區(qū)分并不明顯，很容易造成混淆。

ES6引入了Class(類)的概念，我們通過ES6的語法進行創(chuàng)建對象的時候，可以像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();
//我的名字叫l(wèi)ingxiao
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規(guī)定我使用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要求，子類的構造函數必須執(zhí)行一次super函數，否則就會報錯。

最后

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

以上是“ECMAScript6中Class對象的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯網站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯建站chinadenli.net，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：ECMAScript6中Class對象的示例分析-創(chuàng)新互聯
文章位置：http://chinadenli.net/article42/ddiphc.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站營銷、Google、自適應網站、企業(yè)網站制作、域名注冊、電子商務

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯