The problem of defining classes between class of ES6 and direct function

  1. is seen in a book, and then the confusion arises. The code is as follows:
  • function definition class of ES5 
//
class Stack {
  constructor() {
    this.items = [];
  }
  push(element) {
    this.items.push(element);
  }
  pop() {
    return this.items.pop();
  }
// 
}

this is the explanation in the book:

  • ES5

in ES5 we declare a private items variable that can only be accessed by Stack functions or classes. However, this method creates a copy of the items variable for each instance of each
class. Therefore, if you want to create multiple Stack instances, it is not quite appropriate.

  • ES6
The

variable items is public. ES6"s classes are prototype-based. Although prototype-based classes save more memory than function-based classes and are more suitable for creating to build multiple instances, you cannot declare private properties (variables) or methods.

< H2 > question < / H2 >
  1. ES5 says that a copy of the items variable is created for each instance, so why is it not appropriate to create multiple Stack instances?
  2. but isn"t ES6 defining an items, with a constructor equivalent to creating an items variable for each instance? Why is it appropriate to create multiple instances? What is the advantage of this over ES5"s copy of the items variable?

(it is clear that prototype-based classes save more memory and are more suitable for creating multiple instances than function-based classes. )

Javascript
Feb.28,2021

because the book is wrong, it should be like this

  • ES5

in ES5 we declare a private items variable that can only be accessed by Stack functions or classes. However, this method creates a copy of the push and pop methods for each instance of the class. Therefore, if you want to create multiple Stack instances, it is not quite appropriate.

  • ES6
The

push and pop methods are public. ES6's classes are prototype-based. Although prototype-based classes save more memory than function-based classes and are more suitable for creating multiple instances, you cannot declare private properties (variables) or methods.

instead of "a copy of the item variable", item is already a member of the class, so of course create a copy of the item variable .

the key lies in the method of each object of the class implemented with function (unchanged prototype ). Although the function and implementation are completely the same, they are different objects and occupy a certain amount of memory space, that is to say, if you use function to implement the class 

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

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

but using the prototype, 

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

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

prototype-based classes save more memory and are more suitable for creating multiple instances than function-based classes. This sentence is clear.
this sentence you understand why you have a problem. No, no, no.

I really don't know what this es5,es6 has to do with it. 

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();
    }
}

Previous: Isn't the code highlighted by default in the VS2017 NodeJS Project Editor?

Next: About the use of custom fonts on websites

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu