本文主要是介绍前端开发_JavaScript_对象构造与访问，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

对象构造与访问

1.引入

上一次课，我们给大家讲解了对象的定义和基本的显示输出，为了更好的学习后续的JavaScript提供的一些对象，我们现在开始学习对象的构造和访问。

2.对象构造器

  (1).构造，构造一般是用于初始化变量的时候使用，比如java中的构造方法，用于初始化类的时候使用。那么JavaScript中的构造器也是一样的，用于初始化对象的时候使用。

  (2).对象构造器代码实现

<div class="box" id="box">
</div>
		
<script type="text/javascript">
   //定义的函数 Stu() 就是对象构造器函数。
   function Stu(stuName,stuAge,stuSex,stuMajor){
		    this.stuName = stuName;
			this.stuAge = stuAge;
			this.stuSex = stuSex;
			this.stuMajor = stuMajor;
   }
			
   //通过 new 关键词调用构造器函数可以创建相同类型的对象
   var stu1 = new Stu("张三",20,"男","大数据");
   var stu2 = new Stu("李四",20,"男","数据挖掘");
			
   //显示输出
  document.getElementById("box").innerHTML = "学生:" + stu1.stuName + ",是主修:" + 
  stu1.stuMajor;
			
</script>

注意： 在这里的构造函数和创建对象的操作和java中的很类似。

3.为对象添加新的属性和函数

  (1).概述:为了更好的使用对象，JavaScript灵活的提供了可以在外部添加新的属性和函数。这是和其他的编程语言不一样的地方。

  (2).代码实现和效果截图

<div class="box" id="box">
</div>
		
<script type="text/javascript">
   //定义的函数 Stu() 就是对象构造器函数。
   function Stu(stuName,stuAge,stuSex,stuMajor){
	  this.stuName = stuName;
	  this.stuAge = stuAge;
	  this.stuSex = stuSex;
	  this.stuMajor = stuMajor;
   }
			
   //通过 new 关键词调用构造器函数可以创建相同类型的对象
   var stu1 = new Stu("张三",20,"男","大数据");
   var stu2 = new Stu("李四",20,"男","数据挖掘");
			
   //添加新的属性
   stu1.shoool = "MIT";
			
   //添加新的函数
   stu1.otherInfo = function(){
	 return "学生年龄是:" + stu1.stuAge + "学生性别是:" + stu1.stuMajor;
   }
			
   //显示输出
   document.getElementById("box").innerHTML = 
			"学生:" + stu1.stuName 
			+ ",是主修:" + stu1.stuMajor
			+ "学校是:" + stu1.shoool
			+ "其他相关的信息是:" + stu1.otherInfo();
</script>

 上述的操作其实等价于在构造函数中添加相同的代码，如下:

<div class="box" id="box">
</div>

<script type="text/javascript">
   //定义的函数 Stu() 就是对象构造器函数。
   function Stu(stuName,stuAge,stuSex,stuMajor,school){
	 this.stuName = stuName;
	 this.stuAge = stuAge;
	 this.stuSex = stuSex;
	 this.stuMajor = stuMajor;
	 this.school = school;
				
     //函数
     this.otherInfo = function(){
		return "学生年龄是:" + stu1.stuAge + "学生性别是:" + stu1.stuMajor;
     }
   }
			
   //通过 new 关键词调用构造器函数可以创建相同类型的对象
   var stu1 = new Stu("张三",20,"男","大数据","MIT");
   var stu2 = new Stu("李四",20,"男","数据挖掘","MIT");
			
			
   //显示输出
   document.getElementById("box").innerHTML = "学生:" + stu1.stuName + ",是主修:" + stu1.stuMajor + "学校是:" + stu1.school+ "其他相关的信息是:" + stu1.otherInfo();
		
</script>

 4.对象原型

    (1).对象原型:我们刚刚在操作中，我们是通过对象来进行的一个属性的添加，如果说我们直接使用已有的对象的构造器添加属性，发现我们这样的操作是无法添加的。如果需要强行添加，那么这一个时候需要prototype属性，那么为什么是prototype属性呢?因为Object.prototype 位于原型继承链的顶端。下面我们来看一下如何使用prototype属性给对象原型添加属性。

   (2).给对象给添加属性代码和效果示例

<div class="box" id="box">
</div>

<script type="text/javascript">
   //定义的函数 Stu() 就是对象构造器函数。
   function Stu(stuName,stuAge,stuSex,stuMajor,school){
	 this.stuName = stuName;
	 this.stuAge = stuAge;
	 this.stuSex = stuSex;
	 this.stuMajor = stuMajor;
	 this.school = school;
	 //函数
	 this.otherInfo = function(){
	    return "学生年龄是:" + stu1.stuAge + "学生性别是:" + stu1.stuMajor;
	 }
    }
			
	//添加新的属性给Stu对象
	Stu.prototype.nation = "china";
			
	//通过 new 关键词调用构造器函数可以创建相同类型的对象
	var stu1 = new Stu("张三",20,"男","大数据","MIT");
	var stu2 = new Stu("李四",20,"男","数据挖掘","MIT");
			
			
	//显示输出
	document.getElementById("box").innerHTML = JSON.stringify(stu1);
	//document.getElementById("box").innerHTML = stu1.nation;
</script>

注意:我们再添加了相应的属性之后，发现一个问题就是使用Json.stringify()去解析的时候无法获取新增的字段属性，只能够获取到原始定义的字段属性。 

这篇关于前端开发_JavaScript_对象构造与访问的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！