vue 之 面向對象
阿新 • • 發佈:2018-05-25
pro highlight 函數 一個 指向 方法 默認方法 brush ani
JavaScript 語言中,生成實例對象的傳統方法是通過構造函數。
function Animal(name,age){ this.name = name; this.age = age; } Animal.prototype.showName = function(){ console.log(this.name); console.log(this.age); } var a = new Animal(‘小黃‘,5); a.showName();
上面這種寫法跟傳統的面向對象語言(比如 C++ 和 Java)差異很大,很容易讓新學習這門語言的程序員感到困惑。
ES6 提供了更接近傳統語言的寫法,引入了 Class(類)這個概念,作為對象的模板。通過class
關鍵字,可以定義類。
基本上,ES6 的class
可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到,新的class
寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class
改寫,就是下面這樣
class Animal{ // 構造器 當你創建實例之後 constructor()方法會立刻調用 通常這個方法初始化對象的屬性 constructor(name,age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } var a2 = new Animal(‘點點‘,3);
上面代碼定義了一個“類”,可以看到裏面有一個constructor
方法,這就是構造方法,而this
關鍵字則代表實例對象。也就是說,ES5 的構造函數Animal,對應 ES6 的Animal類的構造方法。
Animal類除了構造方法,還定義了一個showName方法。註意,定義“類”的方法的時候,前面不需要加上function
這個關鍵字,直接把函數定義放進去了就可以了。另外,方法之間不需要逗號分隔,加了會報錯。
ES6 的類,完全可以看作構造函數的另一種寫法。
console.log(Animal2===Animal2.prototype.constructor);//true
上面代碼表示,類本身就指向了類的構造函數。
使用的時候,也是直接對類使用new
命令,跟構造函數的用法完全一致。
constructor方法
constructor
方法是類的默認方法,通過new
命令生成對象實例時,自動調用該方法。一個類必須有constructor
方法,如果沒有顯式定義,一個空的constructor
方法會被默認添加。
class Animal { } // 等同於 class Animal { constructor() {} }
上面代碼中,定義了一個空的類Animal
,JavaScript 引擎會自動為它添加一個空的constructor
方法。
vue 之 面向對象