Home > Web Front-end > JS Tutorial > Help you get JavaScript objects

Help you get JavaScript objects

WBOY
Release: 2022-03-18 18:03:36
forward
1434 people have browsed it

This article brings you relevant knowledge about javascript, which mainly introduces related issues about objects, including knowledge points about constructors and various built-in objects. I hope it will be useful to everyone. help.

Help you get JavaScript objects

Related recommendations: javascript tutorial

1. Constructor

Why use constructor

What is a constructor: It is another way for JavaScript to create objects.

Comparison with creating objects using literal methods: Constructors can create some objects with the same characteristics.

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

Characteristics of creating objects using literals

  • Advantages: Simple and flexible.

  • Disadvantages: When you need to create a set of objects with the same characteristics, you cannot specify through code which members these objects should have.

  • The way to implement templates in object-oriented programming languages: use classes to create templates, and implement different objects (instances of classes) based on the templates.

  • Ways to implement templates in JavaScript 1: Through factory functions, objects are created internally through literals "{ }". The disadvantage is that the type of the object cannot be distinguished.

  • How JavaScript implements templates 2: Create objects through constructors.

JavaScript's built-in constructor

Before learning how to customize the constructor, let's first take a look at how to use the JavaScript's built-in constructor.

  • Common built-in constructors: Object, String, Number and other constructors.
  • How the constructor creates an object: new constructor name ().
  • What is instantiation and instance: People are accustomed to calling the process of creating an object using the new keyword as instantiation, and the object obtained after instantiation is called an instance of the constructor.

Help you get JavaScript objects

  • The "object.constructor" property points to the constructor of the object.
  • When output through console.log(), [native code] indicates that the code of the function is built-in.

Custom constructor

Thinking: How to customize the constructor?

  • It is recommended to use the Pascal naming rule when naming constructors, that is, capitalize the first letter of all words.
  • Inside the constructor, use this to represent the object just created.

Help you get JavaScript objects

Note

When learning JavaScript, beginners are often confused by some similar nouns, such as functions , methods, constructors, constructors, constructors, etc.

In fact, they can all be collectively called functions, but they have different names in different usage scenarios. By convention, functions defined in an object are called methods of the object.

As for the constructor, some people are accustomed to calling it a constructor or a constructor. We only need to understand that these names refer to the same thing.

The new class keyword in ES6

  • The reason why it was not available before ES6: To simplify the difficulty.

  • Reason for adding: 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 make JavaScript closer to the syntax of some back-end languages ​​so that developers can adapt faster.

  • The role of the class keyword: used to define a class.

  • Features: The constructor constructor method can be defined in the class.

Note

class syntax is essentially syntax sugar, it is designed for user convenience. You can achieve the same results without using this syntax. The effect is like the constructor learned earlier. In case the user's browser does not support this syntax, this method is not recommended.

Private members

Concept: In the constructor, variables defined using the var keyword are called private members.

Features: After the instance object, it cannot be accessed through "object.member", but private members can be accessed in the member method of the object.

Features: The private member name reflects object-oriented encapsulation.

Help you get JavaScript objects

2. Built-in objects

String objects

  • Review the creation of character data: use a pair of single quotes or double quotes quotation marks.
  • Why can character data be used like objects?

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

  • String object provides some properties and methods for processing strings.

Help you get JavaScript objects

Note

When operating on a string, the processing result is returned directly through the return value of the method. It does not change the string content stored in the String object itself. In the parameters of these methods, the position is an index value, counting 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.

Take the example of limiting the user name length to 3~10 and not allowing the sensitive word admin to appear.

Help you get JavaScript objects

Number object

Number object is used to process integers, floating point numbers and other numerical values. Commonly used properties and methods are as follows.

Help you get JavaScript objects

Help you get JavaScript objects

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

Math object

The Math object is used to perform mathematical operations on numerical values. Unlike other objects, this object is not a constructor and does not need to be instantiated to be used.

Help you get JavaScript objects

Take Math.random() to obtain a random number within a specified range as an example.

The formula is Math.random() * (n - m) m, which means generating a random value greater than or equal to m and less than n

Help you get JavaScript objects

Date object

Date object is used to handle date and time.

Help you get JavaScript objects

Help you get JavaScript objects

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

Help you get JavaScript objects

#Example 2: Specify a date based on a Date object.

Help you get JavaScript objects

Example 3: Handle the situation when the set date is unreasonable. For example, setting the month to -1 means December last year, and the month is 12 means January next year.

Help you get JavaScript objects

Case: Making a monthly calendar

Help you get JavaScript objects

Code implementation ideas:

  • Construct a date object on the 1st of the current month.
  • Determine what day of the week the 1st is and write the first line.
  • Write about the rest of the month.

Code implementation

	
	<title>本月月历</title>
	
	
	<p><b>本月月历</b></p>
	<script>
	var thisyear,thismonth,today=new Date();;
	thisyear=today.getFullYear()
	thismonth=today.getMonth();
	
	var imonth,iweekday,iday,nextday;
	document.write("<table align=center border=1><tr align=center bgcolor=#fff00>")
	document.write("<td>周日<td>周一<td>周二<td>周三<td>周四<td>周五<td>周六")
	document.write("<tr>")
	nextday=1;
	var thisdate=new Date(thisyear,thismonth,nextday)
	for (iday=0;iday<=6;iday++){
	if (thisdate.getDay() > iday) {
	document.write("<td>");
	document.write("")
	}
	else {
	if (thisdate.getMonth()== today.getMonth()&&thisdate.getDate()== today.getDate() &&thisdate.getFullYear()== today.getFullYear() ){
	document.write("<td><font color=red><b>")
	document.write(nextday)
	document.write("")
	}
	else {
	document.write("<td><b>");
	document.write(nextday);
	document.write("");
	}
	nextday=nextday+1;
	thisdate.setDate(nextday);
	}
	}
	
	document.write("");
	document.write("<tr>")
	iweekday=1
	while(thisdate.getMonth() == thismonth ){
	if (thisdate.getMonth()== today.getMonth()&&thisdate.getDate()== today.getDate() &&thisdate.getFullYear()== today.getFullYear() ){
	document.write("<td><font color=red><b>")
	document.write(nextday)
	document.write("")
	}
	else{
	document.write("<td><b>")
	document.write(nextday)
	document.write("")
	}
	nextday=nextday+1;
	iweekday=iweekday+1;
	if (iweekday>7 ){
	iweekday=1;
	document.write("");
	}
	thisdate.setDate(nextday);
	}
	
	</script>
	
	
	
Copy after login

Related recommendations: javascript learning tutorial

The above is the detailed content of Help you get JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template