快捷導(dǎo)航

詳解ECMAScript6入門--Class對象

更新時(shí)間：2017年04月27日 08:59:00 作者：大漢

本篇文章主要介紹了詳解ECMAScript6入門--Class對象，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

面向?qū)ο蟮恼Z言有一個(gè)標(biāo)志，那就是他們都有類的概念，通過類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對象。

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

Javascript生成對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)來實(shí)現(xiàn)的

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

上述這種方式因?yàn)楹蚃avascript中聲明方法的形式一樣，所以對象和方法的區(qū)分并不明顯，很容易造成混淆。

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

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

person.sayName();
//我的名字叫l(wèi)ingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//這是我的地盤

下面來注意講述一下上述代碼中出現(xiàn)的語法。

constructor

constructor是類的默認(rèn)方法，就像Java中的main方法一樣，每個(gè)類都必須有constructor方法。

在通過new實(shí)例化對象的時(shí)候，就會(huì)自動(dòng)調(diào)用constructor方法，得到的也就是constructor返回的值。constructor默認(rèn)返回當(dāng)前類的實(shí)例對象（this），但是我們也可以指定另外一個(gè)對象，當(dāng)然，這樣就會(huì)導(dǎo)致實(shí)例化出來的對象，并不是當(dāng)前類的實(shí)例。

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

我們在實(shí)例化對象的時(shí)候，ES6規(guī)定我使用new關(guān)鍵字，如果直接調(diào)用，會(huì)當(dāng)成函數(shù)來調(diào)用。

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

this

在最開始的代碼中，我們看到了this，this在類中指向的就是實(shí)例本身，但是如果我們在類的方法中使用了this，單獨(dú)調(diào)用此方法的時(shí)候，就會(huì)出現(xiàn)錯(cuò)誤。

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

針對這個(gè)我們可以很簡單的在構(gòu)造方法中綁定this

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

繼承extend

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

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

使用繼承的時(shí)候，需要用super關(guān)鍵字來調(diào)用父類，super(name)就調(diào)用父類的constructor方法。

另外，我們使用的繼承的時(shí)候，super關(guān)鍵字也幫我們改變了this的指向，所以我們必須要先調(diào)用super方法，然后才能使用this。ES6要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)，否則就會(huì)報(bào)錯(cuò)。

最后

class關(guān)鍵字的出現(xiàn)，也讓Javascript看上去更加像一個(gè)面向?qū)ο笳Z言，愿Javascript越變越好越易用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。