普通方法定义栈

使用基本的JS语法定义栈

  1. // 定义栈
  2. function Stack() {
  3.   // 因为栈是通过数值定义的 
  4.   this.items = [];
  5. }
  7. // 在原型上定义栈的方法
  8. Stack.prototype.push = function(elem) {
  9.   this.items.push(elem);
  10. }
  12. Stack.prototype.pop = function() {
  13.   return this.items.pop();
  14. }
  16. Stack.prototype.peek = function() {
  17.   return this.items[this.items.length - 1];
  18. }
  20. Stack.prototype.isEmpty = function() {
  21.   return this.items.length === 0 ? true : false;
  22. }
  24. Stack.prototype.clear = function() {
  25.   this.items.length = 0;
  26. }
  28. Stack.prototype.size = function() {
  29.   return this.items.length;
  30. }
  33. var a = new Stack();
  34. a.push(1);
  35. a.push(2);
  36. a.push(3);
  37. a.push(4);
  40. // a 可以访问到原数组
  41. a.items.push(123);
  43. console.log(a);

输出结果
image.png

出现的问题

不仅 a 可以直接使用 push ， 并且能够直接访问到 items, 原本数组 ，并且可以通过原本数组的方法 push 也能实现添加 a.items.push(123); 因此这种方法不严谨， 具有漏洞

能够解决问题，主要是因为 a 能够访问到 items 原数组， 并且能够使用数组原生的方法。
解决：

    1. 私有属性
    1. Symbol 定义原数组，实例化的变量是访问不到 Symbol 的成员的

使用Symbol 定义栈

  2. // 使用 Symbol 创建
  3. var _items = Symbol(); // 访问属性 _items
  5. function Stack() {
  6.   // 因为栈是通过数值定义的 
  7.   // this.items = [];
  8.   // 使用Symbol的属性，创建数组
  9.   this[_items] = []
  10. }
  12. // 在原型上定义栈的方法
  13. Stack.prototype.push = function(elem) {
  14.   this[_items].push(elem);
  15. }
  17. Stack.prototype.pop = function() {
  18.   return this[_items].pop();
  19. }
  21. Stack.prototype.peek = function() {
  22.   return this[_items][this[_items].length - 1];
  23. }
  25. Stack.prototype.isEmpty = function() {
  26.   return this[_items].length === 0 ? true : false;
  27. }
  29. Stack.prototype.clear = function() {
  30.   this[_items].length = 0;
  31. }
  33. Stack.prototype.size = function() {
  34.   return this[_items].length;
  35. }
  37. var a = new Stack();
  38. a.push(1);
  39. a.push(2);
  40. a.push(3);
  41. a.push(4);
  43. // console.log(a.Symbol()); // 改为Symbol后，a访问不了Symbol成员
  45. // 使用Symbol还具有漏洞
  46. // ES6 可以通过方法可以获取到Symbol的属性
  47. console.log(Object.getOwnPropertySymbols(a)); // 能够访问到Symbol
  49. var key = Object.getOwnPropertySymbols(a)[0];
  50. console.log(key);
  52. // 拿到key 之后 就可以使用 Symbol定义的数组的push 方法
  53. a[key].push(456); 
  55. console.log(a); // 能够可以添加
  56. // for (var i in a) {
  57. //     console.log(i);
  58. // }

输出结果
image.png

出现的漏洞问题

ES6 可以通过方法可以获取到Symbol的属性, Object.getOwnPropertySymbols(a) 能够访问到Symbol 的成员 ， 然后保存key ， a可以通过key访问到 Symbol 的原数组。

使用 WeakMap定义栈

因为 WeakMap 是弱引用，这意味着在没有其他引用存在时垃圾回收能正确进行。和 WeakMap的一些特性，是用 WeakMap 更好的定义栈

  1. // 3 使用 WeakMap 弱引用
  2. var _items = new WeakMap();
  4. function Stack() {
  5.   // 因为栈是通过数值定义的 
  6.   // this.items = [];
  7.   // 使用Symbol的属性，创建数组
  8.   // this[_items] = []
  10.   // 3. 创建数组. 使用 set方法 key 传入this , value传入 []
  11.   _items.set(this, []);
  12. }
  14. // 在原型上定义栈的方法
  15. Stack.prototype.push = function(elem) {
  16.   // 通过 get 方法 读取this, 通过 push 添加
  17.   _items.get(this).push(elem);
  18. }
  20. Stack.prototype.pop = function() {
  21.   return _items.get(this).pop();
  22. }
  24. // 返回栈顶元素
  25. Stack.prototype.peek = function() {
  26.   return _items.get(this)[_items.get(this).length - 1];
  27. }
  29. // 判断栈是否为空
  30. Stack.prototype.isEmpty = function() {
  31.   return _items.get(this).length === 0 ? true : false;
  32. }
  34. Stack.prototype.clear = function() {
  35.   _items.get(this).length = 0;
  36. }
  38. Stack.prototype.size = function() {
  39.   return _items.get(this).length;
  40. }
  42. var a = new Stack();
  43. a.push(1);
  44. a.push(2);
  45. a.push(3);
  46. a.push(4);
  47. a.push(5);
  49. console.log(a);
  50. console.log(a.pop());
  51. console.log(a.peek());
  52. console.log(a.isEmpty());
  53. a.clear();
  54. console.log(a.isEmpty());
  55. console.log(a.size());
  57. // 使用 栈的方法都是没有问题的

使用 以上定义的方法， 因为WeakMap 是全局变量，在调用函数是会产生闭包

对代码优化 , 使用立即执行函数 ()()

// 使用立即执行函数

var Stack = (function() {
  var _items = new WeakMap();
  // 定义的方法
  var Stack = function() {
    // 因为栈是通过数值定义的 
    // this.items = [];
    // 使用Symbol的属性，创建数组
    // this[_items] = []

    // 3. 创建数组. key 传入this , value传入 []
    _items.set(this, []);
  }
  // 在原型上定义栈的方法
  Stack.prototype.push = function(elem) {
    // 读取this, 通过 push 添加
    _items.get(this).push(elem);
  }

  Stack.prototype.pop = function() {
    return _items.get(this).pop();
  }

  // 返回栈顶元素
  Stack.prototype.peek = function() {
    return _items.get(this)[_items.get(this).length - 1];
  }

  // 判断栈是否为空
  Stack.prototype.isEmpty = function() {
    return _items.get(this).length === 0 ? true : false;
  }

  Stack.prototype.clear = function() {
    _items.get(this).length = 0;
  }

  Stack.prototype.size = function() {
    return _items.get(this).length;
  }

  return Stack;
})()

在进行对代码进行优化， 使用 ES6 class 类 和执行函数。

// 使用 ES6 的class类 和 立即执行函数 

var Stack = (function() {
  var _items = new WeakMap();
  return class Stack {
    constructor() {
      // 定义初始化数据
      _items.set(this, []);
    };
    // 定义方法
    push(elem) {
      // 读取this, 通过 push 添加
      _items.get(this).push(elem);
    }

    pop() {
      return _items.get(this).pop();
    }

    // 返回栈顶元素
    peek() {
      return _items.get(this)[_items.get(this).length - 1];
    }

    // 判断栈是否为空
    isEmpty() {
      return _items.get(this).length === 0 ? true : false;
    }

    clear() {
      _items.get(this).length = 0;
    }

    size() {
      return _items.get(this).length;
    }

    toString() {
      // 获取toString 方法
      return _items.get(this).toString();
    }
  };
})()

输出结果

image.png