JavaScript中利用構造器函數模擬類的方法

前言

本文小編帶大家一起學習的是在 JavaScript 中使用構造器函數（construcor function）模擬類。下面話不多說，感興趣的朋友們下面來一起看看吧。

構造器函數簡介

你可以使用 ES6 的 class 關鍵字來實現類，不過我建議你使用傳統的構造器函數來模擬類，因為這樣可以給人一種你是個 JavaScript 老手的錯覺，哈哈！

什么是構造器函數？構造器函數是編寫對象的方法之一。一般情況下，你可以這樣編寫一個對象：

var obj = { a:1, b:2 };

但也可以使用構造器函數來編寫對象：

function Obj(a, b){
 this.a = a;
 this.b = b;
}
var obj = new Obj(1, 2); //obj 等價于 { a:1, b:2 }

使用構造器函數的好處在于可以傳遞參數。構造器函數通常首字母大寫，而且需要使用 new 關鍵詞來調用。在 JavaScript 中是沒有類的，利用構造器函數我們可以模擬一個類。

使用構造器函數編寫棧類

了解了構造器函數，我們使用它編寫一個迷你的棧類，下面就是實現代碼：

Stack.js

function Stack() {
 // 私有變量 items，用于記錄數組，對象不能直接操作
 var items = [];
 // 類方法 push，在數組末尾添加項，對象可以直接調用
 this.push = function (element) {
 items.push(element);
 };
 // 刪除并返回數組末尾的項
 this.pop = function () {
 return items.pop();
 };
}

上述棧類中，有個私有變量 items ，為何它就不能直接操作呢？為何掛在 this 上的方法可以直接調用？因為 new 操作符會將構造器函數中的 this 指向生成的對象，也就是說掛在 this 上的方法或屬性將來會成為生成對象的方法或屬性，所以可以直接調用。而 items 則是函數內部的一個局部變量，它在函數外部是不可見的，生成對象只能通過調用自身的方法，沿著作用域鏈來操作 items。

var stack = new Stack();
// stack 對象不能直接操作items，結果是 undefined
console.log(stack.items) 
 
// stack 對象可以直接操作構造器函數中掛在 this 上的屬性和方法
stack.push(1);
// 打印了1
console.log(stack.pop())

如果你不熟悉 JavaScript ，那么你應該先學習一下 JavaScript 作用域、this 和 new 操作符的相關知識。推薦閱讀參考 Stoyan Stefanow 的《JavaScript 面向對象編程指南》，這本書里面有很多小的代碼片段以及相關的圖文解讀，可以幫助你更好地理解 JavaScript 的相關特性。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。