Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of JavaScript objects for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Why constructors use constructors

What is a constructor: it's another way for JavaScript to create objects.

Compared with literal creation of objects: constructors can create objects with the same characteristics.

For example: create apple, banana and orange objects through fruit constructors. Its characteristic is that these objects are all created based on the same template, and each object has its own characteristics.

The characteristics of creating objects in a literal way

Advantages: simple and flexible.

Disadvantage: when you need to create a set of objects with the same characteristics, you cannot specify through code which objects should have the same members.

The way to implement templates in object-oriented programming languages: create templates using classes (class) and implement different objects (instances of classes) according to the templates.

JavaScript implementation template way 1: through the factory function, through the literal "{}" way to create objects to achieve, the disadvantage is that it is unable to distinguish the type of object.

The way JavaScript implements templates 2: create objects through constructors.

JavaScript built-in constructor

Before learning how to customize constructors, let's take a look at how JavaScript's built-in constructors are used.

Common built-in constructors: Object, String, Number, etc.

How the constructor creates an object: the new constructor name ().

What is instantiation and instantiation: the process of creating an object using the new keyword is called instantiation, and the instantiated object is called an instance of the constructor.

The "object .constructor" property points to the object's constructor.

When outputting through console.log (), [native code] indicates that the code for the function is built-in.

Custom constructor

Think about it: how to customize the constructor?

The naming of the constructor is recommended to use the Pascal naming convention, that is, all words are capitalized.

Inside the constructor, this is used to represent the object you just created.

Be careful

When learning JavaScript, beginners often feel confused about some similar nouns, such as functions, methods, constructors, constructors and so on.

In fact, they can all be called functions, but they are called differently in different usage scenarios. According to custom, a function defined in an object is called an object's method.

As for constructors, some people are used to calling them constructors or constructors. We just need to understand that these terms refer to the same thing.

Class keyword added by ES6

The reason why it didn't exist before ES6: to simplify the difficulty.

New reason: with the development of Web front-end technology, some people who were originally engaged in back-end development turned to the front end. In order to bring JavaScript closer to the syntax of some back-end languages so that developers can adapt more quickly.

The purpose of the class keyword: to define a class.

Features: constructor constructors can be defined in classes.

Be careful

Class syntax is essentially a syntax sugar, but it is designed to be user-friendly, and you can achieve the same effect without using the syntax, such as the constructor you learned earlier. In order to avoid that the user's browser does not support this syntax, it is not recommended.

Private member

Concept: in the constructor, variables defined with the var keyword are called private members.

Features: after the instance object cannot be accessed through the object. Members, but private members can be accessed in the object's member methods.

Features: private member name embodies the object-oriented encapsulation.

II. Built-in object String object

Review the creation of character data: use a pair of single or double quotation marks.

Why can character data be used like objects?

This is because these objects are actually instances of the constructor String, the String object.

The String object provides properties and methods for dealing with strings.

Be careful

When you operate on a string, the result is returned directly through the return value of the method and does not change the string content saved by the String object itself. Among the parameters of these methods, the position is an index value, calculated from 0, the index value of the first character is 0, and the index value of the last character is the length of the string minus 1.

To limit the length of the user name in the range of 3 to 10, do not allow the emergence of sensitive words admin as an example to demonstrate.

Number object

The Number object is used to handle values such as integers, floating-point numbers, and so on. Common properties and methods are as follows.

Is a static member of Number and is accessed directly through the constructor Number, rather than an instance of Number.

Math object

The Math object is used to perform mathematical operations on numeric values, and unlike other objects, it is not a constructor and can be used without instantiation.

Take Math.random () to get the random number in the specified range as an example.

The formula is Math.random () * (n-m) + m, which means that random values greater than or equal to m and less than n are generated.

Date object

The Date object is used to process the date and time.

Example 1: get the time and date based on the Date object.

Example 2: specify a date based on the Date object.

Example 3: deal with unreasonable dates. For example, setting the month to-1 means December last year, and the month 12 means January next year.

Case study: making a monthly calendar

Code implementation ideas:

Construct the date object on the 1st of the current month.

Judge what day the 1st is and write the first line.

Write about the rest of the month.

Code implementation

This month's calendar

Var thisyear,thismonth,today=new Date (); thisyear=today.getFullYear () thismonth=today.getMonth (); var imonth,iweekday,iday,nextday; [xss_clean] (") [xss_clean] (" Sunday, Tuesday, Wednesday, Thursday, Friday and Saturday ") [xss_clean] (") nextday=1; var thisdate=new Date (thisyear,thismonth,nextday) for (iday=0) Iday iday) {[xss_clean] (") [xss_clean] (")} else {if (thisdate.getMonth () = = today.getMonth () & & thisdate.getDate () = = today.getDate () & & thisdate.getFullYear () = = today.getFullYear ()) {[xss_clean] (") [xss_clean] (nextday) [xss_clean] (")} else { [xss_clean] (") [xss_clean] (nextday); [xss_clean] ("");} nextday=nextday+1; thisdate.setDate (nextday);}} [xss_clean] ("") [xss_clean] (") iweekday=1 while (thisdate.getMonth () = = thismonth) {if (thisdate.getMonth () = = today.getMonth () & & thisdate.getDate () = = today.getDate () & & thisdate.getFullYear () = = today.getFullYear ()) {[xss_clean] (") [xss_clean] (nextday) [xss_clean] ("") } else {[xss_clean] (") [xss_clean] (nextday) [xss_clean] (")} nextday=nextday+1 Iweekday=iweekday+1; if (iweekday > 7) {iweekday=1; [xss_clean] ("");} thisdate.setDate (nextday) } this is the end of the article on "sample Analysis of JavaScript objects". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.