JavaScript对象的概述
对象
就是指现实世界中的某个具体事物或者一个独立的实体,如一个学生、一辆汽车、一个div标记都是一个对象。
面向对象的概念:就是把现实中的对象抽象为一组数据和若干操作方法(函数) ,可以把对象想象成一种新型变量:这种变量既能保存自己的若干数据成员(特征或属性),又包含对这些数据进行处理的方法 (函数或行为)。
- 学生对象的属性:学号、姓名、性别、年龄、各门课成绩
- 学生对象的方法:计算总分平均分、输出个人简介及成绩单
- a标记对象的属性:id值、class样式类名、href超链接页面
- a标记对象的方法:鼠标进入、离开、单击时的事件函数
一个对象的成员也可以是其他对象,如汽车对象包含发动机对象,div对象会包含a对象、a对象还包含属性对象。
面向对象三大特征:
对象封装或抽象(类)、继承与多态
Java语言和JavaScript语言的区别:Java是一种
基于类的面向对象
的语言,具有
面向对象
的全部特征;JavaScript
基于原型对象
的面向对象的语言,具有封装特征,同时具有部分继承特征,但是不支持多态,严格说它只是一种基于对象的语言而不是面向对象的语言。
JavaScript中没有类的概念,JavaScript有构造函数(原型对象)的概念
JavaScript用户自定义构造函数(原型对象)
使用
对象
,必须先根据对象的属性成员与操作方法抽象封装成构造函数,再用这个构造函数去创建具体的对象。在学习JavaScript时,我们可在某些不严格的情况下把构造函数(原型对象)理解为类。
例如:JavaScript设计构造函数,并创建“人”的对象的代码如下:
function Person(name, age) { //定义Person构造函数,可以没有参数
this.name=name; //定义对象的属性成员
this.age=age;
this.setName=function(name) { //构造函数内直接定义对象方法(函数)
this.name=name;
}
this.setAge=setAge; //间接定义对象方法,函数内声明在函数外定义
}
function setAge(age) { //构造函数外单独定义对象的方法
this.age=age }
var per01=new Person("张三",23);
JavaScript创建与使用对象
对象属性的使用
:
对象引用自己的属性、调用自己的方法必须使用“.”运算符,通过对象名调用。
- 直接使用对象的某个属性值:对象名.属性名; 或:对象名[“属性名”];
- 直接为对象的属性变量赋值:对象名.属性名=属性值; //新值冲掉原值
- 获取对象的某个属性值保持在变量中: var 变量名=对象名.属性名;
- 通过getAttribute( )通用方法获取属性值:对象名.getAttribute(“属性名”); 或:var 变量名=对象名.getAttribute(“属性名”);
如果属性成员又是一个对象,则必须用“.”逐级引用对象成员的某个属性值。例如Car类的汽车对象myCar,其中power属性为Engine类的发动机对象,而发动机对象还包含曲轴crankcase和活塞piston,如果引用myCar汽车对象中power发动机对象的活塞属性piston,必须书写为:myCar.power.piston 。
对象方法的使用:
对象名. 方法名([参数]);
或者对象名[’方法名‘] ([参数]);
用prototype给类添加新的属性或方法
自定义类、包括几乎所有JavaScript内置的系统类都可以使用
prototype
关键字给类添加任意的属性或方法
语法格式:类名. Prototype . 新的属性名或方法名;
如果是添加新方法,还必须单独定义这个函数,可以同时为方法设置参数:
可在添加方法时直接定义代码: 类名.prototype. 方法名= function([参数]) { //函数代码; }
事实上除了可以通过prototype关键字给对象添加新的属性和方法,还可以直接给某一个特定对象添加属于自己的属性和方法,或者通过setAttribute()通用方法为特定对象添加属于它自己的新属性或方法
-
直接为某个特定对象添加属于它自己的属性或方法
直接为对象添加新属性: 对象名.属性名=属性值; //属性若存在,则为赋值操作
直接为对象添加新方法: 对象名.方法名=function([参数]) { //函数代码; }
对象名.方法名=函数名; //必须单独定义新添加的函数
function 函数名([参数]) { //函数代码; } -
用
setAttribute
()通用方法为特定对象添加属于它自己的新属性或方法
语法格式:对象名.setAttribute(“属性名或方法名”, “属性值或方法代码”);
若该对象已存在指定属性则直接赋值,把现有属性原值冲掉保存新值。
例如: input.setAttribute(“type”, “text”); 等价:input.type=“text”;
例如:input.setAttribute(“onclick”, “javascript:alert(‘This is a test!’);”);
等价:input.οnclick=function() { alert(‘This is a test!’); }
创建Object自定义空对象或无类型空对象
JavaScript提供了一个内置的Object类,该类没有定义属性和方法,可供用户直接创建自定义的空对象或者无类型的空对象,再为该对象添加属于它自己的任意属性或方法。
- 用户直接创建自定义的空对象
var myObj = new Object( ); //空对象默认值为:[object Object]
- JavaScript还允许创建自定义无类型空对象,可以为该对象添加任意的属性或方法。
var 无类型对象 = { }; //无类型对象默认值为:[object Object]
创建匿名类的对象
语法格式: var 匿名类对象={
//类代码:定义若干属性、方法;
}
语法说明:
1)匿名类只能定义1个对象;
2)类中定义的属性须用冒号赋值,即属性名:属性值,使用时可任意为属性重新赋值;
3)类中定义的方法也必须用冒号定义,方法名: function([参数]) { //方法代码; };
4)类中定义的所有属性、方法之间不论换行与否都必须用逗号隔开,直到类定义结束。
var obj={}; //创建一个无类型空对象,可添加属性方法
obj.name="晓晓"; obj.age=18;
document.write("无类型对象obj="+obj.name+obj.age +"岁<hr />")
var baby= //创建一个匿名类,只能有1个baby对象
{ name:"哈宝", height:176, //匿名类属性方法必须冒号赋值
nickname:"宝儿", age:"1岁", sex:"女孩", //必须用逗号隔开
say:function() //定义方法say()
{ document.write("我是"+this.name+", 小名\""+this.nickname
+",身高="+this.height +"\"。\n我是个小"+this.sex
+",今年"+this.age+"了!<br />");
} }
baby.say(); //baby匿名类对象调用方法
baby.name="虎虎"; //baby对象重新赋值
baby.age="5岁"; baby.sex="男孩";
baby.say();