Chapter IV understanding object
1 Description
Object state: attribute, behavior: method;
The object definition is placed in curly brackets;
Use colons to separate property names and property values;
Comma separated attribute names and attribute value pairs, including methods;
There is no comma after the last attribute value;
The property name can be any string, but it usually follows the variable naming rules. When a space is included, it must be enclosed in quotation marks;
The same object cannot contain two attributes with the same name;
The period representation can be used to access objects, and of course, the square bracket method can also be used (more flexible and note that there is no comma);
Add new attribute: specify new attribute and assign value: fiat.needsWashing=true;
Delete attribute: delete fido.dogYears; (true returned after deletion);
Create an attribute free object: var lookMaNoProps = {};
Display the object information to the console: console.log(fiat);
The reference of the object is passed in the function, so the modification of the object in the function is effective;
2 example 1:
1 <script language="JavaScript" type="text/JavaScript"> 2 function getSecret(file,secretPassword) 3 { 4 file.opened=file.opened+1; 5 if(secretPassword==file.password) 6 return file.contents; 7 else 8 return "Invalid password! No secret for you."; 9 } 10 function setScret(file,secretPassword,secret) 11 { 12 if(secretPassword==file.password) 13 { 14 file.opened=0; 15 file.contents=secret; 16 } 17 } 18 var superSecretFile={ 19 level:"classifiled", 20 opened:0, 21 password:2168, 22 contents: "Dr. Evel's next meeting is in Detroit." 23 }; 24 var secret=getSecret(superSecretFile,2168); 25 console.log(secret); 26 var secret1=getSecret(superSecretFile,2152); 27 console.log(secret1); 28 setScret(superSecretFile,2168,"Dr . Evel's next meeting is in Philadelphia"); 29 secret=getSecret(superSecretFile,2168); 30 console.log(secret); 31 </script>
3 example 2:
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <title>Battleship</title> 8 9 <meta charset="utf-8"> 10 11 </head> 12 13 <body> 14 15 <script language="JavaScript" type="text/JavaScript"> 16 17 function makeCar() 18 19 { 20 21 var makes=["Chevy","GM","Fiat","Webville Motors","Tucker"]; 22 23 var models=["Cadillac","500","Bel-Air","Taxi","Torpedo"]; 24 25 var years=[1955,1957,1948,1954,1961]; 26 27 var colors=["red","blue","tan","yellow","white"]; 28 29 var convertile=[true,false]; 30 31 32 33 var rand1=Math.floor(Math.random()*makes.length); 34 35 var rand2=Math.floor(Math.random()*models.length); 36 37 var rand3=Math.floor(Math.random()*years.length); 38 39 var rand4=Math.floor(Math.random()*colors.length); 40 41 var rand5=Math.floor(Math.random()*5)+1; 42 43 var rand6=Math.floor(Math.random()*2); 44 45 46 47 var car={ 48 49 make:makes[rand1], 50 51 model:models[rand2], 52 53 year:years[rand3], 54 55 color:colors[rand4], 56 57 passengers:rand5, 58 59 convertile:convertile[rand6], 60 61 mileage:0, 62 63 fuel:0, 64 65 started:false, 66 67 68 69 start:function(){ 70 71 this.started=true; 72 73 }, 74 75 stop:function(){ 76 77 this.started=false; 78 79 }, 80 81 drive:function(){ 82 83 if(this.started) 84 85 { 86 87 if(this.fuel>0) 88 89 alert("Zoom zoom!"); 90 91 else 92 93 { 94 95 alert("Uh , oh ,out of fuel!"); 96 97 this.stop(); 98 99 } 100 101 } 102 103 else 104 105 alert("You need to start the engine first!"); 106 107 }, 108 109 addFuel:function(amount){ 110 111 this.fuel+=amount; 112 113 } 114 115 }; 116 117 return car; 118 119 } 120 121 function displayCar(car) 122 123 { 124 125 console.log("Your new car is a "+car.year+" "+car.make+" "+car.model); 126 127 } 128 129 var Cadillac=makeCar(); 130 131 displayCar(Cadillac); 132 133 //Accessing properties in objects 134 135 //Method 1: iterator 136 137 for(var pup in Cadillac) 138 139 { 140 141 console.log(pup+" : "+ Cadillac[pup]); 142 143 } 144 145 //Method 2: period access and square bracket access 146 147 console.log("You new car 's color is "+Cadillac.color); 148 149 console.log("Your car counld hold "+Cadillac["passengers"]+" people."); 150 151 console.log("Your car counld hold "+Cadillac["passe"+"ngers"]+" people."); 152 153 154 155 Cadillac.drive();//Drive a car 156 157 Cadillac.start();//start-up 158 159 Cadillac.drive();//Drive a car 160 161 Cadillac.addFuel(15);//Come on 162 163 Cadillac.start();//start-up 164 165 Cadillac.drive();//Drive a car 166 167 Cadillac.stop();//Stalling 168 169 Cadillac.drive();//Drive a car 170 171 </script> 172 173 </body> 174 </html>
4 object expansion
JavaScript provides:
Date, Math, regexp (find in string), JSON (exchange js object with other applications)
The browser provides:
Doucument (write web page), Windows(, browser related), console (console related)