前端开发_JavaScript_对象基础

对象基础

1.引入

   我们之前学习了函数和事件，那么现在我们开始学习JavaScript中另一个重要的知识点:对象。

2.对象概述

   在JavaScript中，对象是一个重要的概念，在 JavaScript 中，几乎“所有事物”都是对象。所有 JavaScript 值，除了原始值，都是对象。(这里指的原始值是指JavaScript中的5种数据类型:string、number、boolean、null、undefined)。

   在程序中的对象我们可以这样理解(类似于java种的面向对象)，任何事物都有其自己的特点以及功能，我们把这一个事物的特点定义为属性，然后把这一个事物的功能定义为函数。这样就组成了对象。

3.对象定义

 (1).对象定义映射

      下面我们使用现实生活中的例子来举例来定义这一个对象的例子，使用学生为例。

现实中描述	代码中描述
学生姓名(属性)	stuName
学生年龄(属性)	stuAge
学生性别(属性)	stuSex
学生专业(属性)	stuMajor
学生学习(函数)	function study(){     alert("这是学生学习的函数"); }

 (2).对象定义代码实现

<script type="text/javascript">
   var stu = {
	   stuName:'张三',
	   stuAge:20,
	   stuSex:'男',
	   stuMajor:'计算机应用技术',
	   study:function(){
			 alert("学生爱学习!");
		}
   }
</script>

4.对象属性访问

  (1).对象属性的语法格式

访问对象属性的语法格式

objectName.property 

或者是

objectName['property'] 

 (2).对象属性访问代码实现

<script type="text/javascript">
   var stu = {
     stuName:'张三',
	 stuAge:20,
	 stuSex:'男',
	 stuMajor:'计算机应用技术',
	 study:function(){
		   document.write("这是学生的学习方法。")
	  }
    }
	document.write("获取的对象信息是:" + stu.stuName + "--" + stu.stuAge + "--" 
				   + stu.stuSex + "--" + stu.stuMajor);
	 stu.study();
</script>

 5.对象属性访问中this关键字的使用

   (1).概述

        我们知道在java的面向对象中this关键字表示的是当前对象的引用，但是在JavaScript中关键字this，并不是固定的，它的指向会随着不同的代码环境指向不同的内容，主要可以分为以下几个操作:

       ①:在函数中，this表示该函数所属的对象。

<script type="text/javascript">
  var stu = {
  stuName:'张三',
  stuAge:20,
  stuSex:'男',
  stuMajor:'计算机应用技术',
  study:function(){
					
	//在对象函数上，this指向调用它所在的方法的对象，
	//那么下面的调用实际就表明this是指向stu对象
	document.write("这是学生"+this.stuName+"的学习方法。" )
  }
  }
</script>

      ②:如果说单独的使用this关键字，那么这一个时候它指向的是windows对象。

<script type="text/javascript">
   var testThis = this;
   document.write("this对象的指向是:" + testThis)
</script>

     ③:在事件中，this 指向了接收事件的 HTML 元素

 <style type="text/css">
    .box{
	    width: 250px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		border: 1px solid green;
		color: red;
		font-size: 18px;
		font-family: "宋体";
	}
</style>

<div class="box" onmouseover="changeColor(this)">
			盒子1
</div>
		
<script type="text/javascript">
   function changeColor(obj){
	 obj.style.backgroundColor = "green";
   }
</script>

  6.JavaScript对象输出

    (1).概述:我们发现可以在对象中定义不同的数据类型，为了更好的知道对象中存储的数据类型，我们有时候需要输出该对象的内容。那么我们一起来看一下如何实现对象的内容输出。

    (2).javaScript对象的解决方案如下所示:

    ①:使用字符串拼接的方式现实对象的内容

<div class="box" id="box">
</div>
		
<script type="text/javascript">
   var stu = {
	   stuName: '张三',
	   stuAge: 20,
	   stuSex: '男',
	   stuMajor: '计算机应用技术',
	   study: function() {
			  document.write("test StudentInfo");
			}
	}
			
	//使用字符串拼接的方式实现对象的输出
	document.getElementById("box").innerHTML = "stuName:" + stu.stuName 
			+ "<br>" + "stuAge:" + stu.stuAge  + "<br>" + "stuSex:" + stu.stuSex 
			+ "<br>" + "stuMajor:" + stu.stuMajor
</script>

  ②:在循环中显示对象

<div class="box" id="box">
</div>
<script type="text/javascript">
   var stu = {
	   stuName: '张三',
	   stuAge: 20,
	   stuSex: '男',
	   stuMajor: '计算机应用技术',
	   study: function() {
		      document.write("test StudentInfo");
	    }
   }
			
   //使用循环现实对象中的属性信息
   var stuInfo = "";
   for(var st in stu){
	   stuInfo += stu[st] + "<br>";
   }
   document.getElementById("box").innerHTML = stuInfo;
</script>

   ③:使用 Object.values()，通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组。

<div class="box" id="box">
</div>
		
<script type="text/javascript">
   var stu = {
	   stuName: '张三',
	   stuAge: 20,
	   stuSex: '男',
	   stuMajor: '计算机应用技术',
	   study: function() {
			document.write("test StudentInfo");
	    }
   }
			
   //使用数组的形式显示对象的内容
   var arr = Object.values(stu);
   document.getElementById("box").innerHTML = arr;
</script>

   ④:使用 JSON.stringify()，任何 JavaScript 对象都可以使用 JavaScript 函数 JSON.stringify() 进行字符串化（转换为字符串)。

<div class="box" id="box">
</div>
		
<script type="text/javascript">
   var stu = {
	   stuName: '张三',
	   stuAge: 20,
	   stuSex: '男',
	   stuMajor: '计算机应用技术',
	   study: function() {
			  document.write("test StudentInfo");
		    }
	}
			
	//使用数组的形式显示对象的内容
	var str = JSON.stringify(stu);
	document.getElementById("box").innerHTML = str;
</script>