current position:Home>[JS dry goods sharing | suggestions collection] challenge to take you into JS in the shortest time (7)
[JS dry goods sharing | suggestions collection] challenge to take you into JS in the shortest time (7)
2021-08-26 20:10:14 【Please call me Ken】
This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details : 8 Yuegengwen challenge
Appreciate meeting Hello I am ken
author : Please call me ken
link :juejin.cn/user/109118…
source : Nuggets
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .
About foreword :
Part of the content and pictures of the article come from the Internet , If you have any questions, please contact me ( The official account is in the main page )
This blog is suitable for those who have just come into contact with JS
As well as a long time did not see want to review the small partner .
About the content :
JavaScript object
5.1_ Initial object
5.1.1_ What is an object
for example : stay JavaScript Describes a mobile phone object in , The properties and methods of the mobile phone are as follows :
- Mobile phone properties : Color 、 weight 、 Screen size .
- How to use mobile phones : Make a phone call 、 texting 、 Watch videos 、 Listen to the music .
In the code , An attribute can be regarded as a variable stored in an object , Use “ object . Property name ” Express ; Method can be regarded as a function stored in an object , Use “ object . Method name ()” Visit .
// Suppose there is a mobile phone object p1, Created through code
var p1 = {
color: ' black ',
weight: '188g',
screenSize: '6.5',
call: function (num) {
console.log(' Phoning '+num);
},
sendMessage: function (num, message) {
console.log (' to '+ num + ' texting , The content is :' + message);
},
playVideo: function() {
console.log (' Play the video ');
},
playMusic: functlon() {
console.log (' Play music ');
}
};
// Visit to p1 Properties of
console.log (pl.color); // Output results :" black ", Indicates that the color of the phone is black
console.log (p1.weight); // Output results : "188g", Indicates that the weight of the mobile phone is 188 g
console.log (p1.screenSize);// Output results :"6.5", Indicates that the screen size of the mobile phone is 6.5 Inch
// call p1 Methods
p1.call('123'); // Call the calling method of the mobile phone , The dialing number is 123
p1.sendMessage('123', 'hello'); // Give me the phone number 123 texting , The content is hello
p1.playVideo(); // Call the video playing method of the mobile phone
p1.playMusic(); // Call the music playing method of the mobile phone
Copy code
As can be seen from the above code , Object properties and variables are used in a similar way , The method of the object is similar to that of the function .
A series of properties and methods can be collected through objects , Use a simple variable name p1 To express .
5.1.2_ Create an object using literals
stay JavaScript in , The literal value of an object is in curly braces “{" To wrap the members in the object , Each member uses "key:value" To preserve ,key Represents the property name or method name ,value Represents the corresponding value . Multiple object members are separated by “," separate .
Case study :
// Create an empty object
var obj = {};
// Create a student object
var stul = {
name: ' Xiao Ming ', // name attribute
age: 18, // age attribute
sex: ' male ', // sex attribute
sayHello: function () { // sayHello Method
console.log ('Hello');
}
};
Copy code
In the above code ,obj Is an empty object , The object has no members .stu1 Object containing 4 Members , Namely name、age、sex and sayHello, among name,age and sex Is an attribute member ,sayHello Is a method member .
5.1.3_ Access object properties and methods
After creating the object , You can access the properties and methods of the object .
The sample code is as follows :
// Access the properties of the same object ( grammar 1)
console.log (stul.name); // Output results : Xiao Ming
// Access the properties of the same object ( grammar 2)
console.log (stul['age']); // Output results :18
// Method of calling object ( grammar 1)
stul.sayHello(); // Output results : Hello
// Method of calling object ( grammar 2)
stul['sayHello'](); // Output results : Hello
Copy code
If the member name of the object contains special characters , You can use a string to represent ,
The sample code is as follows :
var obj = {
'name-age': ' Xiao Ming -18'
};
console.log (obj['name-age']);
// Output results :" Xiao Ming -18"
Copy code
JavaScript The object has dynamic characteristics . If an object has no members , Users can manually assign properties or methods to add members ,
Specific examples are as follows :
var stu2 = {}; // Create an empty object
stu2.name = 'Jack'; // Add... To the object name attribute
stu2.introduce = function() { // Add... To the object introduce Method
alert ('My name is ' + this.name);// Use... In methods this Represents the current object
};
alert (stu2.name);// visit name attribute , Output results : Jack
stu2.introduce();// call introduce() Method , Output results :My name is Jack
Copy code
In the above code , In the method of an object, you can use this To represent the object itself , therefore , Use this.name You can access the... Of the object name attribute .
If you access a property that does not exist in the object , Returns the undefined.
The sample code is as follows :
var stu3 = {}; // Create an empty object
console.log(stu3.name); // Output results : undefined
Copy code
5.1.4_ utilize new Object Create objects
When I was studying arrays , We know that we can use new Array Create an array object . An array is a special object , If you want to create an ordinary object , Then use new Object Create .
The sample code is as follows :
var obj = new Object(); // Created an empty object
obj.name = ' Xiao Ming '; // After creating the object , Add members to the object
obj.age = 18;
obj.sex = ' male ';
obj.sayHello = function(){
console.log('Hello');
};
Copy code
5.1.5_ Using constructors to create objects
The literal method learned earlier is only suitable for creating an object , When you need to create multiple objects , Also write every member of the object , Obviously more troublesome , therefore , You can use constructors to create objects . The syntax for using constructors to create objects is “new Constructor name ()”, Arguments can be passed to the constructor in parentheses , If there are no parameters , Parentheses can be omitted .
actually ,“new Object()” Is a way to create objects using constructors ,Object Is the name of the constructor , But this creates an empty object .
The basic grammar is as follows :
// Write constructors
function Constructor name () {
this. attribute = attribute ;
this. Method = function() {
// Method body
};
}
// Use constructors to create objects
var obj = new Constructor name ();
Copy code
In the above grammar , In the constructor this Represents the newly created object , In the constructor, you can use this To add members to the newly created object . It should be noted that , The name of the constructor is recommended to be capitalized .
Case study :
// Write a Student Constructors
function Student (name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log (' Hello , My name is ' + this.name);
};
}
// Use Student Constructor create object
var stul = new Student(' Xiao Ming ', 18);
console.log(stul.name); // Output results : Xiao Ming
console.log(stu1.sayHello()); // Output results : Hello , My name is Xiao Ming
var stu2 = new Student(' Xiaohong ', 17);
console.log(stu2.name); // Output results : Xiaohong
console.log(stu2.sayHello()); // Output results : Hello , My name is Xiao Hong
Copy code
JavaScript Constructors in are similar to traditional object-oriented languages ( Such as Java) Class in (class), therefore JavaScript Some terms in object-oriented programming can also be used in .
- abstract : Extract the common features of a class of objects , Write a construction function ( class ) The process of , It's called abstraction .
- Instantiation : Using constructors ( class ) The process of creating objects , It's called instantiation .
- example : If stu1 The object is Student Constructor created , be stu1 The object is called Student Instance of constructor ( Or instance object ).
tip :
In some documents , Methods in objects are often referred to as functions , Or call the construction function constructor or construction method , We just need to understand that these terms refer to the same thing .
Learn more recruit : Static members
There are static in object-oriented programming ( static ) The concept of ,JavaScript No exception .JavaScript Static members in , It refers to the properties and methods of the constructor itself , You don't need to create an instance object to use .
Let's demonstrate the creation and use of static members through code :
function Student(){
}
Student.school = 'x university '; // Add static properties school
Student.sayHello = function() { // Add static methods sayHello
console.log('Hello');
};
console.log(Student.school); // Output results :x university
Student.sayHello(); // Output results :Hello
Copy code
5.1.6_ Traversing the properties and methods of an object
Use for.in Syntax can traverse all properties and methods in an object ,
The sample code is as follows :
// Prepare an object to be traversed
var obj = {name:' Xiao Ming ', age:18, sex:' male '};
// Traverse obj object
for(var k in obj){
// adopt k You can get the property name or method name in the traversal process
console.log(k); // Output... In sequence :name、age、sex
console.log (obj[k]); // Output... In sequence : Xiao Ming 、18、 male
}
Copy code
In the above code ,k It's a variable name , You can customize , Customarily named k perhaps key, Indicates the key name . When traversing to each member , Use k To get the name of the current member , Use obj[k] Get the corresponding value . in addition , If the object contains methods , You can use the “ obj[k] () " To call .
Learn more : Determine whether the object member exists
When you need to judge whether a member in an object exists , have access to in Operator ,
Case study :
var obj = (name:'Tom', age: 16);
console.log('age' in obj); // Output results : true
console.log('gender' in obj);// Output results : false
Copy code
As can be seen from the above code , Returns... When the member of the object exists true , Return... When not present false.
Today's introductory study has come to an end
Peace
Looking back :
o ken Of HTML、CSS How to get started ( One )_HTML Basics
o ken Of HTML、CSS How to get started ( Two )_HTML Page elements and attributes
o ken Of HTML、CSS How to get started ( 3、 ... and )_ Text style properties
o ken Of HTML、CSS How to get started ( Four )_CSS3 Selectors
o ken Of HTML、CSS How to get started ( 5、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 6、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 7、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 8、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( Nine )_ Floating and positioning
o ken Of HTML、CSS How to get started ( Ten )_ Floating and positioning
o ken Of HTML、CSS How to get started ( 11、 ... and )_ Floating and positioning
o ken Of HTML、CSS How to get started ( Twelve )_ Application of forms
o ken Of HTML、CSS How to get started ( 13、 ... and )_ Application of forms
o ken Of HTML、CSS How to get started ( fourteen )_ Application of forms
o ken Of HTML、CSS How to get started ( 15、 ... and )_ Application of forms
o ken Of HTML、CSS How to get started ( sixteen )_ Multimedia technology
o ken Of HTML、CSS How to get started ( seventeen )_ Multimedia technology
【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( eighteen )
【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( nineteen )
【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( twenty )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( One )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( Two )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 3、 ... and )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( Four )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 5、 ... and )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 6、 ... and )
About postscript :
Thank you for reading , I hope it helped you If the blog is flawed, please leave a message in the comment area or add contact information in the personal introduction of the home page to chat with me Thank you for your advice
Originality is not easy. ,「 give the thumbs-up 」+「 Focus on 」 Thank you for your support
copyright notice
author[Please call me Ken],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826201009838O.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich