1.概念:
JavaScript的对象分成预定义对象和自定义对象。预定义对象包括内置对象即JavaScript内置的对象和浏览器对象即浏览器提供的对象,其中内置对象有JavaScript的String对象,JavaScript的Array对象和JavaScript的Math对象和Date对象等,浏览器对象有document对象。自定义对象就是按照某些特定需求创建的自定义对象。
2.自定义对象创建方法:
1)JSON方法创建
格式:
var jsonobject={
propertyName:value, //属性
functionName:function(){statements;} //方法
}
调用:jsonobject.属性/方法
比较:在标签中,<标签类名 属性1="属性值" 属性2="属性值" ...>这里面每个属性之间使用空格隔开,属性与属性值之间是"="号连接,但是在style的内嵌样式中,style="属性1:值;属性2:值;..."这里面的属性之间使用";"号分隔,属性与属性值之间是用":"号连接,style的内部形式的赋值方式与之相似
在style的内部形式的多选择器中使用","号选中多个选择器,但是标签的class属性书写时使用空格区分多个class
这里json格式中属性与属性值之间使用分号,多个属性之间使用逗号,最后使用大括号括起来作为对象赋值给变量。
举例:
如果想创建一个用户类,其包含姓名,年龄,职业三个属性,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user</title>
</head>
<body>
<script language="javascript">
var user={//创建一个user对象
name:"u1",
age:18,
job:"student",//包含了姓名,年龄,工作三个属性
getmessage:function(){//包含了获取信息的方法
document.write("用户姓名",this.name,"<br/>");
document.write("用户年龄",this.age,"<br/>");
document.write("用户职业",this.job,"<br/>");
}
}
user.getmessage();//调用user的getmessage方法
</script>
</body>
</html>如图,使用json方法创建了一个user对象,包括姓名,年龄,工作,并使用getmessage方法写到网页上
在JavaScript中，对象的属性值可以是任何类型的数据，包括基本类型（如字符串、数字等）和复杂类型（如数组、对象等）。
所以,还可以有以下代码使得对象的属性更细节。如对工作是学生再加上工作id是000000001。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user</title>
</head>
<body>
<script language="javascript">
var user={
name:"u1",
age:18,
job:{id:"000000001",title:"student"},
//使用{}定义了一个对象,这个job的属性值就是一个对象
getmessage:function(){
document.write("用户姓名",this.name,"<br/>");
document.write("用户年龄",this.age,"<br/>");
document.write("用户id",this.job.id,"<br/>");
document.write("用户职业",this.job.title,"<br/>");
}
}
user.getmessage();
</script>
</body>
</html>
结果如左所示
注意:
1.访问对象内的元素时,需要使用this.来访问,不能直接使用变量名,也不能使用this->
在JavaScript中，
this关键字确实表示当前对象，但它不是一个指针，而是一个特殊的变量。
所以使用.或者[ ]都能访问,在[ ]内访问时,需要加上" "
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user</title>
</head>
<body>
<script language="javascript">
var user={
name:"u1",
age:18,
job:{id:"000000001",title:"student"},
//使用{}定义了一个对象,这个job的属性值就是一个对象
getmessage:function(){
return this["name"];
}
}
document.write(user.getmessage());
</script>
</body>
</html>
结果如左所示
2.调用函数时要记得使用()表示调用,如果没有使用浏览器上会显示整个function的字面内容,但是上方定义时需要不能使用()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user</title>
</head>
<body>
<script language="javascript">
var user={
name:"u1",
age:18,
job:{id:"000000001",title:"student"},
getmessage:function(){
return this["name"];
}
}
document.write(user.getmessage);//此处没有使用调用
</script>
</body>
</html>
结果如左所示
2)构造函数方式
格式:
function funcName([param]){
this.property=value1|param1; //属性
...
this.methodName=function(){}; //方法
....
}
调用：var 变量名= new funcName()
构造的方法与函数定义类似,都是function 函数名(参数){}
不同的是属性和方法前面要加上this
还是以上一个使用json创建对象的例子,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stu</title>
</head>
<body>
<script language="javascript">
function Stu(name,age){//定义了一个构造函数
this.name=name;
this.age=age;//定义属性
this.getmessage=function(){//定义方法
document.write("姓名",this.name,"<br/>");
document.write("年龄",this.age,"<br/>");
}
}
var stu1 = new Stu("liyjioo",18);
stu1.getmessage();
</script>
</body>
</html>上述代码不仅可以使用匿名函数写到构造函数里,还可以使用普通函数写到构造函数外
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stu</title>
</head>
<body>
<script language="javascript">
function Stu(name,age){
this.name=name;
this.age=age;//实例属性
this.getmessage=getmessage;//指定方法
}
function getmessage(){//定义方法
document.write("姓名",this.name,"<br/>");
document.write("年龄",this.age,"<br/>");
}
var stu1 = new Stu("liyjioo",18);
stu1.getmessage();
</script>
</body>
</html>也就是在构造函数内指定构造函数外的方法即可,注意this.getmessage=getmessage不是调用是指定,不需要写()
3.三种类型的属性:
三种类型是私有属性,实例属性,类属性。它们分别是只能类中引用,使用对象引用,可以直接通过类名引用。
- 类属性：这些属性是定义在类的构造函数外部的，因此它们是所有实例共享的。类属性可以通过类名直接访问，也可以通过类的任何实例访问。
- 实例属性：这些属性是定义在类的构造函数内部的，通常使用
this关键字来定义。每个实例都有自己的实例属性，它们不是共享的，每个实例都可以有自己的属性值。
由于没有涉及到类,所以先讨论实例属性
实例属性创建方法有两种:
1)this方法:
this.属性名 = 值
2)prototype方法:
类名.prototype.属性名 = 值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stu</title>
</head>
<body>
<script language="javascript">
function Stu(name,age){
Stu.prototype.name=name;
Stu.prototype.age=age;
Stu.prototype.getmessage=getmessage;
}
function getmessage(){//定义类方法
document.write("姓名",this.name,"<br/>");
document.write("年龄",this.age,"<br/>");
}
var stu1 = new Stu("liyjioo",18);
stu1.getmessage();
</script>
</body>
</html>
输出如左所示,与以往self相比,只需要把self改为类名.prototype即可
私有属性创建方法:
var propertyName = value;
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stu</title>
</head>
<body>
<script language="javascript">
function Stu(name,age){
Stu.prototype.name=name;
var age=age;
Stu.prototype.getmessage=getmessage;
Stu.prototype.getage=function(){
document.write("私有属性age的调用,age为",age)
}
}
function getmessage(){
document.write("姓名",this.name,"<br/>");
document.write("年龄",this.age,"<br/>");
}
var stu1 = new Stu("liyjioo",18);
document.write("姓名",stu1.name,"年龄",stu1.age,"<br/>");
stu1.getage();
</script>
</body>
</html>在示例代码中,写了一个age私有属性,其实虽然说是私有属性,其更像是一个局部变量,出了其作用域就无法被引用,并且在构造函数内部引用时,也不能使用this来引用,因为它并不是构造函数的实例属性。
JavaScript的定义对象的原型方法和混合方法
原型方法通常用于扩展内置对象或自定义对象的功能。
混合方法结合了构造函数和原型方法的优点。在构造函数中定义对象的属性，而在原型中定义对象的方法。
混合方法的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合方法</title>
</head>
<body>
<script language="javascript">
function Stu(name,age){
Stu.prototype.name=name;
Stu.prototype.age=age;
}
Stu.prototype.getmessage=function(){
document.write("姓名",self.name,"年龄",self.age)
}
var stu1 = new Stu("liyjioo",18);
document.write("姓名",stu1.name,"年龄",stu1.age,"<br/>");
stu1.getage();
</script>
</body>
</html>使用混合方法,可以避免每个对象创建相同方法,有助于减少内存的占用。
并且属性和方法分离,更易于维护和编写。
总之，它结合了构造函数方法和原型方法的优点，提供了一种灵活、高效、易于维护和扩展的方式来创建和管理对象。
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
