前端開發教程：Javascript中如何定義類？

Javascript雖然不是面向對象語言，但是我們一樣可以實作類的定義，工作中我們定義類一般用下面的方式，如下：

function Animal(name, species){
 this.name = name;
 this.species = species;
 }


 Animal.prototype.walk = function (){
 return this.name + "是" + this.species + "，它會抓老鼠！";
 }

 Animal.prototype.swim = function () {
 return this.name + "是" + this.species + "，它會遊泳！";
 }

 var obj = new Animal("咪咪", "貓");//通過new關鍵詞建立對象
 console.log(obj.walk());

 var obj = new Animal("旺旺", "狗");//通過new關鍵詞建立對象
 console.log(obj.swim());

</script>           

運作結果：

這樣的寫法相對于其它傳統面向對象語言來講，是不是很不一樣？

可喜的是2015年6月正式釋出了ECMAScript 6（以下簡稱ES6）。它是JavaScript語言的下一代标準，ES6引入了Class這個概念，會後端開發的小夥伴都知道java和c#都用class來定義類,上面的代碼用ES6改造後如下：

class Animal {
 constructor(name, species) {//constructor是一個構造方法，用來接收參數
 this.name = name;//this代表的是執行個體對象
 this.species = species;
 }
 walk() {
 return this.name + "是" + this.species + "，它會抓老鼠！";
 }
 swim() {
 return this.name + "是" + this.species + "，它會抓看家！";
 }
 }
 var obj = new Animal("咪咪", "貓");//通過new關鍵詞建立對象
 console.log(obj.walk());
 var obj = new Animal("旺旺", "狗");//通過new關鍵詞建立對象
 console.log(obj.walk());
</script>           

這種寫法是不是更加清晰，更像是一種面向對象的語言。

但是需要注意javascript依然不是一個面向對象的語言，ES6中的class隻是一個文法糖，底層的實作方式還是一樣的，為什麼我會這樣說，運作下面的代碼。

console.log(Animal===Animal.prototype.constructor);           

不過很多的浏覽器并不完全支援ES6，比如IE……

如果大家有更好的建議可以評論留言，歡迎大家轉發。