preface

While reading the book “Learning JavaScript Data Structures and Algorithms (3rd edition)”, I found some of the knowledge points mentioned in the book are quite interesting. I will continue to share my impressions of this book 😊

I’m going to share with you some of the interesting things I came across while reading the ECMAScript chapter of the book, and welcome any interested front-end developers to read this article.

Expansion operator

New expansion operator (…) in ES6 The expansion operator used in a function can be used as a residual argument.

For example, when a function has multiple unknown parameters, you can use the expansion operator to describe them. The following code prints the unknown parameters passed by the function through the expansion operator on the console, adding the known parameters to the length of the unknown parameters, and returning the calculation result.

const argumentsTest = (x,y,... args) = >{
    console.log(args)
    return x + y + args.length;
}
Copy the code
  • Test the above code for correctness
console.log("Use of expansion operators in functions",argumentsTest(12.15."test".12.7.8));
Copy the code

The arguments object

The Arguments object is a local variable available in all non-arrow functions, and the Arguments object contains each argument passed to the current function, the first argument being at index 0.

You can use the arguments object to implement the above function using the expansion operator to get the unknown arguments passed in by the function.

const argumentsJS = (x,y) = >{
    let a = Array.prototype.slice.call(arguments.2);
    return (x + y) * a.length;
}
console.log("Use of expansion operators in functions (arguments)",argumentsJS(12.15."test".12.7.8));
Copy the code

After running the above code, an interesting thing happens:

  • There is no arguments object in the arrow function. Running the above code using deno and the browser console raises an undefined error.

  • Using Node to execute the above code, we found that it worked.

The arrow function has no arguments object. Why does Node run normally when it is called?

  • To find out, let’s print out the arguments object from the function.
const argumentsJS = (x,y) = >{
    console.log(arguments);
    let a = Array.prototype.slice.call(arguments.2);
    return (x + y) * a.length;
}
console.log("Use of expansion operators in functions (arguments)",argumentsJS(12.15."test".12.7.8)); Copy the code
  • The above question is answered when we find that arguments uses arguments from the window object when executing node.

A reasonable declaration of the methods inside the constructor

There are two ways to declare a method inside a constructor:

  • Declare it directly inside the function
  • The method to be declared is mounted to the stereotype

Functions are declared directly inside

We can declare a variable directly inside a function and receive a function as follows:

const testFun = function (name,title) {
    this.name = name;
    this.title = title;
    this.printResult = function () {
        console.log(this.title+"" +this.name);
 } } Copy the code
  • Test that the above code works properly
const book = new testFun();
book.name = "aa";
book.title = "Title";
book.printResult();
Copy the code

Mount to the prototype

We can mount the method to be declared on the constructor prototype as follows:

const testFun = function (name,title) {
    this.name = name;
    this.title = title;
}
testFun.prototype.printResult = function () {
 console.log(this.title+"" +this.name); } Copy the code
  • Test that the above code works properly
const book = new testFun();
book.name = "aa";
book.title = "Title";
book.printResult();
Copy the code

The best solution

We found that both methods can be used to create methods inside constructors, so which one should we use?

Let’s take a look at the differences between the two methods:

  • Functions are directly declared internally. For each instance declared, a copy of the function is created, which increases memory consumption during instantiation.
  • After a method is mounted to the prototype of a constructor, methods mounted to the prototype are created only once, no matter how many times the instance is created. Methods mounted to the prototype are shared among all instances, saving memory and reducing the overhead of instantiation.

Therefore, declaring methods in constructors and mounting them to prototypes is the best solution.

However, when a method is mounted to a stereotype, it can only be a public method, whereas methods declared inside constructors are private.

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌