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

Insert picture description here

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 ：

【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