詳解ECMAScript6入門–Class物件

NO IMAGE

物件導向的語言有一個標誌,那就是他們都有類的概念,通過類可以建立任意多個具有相同屬性和方法的物件。

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越變越好越易用。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

ECMAScript6–解構ECMAScript6 新特性範例大全ECMAScript6輪播圖實踐知識總結ECMAScript6快速入手攻略ECMAScript6中Map/WeakMap詳解ECMAScript6中Set/WeakSet詳解ECMAScript6塊級作用域及新變數宣告(let)ECMAScript6新增值比較函式Object.isECMAScript6函式剩餘引數(Rest Parameters)ECMAScript6函式預設引數ECMAScript6的新特性箭頭函式(Arrow Function)詳細介紹