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()去解析的时候无法获取新增的字段属性,只能够获取到原始定义的字段属性。