歡迎加入QQ討論群258996829
麥子學院 頭像
蘋果6袋
6
麥子學院

在 JavaScript 中使用構造器函數(shù)模擬類

發(fā)布時間:2017-10-10 08:31  回復:0  查看:3428   最后回復:2017-10-10 08:31  

本文和大家分享的是在 JavaScript 中使用構造器函數(shù)(construcor function)模擬類相關內(nèi)容,一起來看看吧,希望對大家學習javascript有所幫助。

  構造器函數(shù)簡介

  你可以使用 ES6 的 class 關鍵字來實現(xiàn)類,不過我建議你使用傳統(tǒng)的構造器函數(shù)來模擬類,因為這樣可以給人一種你是個 JavaScript 老手的錯覺,哈哈!

  什么是構造器函數(shù)?構造器函數(shù)是編寫對象的方法之一。一般情況下,你可以這樣編寫一個對象:

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

  但也可以使用構造器函數(shù)來編寫對象:

  function Obj(a, b){

  this.a = a;

  this.b = b;

  }

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

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

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

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

  Stack.js

  function Stack() {

  // 私有變量 items,用于記錄數(shù)組,對象不能直接操作

  var items = [];

  // 類方法 push,在數(shù)組末尾添加項,對象可以直接調(diào)用

  this.push = function (element) {

  items.push(element);

  };

  // 刪除并返回數(shù)組末尾的項

  this.pop = function () {

  return items.pop();

  };

  }

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

  var stack = new Stack();

  // stack 對象不能直接操作items,結果是 undefined

  console.log(stack.items)

  // stack 對象可以直接操作構造器函數(shù)中掛在 this 上的屬性和方法stack.push(1);// 打印了1

  console.log(stack.pop())

  如果你不熟悉 JavaScript ,那么你應該先學習一下 JavaScript 作用域、this 和 new 操作符的相關知識。

 

 

來源:博客園

您還未登錄,請先登錄

熱門帖子

最新帖子

?