ES6的class跟直接function定義類的問題

是在某本書上看到的，然后產(chǎn)生了疑惑，代碼如下：

ES5的function定義類

// 定義一個棧
function Stack() {
  let items = [];
  this.push = function push(element) {
    items.push(element);
  };
  this.pop = function pop() {
    return items.pop();
  };
// 以下為其他棧方法
}

ES6的class定義類

//定義一個棧
class Stack {
  constructor() {
    this.items = [];
  }
  push(element) {
    this.items.push(element);
  }
  pop() {
    return this.items.pop();
  }
// 以下為其他棧方法
}

書上是這么解釋的：

ES5

在ES5中我們聲明了一個私有的items變量，它只能被Stack函數(shù)或類訪問。然而，這個方法為每
個類的實例都創(chuàng)建一個items變量的副本。因此，如果要創(chuàng)建多個Stack實例，它就不太適合了。

ES6

變量items卻是公共的。ES6的類是基于原型的。雖然基于原型的類比基于函數(shù)的類更節(jié)省內(nèi)存，也更適合創(chuàng)建多個實例，卻不能夠聲明私有屬性（變量）或方法。

問題

ES5說為每一個實例都創(chuàng)建了一個items變量副本，為何就說不適合創(chuàng)建多個Stack實例？
但ES6用構(gòu)造函數(shù)定義一個items，不也是相當(dāng)于給每一個實例都創(chuàng)建了一個items變量嗎？？為何這就適合創(chuàng)建多個實例了？這跟ES5的那個items變量副本的優(yōu)勢在哪呢？

（基于原型的類比基于函數(shù)的類更節(jié)省內(nèi)存，也更適合創(chuàng)建多個實例，這句話倒是明白的。）

回答

編輯回答

深記你

因為書上是錯的，應(yīng)該是這樣

ES5

在ES5中我們聲明了一個私有的items變量，它只能被Stack函數(shù)或類訪問。然而，這個方法為每個類的實例都創(chuàng)建push和pop方法的副本。因此，如果要創(chuàng)建多個Stack實例，它就不太適合了。

ES6

push和pop方法卻是公共的。ES6的類是基于原型的。雖然基于原型的類比基于函數(shù)的類更節(jié)省內(nèi)存，也更適合創(chuàng)建多個實例，卻不能夠聲明私有屬性（變量）或方法。

而不是“item變量的副本”，item本來就是類成員，當(dāng)然要創(chuàng)建item變量的副本。

關(guān)鍵在于用函數(shù)實現(xiàn)的類（不改prototype）的每個對象的方法雖然功能和實現(xiàn)都是完全一致的，但它們都是不同的對象，都各自占有一定的內(nèi)存空間，也就是說，使用函數(shù)實現(xiàn)類的話

var stackA = new Stack();
var stackB = new Stack();

console.log(stackA.push == stackB.push);  // false

而用原型的話，

var stackA = new Stack();
var stackB = new Stack();

console.log(stackA.push == stackB.push);  // true

2018年6月24日 23:31

編輯回答

野橘

基于原型的類比基于函數(shù)的類更節(jié)省內(nèi)存，也更適合創(chuàng)建多個實例，這句話倒是明白的
這句話你明白了哪你為什么會有問題。。

2017年11月23日 13:45

編輯回答

茍活

我實在想不明白白這根es5,es6有什么關(guān)系？

function Stack1() {
    let items = [];
    this.push = function push(element) {
        items.push(element);
    };
    this.pop = function pop() {
        return items.pop();
    };
}

class Stack2 {
    constructor() {
        let items = [];
        this.push = function push(element) {
            items.push(element);
        };
        this.pop = function pop() {
            return items.pop();
        };
    }
}

function Stack3() {
    this.items = [];
}
Stack3.prototype.push = function push(element) {
    this.items.push(element);
};
Stack3.prototype.pop = function pop() {
    return this.items.pop();
};

class Stack4 {
    constructor() {
        this.items = [];
    }
    push(element) {
        this.items.push(element);
    }
    pop() {
        return this.items.pop();
    }
}

2017年3月4日 06:50