Private members and privileged methods

function Person(name, age) { var className = "H5"; this.name = name; this.age = age; this.showName = function () { console.log(this.name); } function getClassName() { return className; } this.showclass = function () {console.log(" name: ",this.name," class: ",getClassName()); }} person.prototype. des = "h5-js object oriented "; Person.info = "H5 Information";Copy the code

Members: properties and methods of an object

Instance members: instance object properties and methods of the name, age | showName \ showClass

Static members: the constructor’s own property and method info

Stereotype member: the attributes and methods des of the stereotype object corresponding to the constructor

Private members: Variables and functions declared in constructors, which we can only access inside the function, are private className getClassName

Privileged methods: An instance method that uses a private member inside a function is called a privileged method showClass

Argument details

For function arguments, there is a problem that the number of parameters and arguments do not correspond:

Function fun(a,b,c) {console.log(a, b,c); } fun (1, 2); Function fun(a,b,c) {console.log(a, b,c); } fun (1, 2, 3, 4); / / 1 2 3Copy the code

Requirement: Add the numbers (unknown number of parameters) passed in by the user and return the result of the addition.

Analysis: Because we do not know how many parameters will be passed by the user, so there is no way to define a function to use a certain number of parameters to receive data, but if you can not get the number of parameters or specific arguments, then it is impossible to complete the related function, so we need to find a way to get the corresponding argument.

This is where arguments is used as a hidden property in Function

Definition: Arguments is an array-like object corresponding to the arguments passed to the function. This object contains each argument passed to the function.

function add() { console.log(arguments); } the add (1, 2, 3, 4, 5);Copy the code

As you can see from the print, arguments contains all the arguments we passed into the function, so you can add all the numbers.

function add() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } console.log(add(1, 2, 3, 4, 5)); / / 15Copy the code

Arguments can be very powerful when you don’t know exactly how function arguments are passed.

Note: Arguments is not an Array, but a pseudo-array. There are no Array attributes other than the length attribute and the indexed element.

There is also a method callee in Arguments, which we will briefly mention here. This method can be used when we need to call ourselves in a function (recursion), but it is not recommended in ES5.

3, ES6 class implementation — class

3.1- Basic structure of class

Definition and usage: the calss keyword defines the class, creates the constructor, and capitalizes the class name

Grammatical structure:

Class class name {constructor parameters (parameter 1, 2) {/ / constructor body, add instance object members} the method name () {} / / add a prototype object members static method name {/ / to add static members, can only use class called}} var d = new class nameCopy the code

In ES5, you define a class using function and use it to create objects.

Function Person(name, age){this.name = name; this.age = age; } person.prototype. doWork = function(){console.log(" add method to prototype object in ES5 "); } var p = new Person("Neld", 10);Copy the code

In ES6, the same class is defined using the class keyword.

class Person{ constructor(name,age){ this.name = name; this.age = age; } doWork(){console.log(" add methods to prototype objects in ES6 "); } } var p = new Person("Neld",10); console.log(p);Copy the code

The use of class to define a class in ES6 is just syntactic sugar (syntactic sugar is a kind of syntax that increases the readability of a program and thus reduces the chance of error in the program code), and the bottom line ultimately translates to the function class definition class used in ES5, with its instance members and prototype members.

Class details:

  1. The constructor method is the constructor that creates an object. This is usually where properties are defined for the instance object (methods are also possible), and new is automatically called afterwards.
  2. The methods outside of the constructor method are the prototype methods of the object.
  3. We have previously added members (static members) to the constructor outside, before which we add static.
class Person{ constructor(name,age){ this.name = name; this.age = age; } static doWork(){console.log(" add methods to prototype objects in ES6 "); } } Person.doWork()Copy the code

Example: Use class to implement the TAB bar that ES5 wrote earlier

3.2- Class inheritance structure

Classes in ES6 use extends and super to implement inheritance.

Grammatical structure:

Class subclass extends superclass {constructor(const 1, const 2){constructor(const 1, const 2){super(const 1, const 2); }}Copy the code

Requirement: Define Animal class with class, then define Person class and inherit Animal class.

class Animal { constructor(name, age){ this.name = name; this.age = age; } eat(){console.log(" eat "); } sleep(){console.log(" sleep "); }} class Person extends Animal{constructor(name,age){super(name,age); // Call the constructor in the superclass} play(){console.log(" play "); } } console.log(new Person("Neld", 10));Copy the code

Class implementation inheritance details:

  1. Animal defines the attributes and methods that animals should have
  2. Using the extends keyword, the Person class inherits from the Animal class.
  3. In the Person constructor, use the super keyword to call the constructor from the parent class.