快捷導(dǎo)航

JavaScript中利用構(gòu)造器函數(shù)模擬類的方法

更新時(shí)間：2017年02月16日 10:16:43 作者：Lewis617

JavaScript中沒有類的概念，所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法，文中給出了詳細(xì)的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。

前言

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

構(gòu)造器函數(shù)簡(jiǎn)介

你可以使用 ES6 的 class 關(guān)鍵字來實(shí)現(xiàn)類，不過我建議你使用傳統(tǒng)的構(gòu)造器函數(shù)來模擬類，因?yàn)檫@樣可以給人一種你是個(gè) JavaScript 老手的錯(cuò)覺，哈哈！

什么是構(gòu)造器函數(shù)？構(gòu)造器函數(shù)是編寫對(duì)象的方法之一。一般情況下，你可以這樣編寫一個(gè)對(duì)象：

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

但也可以使用構(gòu)造器函數(shù)來編寫對(duì)象：

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

使用構(gòu)造器函數(shù)的好處在于可以傳遞參數(shù)。構(gòu)造器函數(shù)通常首字母大寫，而且需要使用 new 關(guān)鍵詞來調(diào)用。在 JavaScript 中是沒有類的，利用構(gòu)造器函數(shù)我們可以模擬一個(gè)類。

使用構(gòu)造器函數(shù)編寫棧類

了解了構(gòu)造器函數(shù)，我們使用它編寫一個(gè)迷你的棧類，下面就是實(shí)現(xiàn)代碼：

Stack.js

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

上述棧類中，有個(gè)私有變量 items ，為何它就不能直接操作呢？為何掛在 this 上的方法可以直接調(diào)用？因?yàn)?new 操作符會(huì)將構(gòu)造器函數(shù)中的 this 指向生成的對(duì)象，也就是說掛在 this 上的方法或?qū)傩詫頃?huì)成為生成對(duì)象的方法或?qū)傩?，所以可以直接調(diào)用。而 items 則是函數(shù)內(nèi)部的一個(gè)局部變量，它在函數(shù)外部是不可見的，生成對(duì)象只能通過調(diào)用自身的方法，沿著作用域鏈來操作 items。

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

如果你不熟悉 JavaScript ，那么你應(yīng)該先學(xué)習(xí)一下 JavaScript 作用域、this 和 new 操作符的相關(guān)知識(shí)。推薦閱讀參考 Stoyan Stefanow 的《JavaScript 面向?qū)ο缶幊讨改稀罚@本書里面有很多小的代碼片段以及相關(guān)的圖文解讀，可以幫助你更好地理解 JavaScript 的相關(guān)特性。

總結(jié)

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

您可能感興趣的文章: