javascript中5种常用对象创建方式
文章目录
一、直接创建方式
二、对象初始化器方式
三、构造函数方法
四、prototype原型方式
五、混合的构造函数/原型方式
一、直接创建方式
1、创建语法
|
var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
//函数体
}
…;
对象变量名. methodNameN = function([参数列表]){
//函数体
}
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var student = new Object();//直接创建对象
student.name="Tom";//定义变量
student.doHomework=function(){//定义方法
console.log(this.name+name+"@@@@@@@@@@@");
}
console.log(student.name);//输出学生姓名
student.doHomework();//调用方法
</script>
</head>
<body>
</body>
</html>
3、运行结果
二、对象初始化器方式
1、创建语法
|
var 对象变量名 = {
property1 : value1,
property2 : value2,
…,
propertyN : valueN,
methodName1 : function([parameter_list]){
//函数体
},
…,
methodNameN : function([parameter_list]){
//函数体
}
}
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//对象初始化器方式
var object={
url:"",
success:function(data){
console.log(data+"自主学习");
}
};
object.success("Tom")//调用方法，并传参
</script>
</head>
<body>
</body>
</html>
3、运行结果
三、构造函数方法
1、创建语法
|
function 构造函数([参数列表]){
this.属性 = 属性值;
…
this.属性N = 属性值N;
this.函数1 = function([参数列表]){
//函数体
} ;
…
this.函数N = function([参数列表]){
//函数体
} ;
}
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--构造函数方式便于动态为属性赋值，但是这种方式将方法也定义在了构造方法体中，使得代码比较杂乱-->
function Student(score){
this.name="Tom";
this.score=score;
this.doHomework=function(){
console.log(this.name+"正在做作业");
}
}
var student=new Student(88);
console.log(student.score)//调用属性并输出
student.doHomework();//调用方法
</script>
</head>
<body>
</body>
</html>
3、运行结果
四、prototype原型方式
1、创建语法
|
function 对象构造器( ){
}
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
//函数体
}
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--prototype原型方式实现了方法与属性的分离,使代码不混乱,但不能动态的给属性赋值-->
function Student(){
}
Student.prototype.name="Tom";
Student.prototype.doHomework=function(){
console.log("正在做作业")
}
var student = new Student();
student.doHomework();
</script>
</head>
<body>
</body>
</html>
3、运行结果
五、混合的构造函数/原型方式
1、创建语法
|
function 对象构造器([参数列表]){
}
对象构造器.prototype.函数名 = function([参数列表]){
//函数体
}
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--混合的构造函数/原型方式实现了方法与属性的分离,使代码不混乱,且能动态的给属性赋值-->
function Student(name){
this.name=name;//动态的给name赋值
}
Student.prototype.doHomework=function(){
console.log(this.name+"正在做作业")
}
var student = new Student("Tom");
student.doHomework();
</script>
</head>
<body>
</body>
</html>
3、运行结果
