JavaScript自定义对象 |
您所在的位置：网站首页 › 自定义对象的属性通过______来申明 › JavaScript自定义对象 |
|
1.2 自定义对象的创建 创建自定义对象的三种方式 1.2.1 直接创建自定义对象直接创建自定义对象的语法格式如下： var 对象名 = {属性名1：属性值1，属性名2：属性值2，属性名3：属性值3......} 案例： var student = { name:"张三", sex:"男", age:25 } document.write("姓名:"+student.name+""); document.write("性别:"+student.sex+""); document.write("年龄:"+student.age+"") 另外，可以使用数组的方式对属性值进行输出，代码如下： var student = { name:"张三", sex:"男", age:25 } document.write("姓名:"+student['name']+""); document.write("性别:"+student['sex']+""); document.write("年龄:"+student['age']+"") ``` 1.2.2 通过自定义构造函数创建对象调用构造函数必须使用new运算符，在构造函数内部可以通过this关键字初始化对象的属性与方法。 function Student(name,sex,age){ // 定义构造函数 this.name = name; //初始化对象的属性 this.sex = sex; this.age = age; } var student1 = new Student("张三","男",25); //创建对象实例 document.write("员工姓名："+student1.name+"性别："+student1.sex+"年龄："+student1.age);//输出属性值对象不但可以拥有属性，还可以拥有方法。 function Student(name,sex,age){ // 定义构造函数 this.name = name; //初始化对象的属性 this.sex = sex; //初始化对象的属性 this.age = age; ////初始化对象的属性 this.showName = showName; //初始化对象的方法 this.showSex = showSex; //初始化对象的方法 this.showAge = showAge; //初始化对象的方法 //另外可以在构造函数中直接使用表达式来定义方法 this.showSex = function(){ alert(this.sex); } } function showName(){ alert(this.name); } function showAge(){ alert(this.age); }调用构造函数需要注意一个问题，如果构造函数中定义了多个属性和方法，那么在每次创建对象实例时都会为该对象分配相同的属性和方法，这样会增加对内存的需求，这时可以通过prototype属性来解决这个问题。 prototype属性是js中所有函数都有的一个属性，该属性可以像对象中添加属性或方法，格式如下： object.prototype.name = value; 参数说明：object：构造函数名。name：要添加的属性名或者方法名。value：添加属性的值或执行方法的函数 function Student(name,sex,age){ // 定义构造函数 this.name = name; //初始化对象的属性 this.sex = sex; //初始化对象的属性 this.age = age; ////初始化对象的属性 } Student.prototype.show = function(){ //定义show（）方法 alert("姓名："+this.name+"\n性别："+this.sex+"\n年龄"+this.age); } var student1 = new Student("张三","男",25); //创建对象实例 student1.show(); //调用对象的show()方法案例：创建一个圆的对象，实现计算圆的周长和面积的功能 ``` function Circle(r){ this.r = r; //设置对象r的属性 } Circle.prototype.pi = 3.14; //添加对象的pi属性 Circle.prototype.circumference = function(){ //定义计算圆周长的circumference()方法 return 2*this.pi*this.r; } Circle.prototype.area = function(){ ////定义计算圆面积的area()方法 return this.pi*this.r*this.r; } var c = new Circle(10); //创建一个新对象c document.write("圆的半径为："+c.r+""); //输出圆的半径 document.write("圆的周长为："+parseInt((c.circumference()))+"");//输出圆的周长 document.write("圆的面积为："+parseInt(c.area())); ``` 1.2.3 通过系统内置的object对象创建自定义对象Object是js中的内部对象，提供了对象的最基本功能； obj = new Object([value]) 参数说明：obj：必选项，要赋值为Object对象的变量名。value：可选项，任意一种js基本数据类型（Number、Boolean和String）。如果value为一个对象，返回不做改动的该对象，如果value为null、undefined，或者没有给出，则产生没有内容的对象。** 使用Object对象可以创建一个没有任何属性的空对象，如果要设置对象的属性，只需要将一个值赋给对象的新属性即可。 例如，首先使用Object对象创建一个自定义对象student，并设置对象的属性，然后对属性值进行输出，代码如下： ``` var student = new Object(); //创建一个空对象 //设置对象的属性 student.name = "王五"; student.sex = "男"; student.age = "28"; //输出对象的属性 document.write("姓名："+student.name+""+"性别："+student.sex+""+"年龄:"+student.age+""); ```一旦通过给属性赋值创建了该属性，就可以在任何时候修改这个属性的值，此时只需要赋给它新值。 在使用Object对象创建自定义对象时，也可以定义对象的方法。 var student = new Object(); //创建一个空对象 //设置对象的属性 student.name = "王五"; student.sex = "男"; student.age = "28"; //定义对象的方法 student.show = function(){ alert("姓名："+student.name+"\n性别："+student.sex+"\n年龄："+student.age); }; student.show(); //调用对象的方法; 二、JavaScript对象访问语句 2.1对象访问语句在js中，for...in语句和with语句都是专门应用于对象的语句 2.1.1 for...in循环语句与for循环语句十分相似，for...in语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里。 for（变量 in 对象）{语句} 参数说明：变量：用于存储某个对象的所有属性名。 对象：用于指定要遍历属性的对象。 语句：用于指定循环体。 for...in语句用于对某个对象的所于属性进行循环操作，将某个对象的所有属性名称依次赋值给同一个变量，而不需要事先知道对象属性的个数； 注：应用for...in语句遍历对象的属性，在输出属性值时一定要使用数组的形式（对象名[属性名]）进行输出，而不能使用“对象名.属性名”这种形式。 var object = { user:"小月", sex:"女", interest:"唱歌、画画" }; for(var example in object){ //应用for...in循环语句 document.write("属性："+example+"="+object[example]+""); //输出各属性名以及属性值 } 结果： 属性：user=小月属性：sex=女属性：interest=唱歌、画画 2.2.2 with语句with语句被用于在访问一个对象的属性或方法时避免重复引用指定对象名，其语法格式如下： with（对象名称）{语句}。 对象名称：用于指定要操作的对象名称； 语句：要执行的语句，可直接引用对象的属性名或者方法名； 在一个连续的程序代码中，如果多次使用多个某个对象的多个属性或者方法，那么只要在with后（）中写出对象实例的名称，就可以在在随后的大括号{}中的程序语句中直接引用该对象的属性名或方法名，不必在每个属性名或者方法名前都加上对象实例名和”."。 function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; } var student = new Student("张三","男","23"); with(student){ alert("姓名："+name+"\n性别："+sex+"\n年龄:"+age); //输出多个属性的值案例： function Table(row,col,width,height){ this.row = row; //设置对象属性 this.col = col; this.width = width; this.height = height; } Table.prototype.border = 1; //为对象添加border属性; Table.prototype.createtable = function(){ //为对象添加createtable()方法; var show = ""; //声明变量并初始化 //定义要输出的字符串 show =""; var bgcolor; for(i=1;i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |