JavaScript学习笔记（三）——对象

时间：2023-01-26 01:19:31

第四章 理解对象

1 说明

　　对象的状态：属性，行为：方法；

　　对象定义放在花括号内；

　　用冒号分隔属性名和属性值；

　　用逗号分隔属性名和属性值对，包括方法；

　　最后一个属性值后面不加逗号；

　　属性名可以是任何字符串，但通常遵循变量命名规则，包含空格时必须用引号将其括起来；

　　同一个对象中不能包含两个同名的属性；

　　句点表示法访问对象，当然也可以用方括号方法（更为灵活且需注意无逗号）；

　　添加新属性：指定新属性并赋值：fiat.needsWashing=true;

　　删除属性：delete fido.dogYears;（删除成功返回true）;

　　创建一个无属性的对象: var lookMaNoProps={ };

　　将对象信息显示到控制台: console.log(fiat);

　　函数中传递的是对象的引用，因此在函数中对对象的修改有效；

2 实例1:

 <script language="JavaScript" type="text/JavaScript">

 function getSecret(file,secretPassword)

 {

 file.opened=file.opened+1;

 if(secretPassword==file.password)

 return file.contents;

 else

 return "Invalid password! No secret for you.";

 }

 function setScret(file,secretPassword,secret)

 {

 if(secretPassword==file.password)

 {

 file.opened=0;

 file.contents=secret;

 }

 }

 var superSecretFile={

 level:"classifiled",

 opened:0,

 password:2168,

 contents: "Dr. Evel's next meeting is in Detroit."

 };

 var secret=getSecret(superSecretFile,2168);

 console.log(secret);

 var secret1=getSecret(superSecretFile,2152);

 console.log(secret1);

 setScret(superSecretFile,2168,"Dr . Evel's next meeting is in Philadelphia");

 secret=getSecret(superSecretFile,2168);

 console.log(secret);

 </script>

3 实例2：

 <!doctype html>

 <html lang="en">

 <head>

 <title>Battleship</title>

 <meta charset="utf-8">

 </head>

 <body>

 <script language="JavaScript" type="text/JavaScript">

 function makeCar()

 {

 var makes=["Chevy","GM","Fiat","Webville Motors","Tucker"];

 var models=["Cadillac","500","Bel-Air","Taxi","Torpedo"];

 var years=[1955,1957,1948,1954,1961];

 var colors=["red","blue","tan","yellow","white"];

 var convertile=[true,false];

 var rand1=Math.floor(Math.random()*makes.length);

 var rand2=Math.floor(Math.random()*models.length);

 var rand3=Math.floor(Math.random()*years.length);

 var rand4=Math.floor(Math.random()*colors.length);

 var rand5=Math.floor(Math.random()*5)+1;

 var rand6=Math.floor(Math.random()*2);

 var car={

 make:makes[rand1],

 model:models[rand2],

 year:years[rand3],

 color:colors[rand4],

 passengers:rand5,

 convertile:convertile[rand6],

 mileage:0,

 fuel:0,

 started:false,

 start:function(){

 this.started=true;

 },

 stop:function(){

 this.started=false;

 },

 drive:function(){

 if(this.started)

 {

 if(this.fuel>0)

 alert("Zoom zoom!");

 else

 {

 alert("Uh , oh ,out of fuel!");

 this.stop();

 }

 }

 else

 alert("You need to start the engine first!");

 },

 addFuel:function(amount){

 this.fuel+=amount;

 }

 };

 return car;

 }

 function displayCar(car)

 {

 console.log("Your new car is a "+car.year+" "+car.make+" "+car.model);

 }        

 var Cadillac=makeCar();

 displayCar(Cadillac);

 //访问对象中的属性

 //方法一：迭代器

 for(var pup in Cadillac)

 {

 console.log(pup+" : "+        Cadillac[pup]);

 }

 //方法二：句点访问法和方括号访问法

 console.log("You new car 's color is "+Cadillac.color);

 console.log("Your car counld hold "+Cadillac["passengers"]+" people.");

 console.log("Your car counld hold "+Cadillac["passe"+"ngers"]+" people.");

 Cadillac.drive();//开车

 Cadillac.start();//启动

 Cadillac.drive();//开车

 Cadillac.addFuel(15);//加油

 Cadillac.start();//启动

 Cadillac.drive();//开车

 Cadillac.stop();//熄火

 Cadillac.drive();//开车

 </script>

 </body>

 </html>

4 对象拓展

　　JavaScript提供：

　　Date， Math， RegExp(字符串中查找)， JSON(与其他应用程序交换js对象)

　　浏览器提供：

　　Doucument(写入网页)，Windows(，与浏览器相关)，Console(与控制台相关)

五、高级对象构造技巧

1 构造函数创建对象（模板）

  • 构造函数只能返回this；否则会导致函数不返回它创建的对象；
  • 判断某个实例是否由某个构造函数创建；
  • cadi instanceof Dog;是返回true；
  • 当然可以使用上面阐述的方式更改对象的属性和方法，更改后，intanceof依然显示true；
 <!doctype html>

 <html lang="en">

 <head>

 <title>Dog wang!</title>

 <meta charset="utf-8">

 <style type="text/css">

 </style>

 <script language="JavaScript" type="text/JavaScript">

 //构造函数

 function Dog(name,breed,weight){

 this.name=name;

 this.breed=breed;

 this.weight=weight;

 this.bark=function(){

 if(this.weight>25)

 alert(this.name+" says Woof!");

 else

 alert(this.name+" says Yip!");

 };

 }

 var fido = new Dog("Fido", "Mixed", 38);

 var fluffy = new Dog("Fluffy", "Poodle", 30);

 var spot = new Dog("Spot", "Chihuahua", 10);

 var dogs = [fido, fluffy, spot];

 for(var i = 0; i < dogs.length; i++) {

 var size = "small";

 if (dogs[i].weight > 10) {

 size = "large";

 }

 console.log("Dog: " + dogs[i].name

 + " is a " + size

 + " " + dogs[i].breed

 );

 }

 for (var i = 0; i < dogs.length; i++) {

 dogs[i].bark();

 }

 </script>

 </head>

 <body>

 </body>

 </html>

2 内置构造函数

 var now=new Date();

 var dateString=now.toString();

 var year=now.getFullYear();

 var birthday=new Date("May 1,1998 08:09 pm");

 console.log(birthday.toString());

 console.log(dateString);

 console.log(year);

3 数组对象

var items=new Array("a","b","c");

console.log(items[2]);

4 其他内置对象

Object【对象字面量是其实例】，Math，RegExp，Error

5 使用原型创建对象

  • 在所使用上述构造函数创建对象时，每个不同的对象都需要分配内存（主要是行为），为了节约内存管理提出了继承原型的方式创建对象，实质也是继承对象；
  • Dog.prototype访问原型
  • 原理：所有方法和属性都是先在实例对象中查找调用，如果不存在则返回原型查找调用并将原型的属性方法添加给实例对象；
  • spot.hasOwnProperty("sitting")可以测试sitting属性是否在实例对象spot中存在，存在返回true否则false；
  • 学会创建原型链对象,最初始的都是Object对象
  • 例：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="utf-8">

 <title>Show dogs</title>

 <script>

 //创建狗狗的原型

 function Dog(name, breed, weight) {

     this.name = name;

     this.breed = breed;

     this.weight = weight;

 }

 //为狗狗添加属性

 Dog.prototype.species = "Canine";

 Dog.prototype.sitting = false;

 //为狗狗添加方法

 Dog.prototype.sit = function() {

 if (this.sitting) {

 console.log(this.name + " is already sitting");

 } else {

 console.log(this.name + " is now sitting");

 this.sitting = true;

 }

 }

 Dog.prototype.bark = function() {

 if (this.weight > 25) {

 console.log(this.name + " says Woof!");

 } else {

 console.log(this.name + " says Yip!");

 }

 };

 Dog.prototype.run = function() {

     console.log("Run!");

 };

 Dog.prototype.wag = function() {

     console.log("Wag!");

 };

 //创建一个表演狗的原型——构造函数

 /*

 function ShowDog(name, breed, weight, handler) {

 this.name = name;

 this.breed = breed;

 this.weight = weight;

 this.handler = handler;

 }

 */

 //改进版

 function ShowDog(name,breed,weight,handler)

 {

 Dog.call(this,name,breed,weight);//重用构造函数Dog中处理name等的代码

 this.handler=handler;

 }

 //使表演狗原型继承自狗狗原型

 ShowDog.prototype = new Dog();

 //重写ShowDog的constructor属性

 ShowDog.prototype.constructor=ShowDog;

 //为表演狗原型添加新属性

 ShowDog.prototype.league = "Webville";

 //为表演狗原型添加方法

 ShowDog.prototype.stack = function() {

 console.log("Stack");

 };

 ShowDog.prototype.bait = function() {

 console.log("Bait");

 };

 ShowDog.prototype.gait = function(kind) {

 console.log(kind + "ing");

 };

 ShowDog.prototype.groom = function() {

 console.log("Groom");

 };

 //创建狗狗原型的实例对象

 var fido = new Dog("Fido", "Mixed", 38);

 var fluffy = new Dog("Fluffy", "Poodle", 30);

 var spot = new Dog("Spot", "Chihuahua", 10);

 //重写spot实例的bark方法

 spot.bark = function() {

 console.log(this.name + " says WOOF!");

 };

 //创建表演狗原型的实例对象

 var scotty = new ShowDog("Scotty", "Scottish Terrier", 15, "Cookie");

 var beatrice = new ShowDog("Beatrice", "Pomeranian", 5, "Hamilton");

 //测试狗狗原型实例对象的方法调用

 fido.bark();

 fluffy.bark();

 spot.bark();

 //测试表演狗原型实例对象的方法调用

 scotty.bark();

 beatrice.bark();

 scotty.gait("Walk");

 beatrice.groom();

 //测试实例的constructor属性

 console.log("FIdo constructor is "+fido.constructor);

 console.log("Scotty constructor is "+scotty.constructor);

 </script>

 </head>

 <body>

 </body>

 </html>
  • 重写内置行为
    • 如:重写Object的toString()方法
    • 不可重写属性：

constructor 指向与这个原型相关联的构造函数

hasOwnProperty判断实例中是否实例化

isPrototypeOf 判断一个对象是否是另一个对象的原型

propertyIsEnumerable 判断通过迭代对象的所有属性是否可访问指定属性

  • 可重写：

toString 转换为字符串

toLocaleString 将对象转换为字符串，通过重写可以描述对象的本地化字符串

valueOf 默认返回当前对象，通过重写让它返回你希望的其他值；

 <script>

 function Robot(name,year,owner)

 {

 this.name=name;

 this.year=year;

 this.owner=owner;

 }

 var toy=new Robot("Toy",2013,"Avary");

 console.log(toy.toString());

 function Robot2(name,year,owner)

 {

 this.name=name;

 this.year=year;

 this.owner=owner;

 }

 //重写Object的toString方法

 Robot2.prototype.toString=function(){

 return this.name+" Robot2 beloneing to "+this.owner;

 }

 var toy2=new Robot2("Toy",2013,"Avary");

 console.log(toy2.toString());

 </script>
  • 拓展内置对象

给String等内置对象添加新方法时，务必确保新方法名称不与对象既有名称冲突，链接其他代码时一定要清楚这些代码包含的自定义拓展，有些内置对象如Array不能拓展

 <script>

 //为String的原型添加方法cliche

 String.prototype.cliche=function(){

 var cliche=["lock and load","touch base","open the kimono"];

 for(var i=0;i<cliche.length;i++){

 var index=this.indexOf(cliche[i]);

 if(index>=0){

 return true;

 }

 }

 return false;

 }

 var sentences=["I'll send my car around to pick you up",

 "Let's touch base in the moring and see where we are",

 "We don't want to open the kimono,we just want to inform them."];

 for(var i=0;i<sentences.length;i++){

 var parse=sentences[i];

 if(parse.cliche){

 console.log("CliCHE ALERT: "+parse);

 }

 }

 </script>

JavaScript学习笔记（三）——对象的更多相关文章

  1. JavaScript&colon;学习笔记&lpar;8&rpar;——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  2. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  3. JavaScript学习笔记——BOM&lowbar;window对象

    javascript浏览器对象模型-windwo对象 BOM Browser Object Model window对象 是BOM中所有对象的核心. 一.属性 1.(位置类型-获得浏览器的位置) IE ...

  4. JavaScript学习笔记之对象

    目录 1.自定义对象 2.Array 3.Boolean 4.Date 5.Math 6.Number 7.String 8.RegExp 9.Function 10.Event 在 JavaScri ...

  5. JavaScript学习笔记&lpar;三&rpar;——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  6. JavaScript学习笔记-JSON对象

    JSON 是一种用来序列化对象.数组.数值.字符串.布尔值和 null 的语法.它基于 JavaScript 语法,但是又有区别:一些 JavaScript 值不是 JSON,而某些 JSON 不是 ...

  7. JavaScript学习笔记——DOM&lowbar;document对象

    javascript-document对象详解 DOM document(html xml) object modledocument对象(DOM核心对象) 作用: 1.内容 innerHTML 2. ...

  8. JavaScript学习笔记&lpar;三十八&rpar; 复制属性继承

    复制属性继承(Inheritance by Copying Properties) 让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties).在这 ...

  9. JavaScript学习笔记——3&period;对象

    JavaScript 对象 - 创建对象 1- var obj = new Object(); 2- var obj = {}; *例子:var person = {Name:"Hack&q ...

  10. Javascript学习笔记：对象的属性类型

    在ECMAScript中有两种属性:数据属性和访问器属性 1.数据属性 configurable:表示能否通过delete删除属性从而重新定义属性:或者能否修改属性的特性:或者能否把属性修改为访问器属 ...

随机推荐

  1. R内存管理与垃圾清理

    1.内存查看 memory.limit():查看内存大小 memory.limit(n):申请内存大小 memory.size(NA):查看内存大小 memory.size(T):查看已分配的内存 m ...

  2. UVALive 4864 Bit Counting --记忆化搜索 &sol; 数位DP？

    题目链接: 题目链接 题意:如果一个数二进制n有k位1,那么f1[n] = k,如果k有s位二进制1,那么f2[n] = f1[k] = s.  如此往复,直到fx[n] = 1,此时的x就是n的”K ...

  3. AQL 对象关系图

  4. OC文件大小的计算方法，多用于清理缓存

    OC文件大小的计算方法,一般多用于清理缓存.下载.统计 可以使用以下方法: #pragma mark Bt转换 + (NSString *)axcFileSizeWithToString:(unsig ...

  5. MarkDowdPad 破解

    一部小心把markdown破解了,把破解后的主程序发出来吧,放到安装根目录即可.点击升级到专业,随意输入邮箱和8位注册码,确定后会显示失败,返回即可,然后你就会发现已经变成专业版了. 不知道博客园怎么 ...

  6. Advanced Customization of the jQuery Mobile Buttons &vert; Appcropolis

    Advanced Customization of the jQuery Mobile Buttons | Appcropolis Advanced Customization of the jQue ...

  7. 51Nod 1534

    分析:Pwin代表Polycarp走的步数,而Win代表Vasiliy走的步数,则有Pwin=p.x+p.y,Vwin=max(v.x,v.y);显然若Pwin<=Win,肯定是Vasiliy胜 ...

  8. redis优化

    一.配置文件优化 bind 127.0.0.1 //允许连接的ip,如果就本机连接最后127.0.0.1 protected-mode yes //是否开启保护模式.默认开启,如果没有设置bind项的 ...

  9. npm后台启动nuxt服务之 kill

    后台启动 npm run start & ps aux | grep start 根据项目对应的id执行如下命令 kill xxxx

  10. jquey 小记

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象. 回调函数拥有两个参数: 第一个为对象的 ...

相关文章